Identify which factors differentiate Mirror and increase loyalty, and weave these into the online shopping experience.
Uncover the motivations and concerns people have about buying clothes online & craft an experience that boosts purchase confidence.
Stitch together the right combination of content, functionality, and tone for the site to create an unparalleled shopping experience.
I began with competitive and market research to better understand current trends and patterns among e-commerce customers.
Next, I set up interviews with participants who shop for clothes (in store, online, or both) to uncover their needs, habits, & preferences, and learn what factors influence their buying decisions.
Understand what factors are most important to people who are shopping for clothes.
Participants aged 35-65, comprised of 70% female and 30% male identifying individuals.
Uncover shoppers’ needs, habits, fears, and motivations that will be integral to address in the design.
Interviews were conducted in person and online via various web call hosting sites.
1. Clothes that fit well and the ability to try on
2. Convenient access to what they need
3. Basic, affordable items
1. Replacing a staple item
2. Finding clothes that make them feel good
3. Sales, incentives, and special offers
1. Clothes that do not fit their body types
2. Clothes that are not in stock or their size
3. Difficult returns
4. Pop-ups for coupons and sign ups
Based on my research findings, I defined the user, business, and technical goals in order to identify ways I might address multiple needs with a few key solutions.
From the interviews, two personas were created to represent the most common shopping patterns expressed, which helped me envision the users and situations I was designing the site for.
Savannah represents our savvy shopper who is up on the latest trends and shops for the joy of it. She follows social media influencers to stay up on the latest trends, and will check out a shop if it has been recommended by someone she trusts. She considers shopping a treat, and frequents her favorite stores because they make her feel good about herself. She also enjoys member perks and will sign up if she likes the styles and can easily find what she needs.
Brian represents our efficient shopper who searches with purpose for the items he wears most. He is likely to visit the site in search of staple items, will browse briefly within an item category, make selections, and then verify shipping speed and cost before completing his purchase. He is interested in both casual and business attire and is inclined to return regularly for new items if the experience is easy and clothing quality is good.
Following creation of the personas, I imagined the likely actions each might take on the site, creating user flows for each path. This allowed me to hone in on the main friction points and helped determine which screens I should test for usability first. Below is the flow for our main user, Savannah.
Using the priorities expressed in my interviews, I sketched up several iterations of a homepage. Ultimately, the design became a combination of the strongest two options, which focused on a proprietary virtual fitting tool, loyalty membership perks, and a strong and uplifting social community.
Next, I used my sketches to create a set of wireframes for desktop, tablet, and mobile that would serve as the framework for placing the user-tailored content throughout the site. With fit being the #1 pain point among those interviewed, I spent extra time creating wireframes that involved the fitting process.
Mirror's customers want to feel confident, elevated, and empowered. I created a style tile to capture this with a vibrant, energetic, and airy aesthetic.
Mirror’s branding includes shades of grey and white with plenty of negative space to provide a bright, clean interface that draws attention to the products.
Coral was chosen as a pop of color because it connotes happiness, confidence, & social interaction, affordability and approachability.
Pops of coral are used throughout to draw the eye to CTAs, member perks, and special promotions.
Based on the strong feedback I received around sizing and fit in my interviews, I decided to first test usability on the virtual fitting tool I developed as part of a collection of fitting options from the brand called Perfect Fit.
To understand whether instructions & actions are clear, & determine if the options appeal to and reflect shoppers’ needs.
Participants aged 35-65, comprised of 80% female and 20% male identifying individuals.
Test for usability to determine where adjustments should be made before proceeding further with the design.
Participants were tested virtually in Figma, voiced their thoughts, and answered questions throughout the test.
Participants were presented with a series of screens including the 6 shown below, and asked to click their way through the virtual fitting process. I observed and took notes based on their feedback and actions, and asked pointed questions to validate understanding on specific action points during the test.
Prototype testing the virtual fitting flow revealed a few key strengths and opportunities in the design.
I categorized feedback from testing into an affinity map to identify patterns and overlap. From there, I organized the main points using a priority matrix that helped me choose the most impactful changes for the next iteration on my design.
.jpg)
The color pallet, language, and layout were well received and appealed to a broad demographic. However, being a new concept, the Perfect Fit tools needed more upfront, clear information and instructions.
Following the priority changes from my affinity diagram, I set out to make improvements to the UI below that made expectations and responses clearer by using visual cues and simplified language.
Despite the positive response to the homepage overall, several participants completely overlooked the Perfect Fit card at the top of the page.
To address this, the card was redesigned to include more vibrant colors, a change in copy, and imagery that shows what users can expect when they click on it.
The card has also been moved to the primary top left position, trading places with the Trends/Seasonal card.
Throughout testing, participants struggled to understand what actions should be taken during the virtual fitting process.
To address this, copy throughout the flow has been simplified using easy to understand terms and instructions.
Content has been given more space and visual cues to show whether it is clickable or informational.
Instructions and subheadings were often overlooked, leaving participants wondering how to proceed.
To address this, the subheadings have been reduced to a single line and changed from grey to coral.
Additional icons and buttons have been removed to ensure the intended action is clear at each step.
Though a treat for some and a chore for others, clothes shopping presents many of the the same challenges for most of us--and we all struggle to consistently find the right clothes for our body types. I was fascinated to hear all of the stories, struggles, and joys my research participants go through each time they shop. I did not expect to uncover so many different schools of thought, and yet also find so many things in common. The key here was to remove as many barriers as possible, providing each shopper the ability to browse, select, try on, and purchase however s/he typically likes to do. And although needs vary from person to person, in the end we all want to look and feel great about ourselves, and present ourselves in the best possible way every day. I hope you were able to see how these needs were prioritized and addressed throughout the design.
Thank you for following along on the journey!
I am currently pursuing new opportunities and would love to meet you! Drop a line to find out what we can accomplish together.
