Responsive design for
Mirror
Personal project 2021
My Role: UX/UI design
Timeline: 5 weeks
Tools used: Figma, Optimal Workshop
The Challenge
Mirror, a trusted brand since 1994 with over 400 in-person stores around the world in 32 countries. They have a loyal customer base and are ready to go digital. Customers have been asking for Mirror to offer online shopping, citing its convenience, especially during the global pandemic. They have not shopped in stores for some time now and are not confident they can choose the correct size without trying the product in person.
The Opportunity
A digital transformation for Mirror allows the company to reach more customers around the world. Supplied with filters, product details, a custom size guide, reviews, and an easy checkout, users can feel confident about their online purchase with Mirror.
01 DISCOVER
Exploring The Market
I discovered more than 95% of all purchases are expected to be conducted via e-commerce by 2040. To further understand the market, I chose 5 of Mirror's competitors. Each one offers affordable, trendy clothes both in-stores and online. Noting their similarities and differences helped define what makes Mirror unique and what to avoid design-wise.
User Interviews + Key Findings
I rounded up several frequent online shoppers to gain a better understanding of their online shopping experiences. I started off with a remote interview, asking users open-ended questions to gain unbiased insights.
"I prefer shopping with brands that are transparent about their sourcing. I also always look for ways to save!"
- 31, Chef in Washington D.C
Users need sales, discount, or promotions
Users want to make earth-conscious purchases
Users are frustrated with long checkout processes
Users are motivated by the pandemic to shop online
02 DEFINE
Meet Abby, The Urban Millennial
She prefers online shopping for convenience but finds not being able to try clothes on in person challenging. This persona was created based on the patterns uncovered in the user interviews and empathy mapping.
Organizing The Inventory
I conducted an open card sort to gain insights on how to better organize Mirror's inventory. Participants were given 30 cards such as “black, vegan leather jacket, blue blazer” and tasked with grouping them into categories of their choosing. This helped me to create a sitemap and user and task flow, showing the relationship of the content.
Learning Moment
During the card sort, I was able to debunk two of my assumptions
- Users will create a “formal category”. I would have grouped items such as heels and blazer there; however, no formal category was created.
- Participants will not create different categories for the same thing. Users did create different categories, jackets were put into either “winter” or “outerwear” depending on the participant.
03 DESIGN
Sketching It Out
Using the insights gained so far from research and interviews, I am able to start the wireframing process. Referring back to the brand attributes of “modern, fresh, and clean", I was able to create various color palettes, mood boards, and logos to bring the final wireframes to life.
Homepage Layout
I wanted to create a modern yet warm homepage to invite users. Here users can browse through daily deals, new arrivals, or the social media feed for shopping inspiration. Because users are seeking eco-friendly clothing, it was important to display Mirror's sustainable practices for transparency. Users also have the option to sign up for a newsletter, unlocking new deals.
Making Checkout A Breeze
Users' most common pain point was long checkout pages. For Mirror, users have options that help speed along the process without compromising any important information.
04 TEST
Usability Testing
After the prototype was ready, I gathered 5 participants for remote testing. After scrolling through the homepage, participants were asked to complete the following task:
- Locating a black dress and adding it to their bag
- Completing the checkout process
Users were able to quickly and easily complete all tasks; however, they wanted more detail on their confirmation page, many were unsure if they needed to print their receipt or not. This small change in microcopy affected users!
CONCLUSION
One of the biggest challenges was conducting remote usability testing for the first time. To overcome this I practiced my script beforehand and made sure my computer was ready to go. I asked participants if they were okay with me recording the sessions for research purposes. If the computer was slow, I used that as an opportunity to ask follow-up open-ended questions.
Going into this project, I thought I had a pretty good understanding of e-commerce and online shopping; however, I quickly realized I had a lot of assumptions. I was delighted to learn fast fashion companies are starting to implement sustainable practices and their users are just as interested.