Mirror: A Responsive eCommerce Site
Every UX designer has a first project; this is mine.
Project Overview
Problem
Mirror is a hypothetical clothing company focused on providing a variety of styles at affordable prices for people of all shapes and sizes. They have over 400 stores across the globe and up till 2020, they had not yet decided to begin online sales. After steep losses due to store closures during the pandemic, they decided it was time to launch an online store as well as refreshing their branding with a new logo.
Objectives
Design a responsive ecommerce website for Mirror rooted in user research
Create a new logo for Mirror in line with their brand values
Scope
Responsive eCommerce Site
Branding
Role
UX/UI Designer
UX Researcher
Tools
Figma
Adobe Illustrator
Duration
80 Hours
Design Process
Design
Sketches
Lo-Fi Wireframes
Responsive Wireframes
Low-Fi Prototype
Mood Board
Logo Design
Style Tile
Hi-Fi Screens
Empathize
Topic Research
Mirror was in an advantageous position to launch an online store as online clothing sales had spiked significantly in 2021. Additionally, due to supply chain issues, consumer demand was high allowing clothing businesses to reduce the typical amount of promotional sales and increase their revenue.
Competitor Research
Brand awareness and recognition are important for long term success as shown by Old Navy, H&M, and Uniqlo.
Building customer loyalty will be important for Mirror because there is so much competition for low cost clothing like Old Navy and H&M, who have reported losing customers due to lack of loyalty.
Proto Personas
I created proto-personas to put a name to different varieties of people who shop online sourced from my own thoughts and assumptions. While my interview participants did not end up aligning with any of these personas, there were some interesting overlaps.
User Interviews
I gathered five interview participants all in their 30’s but with a variety of different jobs and lifestyles. I scheduled an hour-long Zoom session with each of them and asked them a series of questions about shopping for clothing.
During the interviews, I tried to focused my questions around the thoughts and feelings people have when shopping for clothing. I asked the participants about their shopping habits, likes, dislikes but made sure to always try to find the emotional drive behind their answers, following up with “And how does that make you feel?” quite often. I felt that this was the best way to get in their head so I could attempt to see and solve problems from their perspective.
Interview Findings
I found that there was a significant overlap in the values of the user participants. All participants spoke at length about finding and buying quality clothes that will fit. While they also noted that shopping online is convenient, it seemed that for all of them, the biggest drawback was not being sure if something would fit and not being able to try the product on.
Key Findings
-
Focus on Product Page
5/5 participants reported spending most of their time shopping on the product page of an item looking for information about the fit and trying to deduce whether or not they believed the item would fit. A lot of what I heard from the participants were descriptions of different methods they might use to try to deduce what item and size might fit best.
-
Reliance on Customer Reviews
5/5 participants were very dependent on information in customer reviews, saying they would not buy an item without looking at the reviews. They all mentioned that it was most helpful when reviewers would leave a lot of information like height, weight, chest, waist, and hip measurements as well as what size product they tried, how it fit, and an image of them wearing the product.
-
Want to Ensure Fit Before Committing to Purchase
4/5 said they don’t like buying clothing without trying it on first and that they are much more likely to buy an item if it has free shipping and returns because then they can try it on at home before fully committing to the purchase.
-
More Likely to Find Size Online
4/5 said they have trouble finding specific sizes in stores and that they believe they have a better chance of finding the size that will fit them online.
-
Willing to Go to a Store if They Know Their Size is There
4/5 participants said they appreciate when a site will tell them if an item is available at a particular store, because if it’s close by, they might go to the store to try it on or just to pick it up quickly.
-
Cart as Storage for Items
3/5 participants talked about using their cart as a place to store things they see that they like while they shop, then review and decide if they want to buy those things later in their shopping session or sometimes even days later.
Define
Meet Jamie
After going through an empathy map exercise to examine the thoughts, feelings, pains, and gains of the interview participants, I synthesized my findings into Jamie. Jamie is a user persona based on data from the interviews, primarily from the 2/5 users who specified that they do not enjoy shopping and have little patience for it.
I felt that this persona would be particularly effective in helping to design a product that was easy to use for all users, regardless of how much experience or interest they have with online shopping.
If time allowed, I would have liked to also create a second user persona based on the participants who expressed more interest in shopping, as using these two personas as guides would be very useful in striking a balance between more advanced optional features and streamlined essential features.
Comparing Goals
Now that I gathered information on the users and could begin defining what goals they may have, I decided to create a Venn diagram including user goals, business goals, and what I imagine would be technical goals as well. This exercise gave me a space to explore how these goals might overlap or conflict.
Additionally, defining these goals at this stage will help me get a jump start when I begin working on the feature roadmap as it will help me discover and create feature ideas and start thinking about how they should be prioritized based on how much overlap each goal has between groups.
My main takeaways from this exercise were that there are 3 goals that overlapped with all groups and are therefore essential to address in my design.
User should be able to get through the buying process quickly
Essential part of this is the user’s ability to quickly find clothes that will fit
User should have access to easy and effective filters
User should have access to a responsive website to allow them to access a thoughtfully designed site from any screen
Building Problem Statements
Need
Spend 15 minutes or less shopping.
Why?
He doesn’t enjoy shopping and would rather be doing other things.
Jamie, a cybersecurity professor who likes having quality clothing but dislikes shopping, wants to spend 15 minutes or less shopping online because he doesn’t like the shopping process and would rather be doing other things.
Need
Good quality clothing that will last a long time.
Why?
He won’t need to shop for new clothes as often if the items he buys last.
Jamie, a cybersecurity professor who likes having quality clothing but dislikes shopping, is willing to spend more money on clothing in order to get better quality because he wants clothing that will last longer so that he doesn’t have to shop more often.
Need
Learn size and fit information about a product before buying.
Why?
To be more confident that his purchase will fit and will not require more work like a return.
Jamie, a cybersecurity professor who likes having quality clothing but dislikes shopping, needs to read product reviews in order to gain enough size and fit information to be confident that his purchase will be more likely to fit.
Need
Free shipping and return options
Why?
He can spend less time actively shopping if he knows there is no financial cost to buying and returning an item or multiple items.
Jamie, a cybersecurity professor who likes having quality clothing but dislikes shopping, wants free shipping and returns because he wants to be able to buy items, try them on at home, and return what doesn't fit because this allows him to spend less time actively shopping.
Problem Statements to HMW
Based on the problem statements, I created ‘How Might We’ questions to use as a brainstorming prompt for possible solutions. This exercise was effective in helping me practice looking at a user issue and translating it into a question that captured the essence of the problem that needed to be solved.
These questions, if phrased correctly, could then be used in the ideate phase to spark ideas for features or design elements that might be able to help the user reach one of their goals. For this exercise I only offered one possible solution for each question in the interest of time but would have liked to host a group brainstorming session to come up with more solutions that might inspire ideas during the ideate phase.
Ideate
Feature Roadmap
Prioritizing features is a huge task that design teams are constantly working on and debating over. It was very challenging to try to think through the lens of the minimal viable product while also considering what features I felt were important or essential to Jamie’s persona.
Card Sorting Study
Conducting an open card sort instead of closed gave participants the freedom to challenge the categories that I imagined.
After running this study, I can see the extreme value in both open and closed card sort studies. It’s always important and insightful to get a user's opinion on how things should be arranged or how they expect them to be organized, especially when you as a designer are at risk of biasing your design towards your own preferences or ideas.
User Flow
But beyond just a to-do list, I found value in thinking about the lengths of each path and how to design pages and elements in such a way that could lead a user down a path most beneficial to them reaching their goal, or at least minimize their frustrations along the way even when they do choose a longer path.
Sitemap
While working on this task, I realized another great use of card sorting would be with pages themselves. I found myself asking things like, “Where does a person expect to find the Returns page? Through their Account Page? Or through the Customer Service Page? Or both?” Because I used the card sorting for items and not pages, I hadn’t realized how helpful this could be, especially when working on sites with a wider variety of pages that may not seem to relate directly yet people expect them to be found near each other.
Product Requirements
The user arrives at the Mirror homepage and needs to swiftly find items to buy and be prepared to begin the checkout process. I had more questions about the task flow between the landing page and the beginning of the checkout process, so I chose to exclude the full checkout flow from the scope.
This document pushed me to define which elements would be necessary for each page I would be sketching, prototyping, and then testing in the next phases.
Design
Sketches
I gave myself 5 minutes per sketch and practiced rapid ideation for the Mirror landing page. It’s challenging for me to try not to think too carefully about what I will design, so this exercise was a crucial step to push my thinking into the ideate space: have an idea, document it, move on to the next idea, think about it later.
Lo-Fi Wireframes
I selected the 4 most essential pages to the user flow and referencing the UI requirements, I sketched 3 basic wireframes for each page.
After reviewing the sets of low-fidelity wireframes and prioritizing certain elements and features, I moved to mid-fidelity, creating one wireframe per page, ensuring each design decision was rooted in a user or business goal.
Responsive Wireframes
As an additional challenge, I chose to take the landing page wireframe and translate the design into a mobile and tablet layout. While desktop shopping would be Jamie’s preference, it is essential for every business to have a responsive website.
Low-Fi Prototype
As shopping on desktop would be Jamie’s preference, I began creating the mid-fidelity prototype that would typically be used for usability testing. This exercise enlightened me to how a simple feature or functionality could easily take multiple copies of pages to make the functionality appear to be a real, well-designed website. Essentially I came away from this basic prototype with a much deeper understanding of how complex prototyping can and almost definitely will be for any project.
Mood Board
From my interviews, I knew that at least that group of users did not like when clothing sites were so visually busy and that it made the sites harder to navigate. I decided that keeping a relatively neutral color palette and ensuring there would be ample white space to make sure pages didn’t feel especially crowded would be an essential part of my design solutions.
Logo Design
My final design came from thinking about personalization. One of Mirror’s values is to provide a variety of styles at an affordable price so that people can change styles as they please. I began thinking of this like a person’s style isn’t defined by Mirror’s clothing, but by how they chose to personalize their look using Mirror’s clothing.
Style Tile
That this is a crucial step towards building a design that feels coherent and consistent and also helps streamline the design workflow because you are only allowing yourself a certain set of elements to work with.
Hi-Fi Responsive Screens
Although it is typically a good idea to test in lower fidelity before creating high-fidelity prototypes, for this project I decided to go high-fidelity first because it was important for me to gauge the users’ reaction to the fully colored, fully detailed pages.
I had also considered doing some of my usability tests with the mobile screens and I wanted to make sure the UI elements I was designing could easily translate to mobile, so I took my 4 mid-fidelity desktops screens and built them out to high-fidelity desktop and mobile.
Test
Hi-Fi Prototype
Because I was interested in whether or not users would choose to use the FitFinder function to help complete their tasks during testing, I wanted to make sure this functionality was optional but also effective. The result of this was essentially creating one prototype assuming the user does not use the FitFinder function, then copying that entire prototype and creating a variation of the flow where the user does use the FitFinder, then carefully creating one way paths from the default version to the “active FitFinder” version.
Looking back now there may have been an easier way to test much shorter flows or do A/B testing to gauge user interest in using the FitFinder feature and separately how effective they found using the feature in simplifying their task.
Test Goals
Gauge discoverability and interest in FitFinder feature
Determine user interest in and reactions to Liked List as part of the cart page
Test ease of use of navigation systems, expose unnecessary redundancies
Explore how and if users will interact with product filters
Testing Tasks
Locate a grey t-shirt under $20 that you think will fit you, add to shopping bag
Locate a yellow t-shirt shirt, save it for later (didn’t say liked list)
Find shirt the yellow t-shirt you saved, add it to shopping bag
Follow-Up Question Topics
Questions may just be recaps of interactions I observed and offering the user additional time to reflect on that interaction while also being able to reference the page I ask them to navigate to. Ex: “I noticed you used the top menu for navigation, did that work how you expected? Did anything stand out to you? Did you feel it was straight forward to use?”
Screens to discuss:
Navigation
Filters
FitFinder
Liked List/Cart
Questions to gain insight into participants’ relationship with clothing shopping:
Do you shop more online or in person or about equal
Is shopping an activity that you enjoy spending time doing?
When you shop online, are you usually looking for something specific or just browsing?
Will, Male, 34
VP of Product in Fintech
Shops for clothing online more than in a store
Mostly enjoys spending time shopping
Usually looking for something specific
Neal, Male, 70
Retired, Computer Consultant
Shops for clothing online more than in store
Does not enjoy spending time shopping for clothes
Usually looking for something specific
Lee, Male, 35
Computational Mathematician for Plasma Physics Applications
Shops for clothing online more than in a store
Does not enjoy spending time shopping for clothes
Usually looking for something specific
Barbara, Female, 71
Retired, Elementary School Teacher
Shops for clothing online more than in a store
Does not enjoy spending time shopping for clothes
Usually looking for something specific
Drew, Male, 31
Brewery Administration Assistant
Shops for clothing online more than in a store
Does enjoy spending time shopping for clothes (hesitant yes)
Usually looking for something specific
Affinity Map
After conducting the 5 usability tests, I recorded notes on digital post-its and sorted them into an affinity map to discover trends and common themes. Staring down a screen containing that much information is always a little intimidating but it’s incredible how much you can discover if you just keep grouping.
Main Actionable Takeaways
FitFinder should return the user to the same page they accessed the feature
LikedList within cart is currently not discoverable enough
Add clarifying element near the account and cart icons, perhaps replace FF icon with heart to link to LL instead
Liked confirmation pop-up should require user interaction to increase chances user will read that the LL is on the cart page
Filled FitFinder ruler icon should be removed and replaced with a different indication that the FF is active
Iterate
Priority Revisions
In order to clarify the icon set in the top right of the screen and to give users more direction on where to find items they “Liked”, I added labels for the Sign In/Account Icon, the FitFinder icon, and the Shopping Bag/LikedList icon. I left the small yellow hear on the shopping bag icon and placed yellow text beneath “Shopping Bag” in order to catch the user’s attention with the different color while also hinting to them how this functionality may be slightly different from what they have used before.
Similarly, on the Men’s page, I reduced the size of the top image and moved the label to the middle of the image. This will help users understand which page they are on and again, the user can see parts of the content just below the screen line which I believe would encourage them to scroll down. This is particularly relevant because in the usability tests, two users ended up on this page and wanted to go to the t-shirt section instead which is one of the links just below the screen horizon.
In the first iteration of the site design, if a user went throught the FitFinder flow in order to get their size recommendation, if they selected the “Continue to shop” button, they would be navigated to the department page they had expressed interest in shopping in (in this case Men’s.) I thought this seemed helpful but the users were both confused as they didn’t make a concious choice to navigate to that page. I decided it would be better to alway have the FitFinder return the user to the page they started on. So now if a user clicks out of the overlay or clicks “Continue to shop” they will be returned to the page they were on when they started the FitFinder flow.
Revised Prototype
I would also liked to have worked a little more on the messaging of the FitFinder in order to allow it to appeal to a wider audience: not just people who aren’t sure of their size, but also people who appreciate a streamlined shopping experience and seeing mostly items that are currently available in their size. I think there is absolutely a big market for this feature but I wasn’t sure the best way to convey that message without over shadowing the specific fit assistant message and without making the FitFinder content overly wordy.
No design is ever finished, and this design in particular had a short timeline with limited funding for additional research and tests, but I believe the design solution I have proposed will be a great jumping off point for continuing to develop Mirror’s strong brand presence and beginning to establish itself as a leading online retailer. If it works for Jamie, it should work for most.