Mirror

UI/UX Design
Challenge
Mirror is a successful offline clothing store that  has over 400 stores around the world in 32 countries, and their goal is to make clothes accessible to everyone. They initially preferred to keep service in person, but with the huge sales opportunity online, they decided to take their business online.
Solution
They needed a responsive e-commerce website that is easy to use and that allows customers to browse through all products and filter by size, color, style and others. They also need a branding that is modern and neutral enough to attract all types of people and styles.
Tools
Figma, Adobe Illustrator, Adobe Photoshop, Invision
Team
Self Directed, with guidance from mentor
Role
UI/UX Designer
Duration
80 hours
DISCOVERY
Research Goals
  • Determine the current trend of existing players in the online retail market
  • Determine people’s motivation for shopping in online shops
  • Determine people’s motivation for shopping in-store
  • Define the pain points of people when buying online
DISCOVERY
Market Research
I started off the project with research to understand the clothing/online fashion industry by gathering data on the market. I summarized important points from gathered collection of data and statistics related to the research goals/topic for more insights:
  • Demographics - Most of the consumers are Gen Z and Millenials (Ages 16 to 39).
  • Gen Z alone will account for 40 percent of global consumers by 2020.
  • Younger consumers (Millenials and Gen Z) are concerned with social and environmental causes, favouring brands that are aligned with their values and avoiding those that don’t.
  • Millenials are more likely to find inspiration from external sources (e.g., influencers, friends, TV).
  • The time lag between discovery and purchase is a pain-point for millennials who continue to expect better experiences.
  • Mobile accounts for 65.4% of traffic to online fashion retailers and 57.1% of sales.
  • The most important motivations for buying clothes online are around choice and price.
  • People abandon clothing purchases online mostly because of bad website functionality, slow delivery,  concerns about quality, and pricing.
DISCOVERY
Interviews
In order to gain qualitative data about users’ goals, needs, frustrations and motivations, I conducted user interviews on users that fit the demographics from market research. I completed interviews from 5 different interview participants. Two are female, and three are male, and fall between ages 24 to 36. All interviewees are working professionals in different fields in Japan. Although most of the physical stores, that the participants mentioned, are in Japan, some participants shop from online stores that are based from different countries.
RESEARCH SYNTHESIS
Empathy Map
After conducting the interviews, I took the transcripts of the interview and transferred it to post-its, and organized into thinking/feeling, doing/saying, hearing, seeing, pain, and gain categories that form my empathy map.
I also looked for patterns and similar topics across the empathy map which formed 4 main insights from where I generated the users' needs.
Pattern 1: Informed Decisions

Insight: People make better decisions when they have enough accurate information.

Need: People need to be confident about their purchase decision.

Pattern 2: Pricing

Insight: People are motivated to buy clothes for a reasonable price.

Need: People need information about how they could spend their money in the best way possible.

Pattern 3: Sizing

Insight: One of the greatest concerns of people when buying online is making mistakes with sizing.

Need: People need accurate information about sizing.

Pattern 4: Value of Time
"I look through a lot of playlists - sometimes searching for a mood or a genre, then play through the playlists and pick tracks that I like."

Insight: One of the people’s biggest frustration is when they feel like their time is being wasted.

Need: People need to feel that their time is valued.

STRATEGY
Project Goals
Combining business goals from the design brief and user goals from the research, I created a diagram that represents the project goals necessary to identify necessary features to include on the website.
TESTING
Usability Testing
In order to test the overall quality and ease of navigation throughout the whole design, and to observe areas of errors/difficulties, I went out and had 5 total strangers interact with my prototype. I used Think-aloud Methodology and In-person Moderated Usability Testing. Criteria for participants were based on the demographics from research phase (ages 16 - 39) and people who have shopped clothing online within the last 3 months.
The users were given the following scenarios and tasks to complete:

Scenario 1: You want to look for a pink women’s coat that you want to buy as a gift for a friend.

  • Task: Browse for a pink women’s coat

Scenario 2: After successfully looking for the coat, you decide to choose a Medium size and add it to your cart and purchase it.

  • Task: Choose Medium size, add to cart, and purchase.
Summary of findings from 5 participants (3 male, 2 female):
  • Completion Rate: 100%
  • Error-free Rate: 90%
  • Most common comments were about the number of choices when browsing for results.
  • Some of the errors also occurred by trying the search or filter features which were not included in the prototype.
  • Most people mentioned that the site was easy to navigate and didn’t struggle to complete the tasks.
TESTING
Affinity Map
After collecting my notes and audio/screen recordings from my testing, I transferred it to post-its, and then grouped together common statements to come up with insights on specific elements of the site.
I then grouped together common statements to come up with insights with regards to the participants experience with the prototype.
Pattern 1: Number of Results

During the test, all of people expected more number of products in the product results.

Insight: People want to have more product results.

Solution: Increase the number of results.

Pattern 2: Related Items
"I think being able to see more products, and capturing the attention of the users are more important than 'User Reviews'."

Insight: People think that the "Related Items" section is important.

Solution: Raise the "Related Items" section in the page hierarchy.

Pattern 3: Ability to Filter

All participants expected the prototype to be able to filter results when they were searching for something specific.

Insight: People want to be able to filter results.

Solution: Enable filtering feature.

DESIGN ITERATION
Priority Revisions
After gaining insight and prioritizing recommendations, I tweaked high-fidelity mockups and prototypes.
Takeaways
This project was my first UX design project, and it has helped me put into practice all the basics and foundation of UX design that I have learned. At the end of the project I was able to present and communicate my design decisions well. I also get to appreciate the value of each phase in building a strong end product, and how prototyping and testing could always discover points of improvement.
Next Steps
1. Design Implementation and Handoff to the Development team using Zeplin.
2. Getting the app live
3. Maintenance - continue to iterate and test designs.

Check out my other projects

Bhuku
UI/UX Design
ARK
UI/UX Design
Spotify
UI/UX Design