Mirror
Responsive design for a fashion brand
Project Overview
Project Brief
Build a responsive website for Mirror, an existing clothing with worldwide stores but no online presence.
My Role
UX researcher, UX and UI designer, branding designer
Duration
May - July 2022
Problem: Shopping online can be overwhelming and frustrating.
The user’s problem: when buying clothes online, there are lots of options and it’s difficult to find what you want and figure out if it will fit properly.
The business’s problem: not having an online store means Mirror is missing out on sales, especially amongst its target audience. Customers who can’t find what they’re looking for in stores have no other options.
Solution: Help users feel confident making decisions about what to buy.
Provide users with the right information at the right time. This includes:
Helping users get to the most relevant products as quickly and easily as possible so they aren’t overwhelmed with options
Give them enough information so they can confidently make a decision about whether or not to buy an item
Understanding the User
Research methods
Competitor Analysis: I analyzed the design and branding of major competitors to identify existing patterns and areas where Mirror can distinguish itself
User Interviews: I interviewed 5 potential users, focusing on why their online shopping habits and challenges
Contextual Inquiry: I observed research participants shopping on their favorite sites to identify unique behaviors they didn’t describe during the interviews
Two distinct user groups
I grouped all the research data points into similar topic areas to identify the key things that users care about and struggle with when shopping online. After identifying the topic areas, I plotted each research participant on a spectrum to identify patterns in the research.
I found that there were two distinct user groups: information seekers and convenience shoppers.
Information Seekers
Want to see as many options as possible before making a decision
Need lots of information before buying something
Convenience Shoppers
Prioritize finding things quickly over seeing lots of options
View shopping as necessary but unenjoyable
Regardless of whether they were information seekers or convenience shoppers, every participant found sizing the most frustrating part of shopping online.
However, information seekers want a level of detail that convenience shoppers find unnecessary, or even frustrating. Figuring out a solution to this problem would be key to the success of the design.
Developing the primary persona
I chose the information seeker as my primary persona, as they shop online much more frequently and are likely to spend more time on Mirror’s site.
Key characteristics of the information seeker
Wants to look at and compare many options
Needs lots of information before buying something
Utilizes most or all of the features available (photos, sizing charts, product description, reviews)
Predominantly shops online, even though figuring out sizing can be difficult
Information architecture
Several interviewees mentioned how frustrating it is to not understand the categories a company uses to organize their products. It makes finding what you’re looking for time consuming and difficult.
“I don’t like shopping by the categories they’ve created. I have no idea what this means.”
I used an open card sort with 50 items to create a sitemap that groups products together in a way that users can navigate intuitively.
Exploration & Ideation
Where are the user’s pain points?
Creating a task flow for buying a pair of jeans helped me identify the two scenarios where a user is most likely to get frustrated and leave the site:
When they can’t find what they’re looking for quickly or easily enough
When they don’t have the right information to make a decision about whether or not to make a purchase
What information can prevent shoppers from becoming frustrated?
I identified several features that could help with the scenarios where a user is most likely to get frustrated and leave the site:
Photos
Model measurements
Models of different body sizes
Sizing chart
Ratings & reviews
Robust filters and sorting options
Search feature
Virtual fit simulators*
*While potentially useful, this was outside the scope and resources of this project.
A key challenge would be figuring out how to provide information seekers with the amount of information they need to feel secure in a decision without overwhelming them or frustrating convenience shoppers.
Designing the Interface
Users need the right information at the right time
Through the sitemap and task flows, my users’ needs were becoming more clear and I began sketching wireframes. My goals with the wireframes were:
Make it easy for shoppers to find relevant items
Provide the user with detailed information about individual items of clothing
Make sure interactions feel familiar and similar enough to other online shopping experiences to enhance learnability and memorability
Help users get to relevant products more quickly
To help users navigate a large number of products and get to the ones that are the most relevant to them quickly, I focused on the navigation and sort and filter options.
Main navigation
Sort & filter options
Playfulness, Inclusivity, & Self-Expression
As part of the brief, Mirror wanted a visual rebrand and new logo design. The only requirement was that the name stays the same.
I based color, typography, and photo choices on the brand’s 3 core values.
Key Screens
Category page
Problem: each category has too many items to browse through
Solution: filters and sorting options
Flexibility: can apply any more or fewer when needed
User agency: can change filters to fit specific tasks
Familiarity: allows for more specific organization without having to remember unique collections
Based on my research, I identified product type, size, color, and material as the most important filters.
Product page
Problem: information seekers and convenience shoppers need very different amounts of information
Solution: create clear information hierarchy and use an accordion for more “optional” information
All users need:
Photos
Price
Short rating summary
Size and color select
‘Add to bag’ button
Sizing chart or model information
This information is always visible, rather than being hidden in the accordion.
Only information seekers need:
Product description
Materials and care
Photos of multiple models
This information is inside the accordion so that it can be accessed when needed, but reduces the likelihood of users becoming overwhelmed.
Testing & Iteration
Usability testing with high-fidelity prototypes
Using prototypes I built in Figma, I tested how easily shoppers could find what they were looking for, add products to their saved items list, add items to their cart, and complete the checkout process.
Based on these results, I prioritized the following revisions:
Adding save icon and rating summary to product cards on category page
Adding a review summary section on the product page
Adding filter and sorting options to reviews
Increase visual prominence of the sizing chart
The information sweet spot
Overall, the site was clear and easy to use. Testers know how to get to the items they wanted to see and understood the categories used.
“It’s very easy to use - I know what to click on if I’m interested in a particular item of clothing.”
As I expected, testers who fit the convenience shopper profile did not use most of the information on the product page. Information seekers appreciated that the information was there when they wanted it, but not all at once.
“I like that the product details are all smushed together in an accordion so you can pop them out. That feels less overwhelming.”
“Everything that I care about is right here.”
However, they wanted more information on the category page to help them decide if they wanted to view a product in more detail. Several testers also expected to be able to save an item from the category page.
“There’s nothing here that tells me what the rating of the product is before I click into it. And that can be really helpful.”
Final Product
The final site for Mirror provides an experience that caters to both information seekers and convenience shoppers.
By highlighting information like the sizing chart and model measurements, I aimed to provide shoppers with information that would help them figure out if an item would fit.
Being able to see what a piece would look like on multiple models sets Mirror apart from its competitors. Not only are these photos practical, but they also uphold the brand value of inclusivity. One of my testers said:
“Models tend to be in a certain size range and I’m not in said range, so I really appreciate when I can see it in a different size. I appreciate it a lot because it’s so rare.”
Thoughts & Reflections
Features I couldn’t include
If I’d had more time to work on this project, I would have loved to flesh out the reviews section on the product page more. Several research participants mentioned how useful it is to see photos from people who have bought the product. I would love to add a feature that allows users to upload photos to their reviews and filter the reviews to only include those with photos.
Designing for different users
One of the key design challenges of this project was designing for two groups of users that needed vastly different amounts of information. Even though information seekers (the primary persona group) wanted lots of information, they could still get overwhelmed. Taking into account the needs of the convenience shopper led to a better experience for all users.