Menu
Users hate purchasing clothes that don’t fit, look good, or resemble what they thought they were purchasing.
Create a responsive e-commerce website that helps a users know whether or not they’ll like the article of clothing before purchasing.
Like the mirror in your closet, Mirror is a clothing brand that helps users mix, match, and find exactly what they’re looking for with minimalistic UI, real-life product imagery, and an outfit simulator feature.
Let’s be real, we’ve all shopped online for clothes… If you’re anything like me, you probably do it a little too often because not only is it super easy and convenient, but your options are pretty much endless without having to get dressed or interact with people.
Mirror, a purely physical, fictitious, clothing store, decided to take a leap of faith and become more digital by having me create a responsive site for them. With the e-commerce industry being so saturated, I needed to make a needle in the haystack stand out.
I analyzed the data that’s already available in the form of quantitative metrics, which helped me better understand the past, present, and future trends of the e-commerce industry.
Since the e-commerce industry is so saturated and well researched, I thought to analyze competitors to give me a better understanding of key features, user flow, and layout.
I conducted five 1-on-1 interviews to observe participants and better understand their wants, frustrations, needs and wishes when it came to my research question.
From my methodologies, I deduced three overarching points that would guide my progress throughout the Mirror case study:
Most e-commerce websites bombard their interfaces with unnecessary clutter. In order to for me to make Mirror really shine from all the others was to create a clean UI that makes it easy for users to shop and find what they’re looking for.
Users would do anything to ensure they did not have to go through the return process. Building an outfit simulator where they can try on different outfits in their “virtual closet” could help reduce the number of returns and aid in outfit planning.
Photos are the main focus on pretty much all e-commerce websites, and users tend to look at them to see whether or not they’ll purchase it. Providing imagery of real people wearing the clothes would give users more options to look from.
Creating the persona
I started by identifying patterns across all of the participants’ responses. This allowed me to create an accurate persona from my research: Katie Kan.
Learning more about the persona
To even further understand Katie Kan, I developed an empathy map where I pulled quotes, trigger words, and common patterns from my research and categorized them into 6 group to even better empathize with my persona.
Developing some high-level goals
I jotted down Mirror’s business and technical goals as well as Katie Kan’s (customer) goals. The areas of overlap revealed the main product goals to focus on when getting into the design stage.
In order to provide a cleaner, more minimalistic user interface, I needed to understand what users valued/deemed unnecessary to them. Through a closed card sorting with 6 participants, I was able to see what features and tools users actually found valuable while shopping for clothes online.
A few card sort findings that influenced my design were:
To help me figure out what to start designing first, I created a task flow of the main user experience. For Mirror, that’s finding and purchasing clothes or the buying process.
Once I decided on the main task for a Mirror user, I designed a user flow that showed the journey a user would take if they were looking to purchase a sweater: what pages they landed on, their decision points, etc.
I began Mirror’s UI design by starting off small with a mid-fidelity responsive homepage. I sketched until there were a few options I really felt resonated with the persona. Then, I made mid-wireframes for desktop, tablet, and mobile.
This is where I saw Mirror’s branding really start to bud. Based off the persona, I grabbed photos of different outfit aesthetics, web pages, colors, and typography to make a mood board that fit with those descriptors. As you can tell, this really inspired the branding of Mirror.
This logo is designed to be a reflection of what a user would see when they look into a mirror while getting ready in their own closet… Aka the two “R”’s back-to-back. It’s also a unique and quirky-looking skull that represents how users present themselves to others versus how they see themselves.
Purple represents confidence and that go-getter spirit, the colors pink and yellow are known to showcase savvy and impulsiveness of online shopping, and green resembles the balance of being organized and impulsive.
Discovered in the research phase, the Mirror outfit simulator allows users to mix and match different clothing options and colors from head to toe to see how pieces will look together to further ensure clothes fit to avoid unnecessary returns.
Users can filter their simulator by masculine or feminine, height, and weight while the sim changes simultaneously along with their choices. Users can browse through the dropdown categories which are exactly the same as the shop categories to make the user experience more seamless and easier to learn. They also have the option to “try on” pieces they put in their cart or favorites.
Since it’s a pretty new feature, I was unsure of its learnability and usability. After usability tests and many layout edits, I was able to create a feature unique to Mirror that adds value to the user experience and research findings.
After ensuring the high-fidelity wireframes of the responsive site were completed, I created an interactive prototype in Figma to show how the user experience might feel and to test whether there are any problem areas. This prototype takes a user through the primary flow outlined in the user and task flow section.
I wanted to put the problem points identified while creating the prototype to the test. Over Zoom, I conducted 5 usability tests with potential users who fit the target market to:
From the video recordings and notes taken during the usability tests, I took note of all the positive and negative comments made by the 5 participants. Once I had all the key points jotted down, I sorted the sticky notes based on similarities and created an affinity map.
Although my case study has come to a close, there’s so much more that I would’ve wanted to do if time was on my side:
While you’re here, feel free to look at some of the other cool projects I’ve been a part of!
