Responsive design for
Personal project 2021
My Role: UX/UI design
Timeline: 5 weeks
Tools used: Figma, Optimal Workshop
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.
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.
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.
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.
- 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
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.
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.
During the card sort, I was able to debunk two of my assumptions
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.
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.
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.
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:
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!
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.