First, I conducted background research on the e-commerce market in Japan to familiarize myself with the fashion e-commerce market in Japan. Some of my key insights were:

I also analyzed direct/indirect competitors, gathering the data into a chart to compare their strengths and weaknesses. This process helped me recognize trends across competitors and consider which features to incorporate into Mirror's website.

Next, I interviewed five participants, found within my social networks. All participants shopped online at least every two months. Three were female and two were male, all between the ages of 24 to 29. Three were based in Japan, and two in Canada. In each interview, I conducted a usability test with a competitor (H&M, Uniqlo, SHEIN, etc.)  to observe their likes/dislikes about existing e-commerce websites. I also created an interview script as a reference, which can be viewed here.  Each participant had fruitful things to say, such as:

After hearing what participants had to say, I transcribed their comments and compiled them into an empathy map, organized into thinking/feeling, seeing, hearing, pains, gains and what they do. Based on this information, I was able to draw up a persona, who would help guide and justify my choices from here on.

Next, I started to work on information architecture (IA). I brainstormed project goals and compiled a road feature map to further help me define necessary content and organize them into priorities so that I could design more efficiently.

To tap into how users cognitively sort clothing items, I conducted an open card sort on Optimal Workshop. Users sorted twenty cards in an unsupervised, remote setting. They were told to organize and label items for an online clothing shop. Seven users participated, ranging from 25 to 29 years old. Three were female, and four were male. Four were based in Japan and three in Canada. See the findings below.

Now that I understood how users organized clothing items, I could create an information architecture that enables users a smooth journey while navigating the website. To help me visualize this structure, I built a site map to reflect how pages relate to each other.

Now I had to think about the exact journey that the user would take through that site map- which pages the user would visit and in what order. I thought about what tasks Joline, my persona, would do based on her goals, as well as the pages that she would encounter in that flow and created the following:

Fleshing it out even further, I thought about what decision points would occur within Joline while carrying out the task. These flows were essential to understanding how users may interact with a website, leading to a more optimal user experience.

With my research under my belt, I was ready to start wireframing! I sketched some low-fi wireframes that reflected my research findings and referred to competitors for design patterns and inspiration as well. I then drafted responsive wireframes in Figma for web, mobile and tablet platforms.

Before I could move on to prototyping, I needed to develop the brand identity and concept to guide my User interaction Design (UI) choices. I gathered images and color palettes that were clean, fresh, simple and modern which I referred to in order to create the following logos:

In order to maintain consistency, I created an UI kit. I indicated the different element states for buttons and form fields so that the web developer would have all the details needed to built the styles. While building my UI kit, I thought about the following design principles:

Putting everything together, a responsive prototype was built in Figma. See the initial screens below:

Now, it was time to test the prototype and discover what worked, and what didn’t. Click to view the detailed test outline.

After transcribing my interviews, I created an Affinity Map to help organize my findings and identify key takeaways. Click here to see the detailed insights:

After learning the pain points of users, two main problems became clear:

I then began to organize my findings into a priority chart and began to revise the details that didn’t meet expectations. Here were some of the key changes that I made: