Three versions of the homepage
Overview
Mirror is an online clothing retail store that did not previously have a website. I designed a responsive website based on data from my user research.
Tools
Figma
Optimal Workshop
Whimsical
Team
1 UX/UI Designer: Emily Heiden
My Role
UX design
UX research
Branding
Timeline
4 weeks
Problem
Mirror is a fictional multinational chain clothing retail store whose physical retail locations have been very successful in the last several years. Still, the company recognizes that they are missing out on profits from customers who want to shop online.
Solution
The goal for this project was to create a responsive e-commerce website design for desktop, mobile, and tablet that represents the brand well and provides an accessible, usable, and useful shopping experience for the customers.
Research
Competitive Analysis
I started by conducting competitive analysis research on other online clothing retail stores. My goal was to understand how competitors are approaching their design problems.

Empathize
Next, I conducted a simple card-sorting survey with 10 participants. From this, I created a user persona and an empathy map based on the target audience user. Additionally, I interviewed 4 participants about their online shopping experiences to understand their successes and pain points. With this information, I created a project goals Venn diagram to visualize the common goals of the user, business, and technical considerations before I began designing.
User Persona

Empathy Map

Project Goals

Define
From my interview research, I found that online clothing shoppers want to easily and quickly be able to filter and refine their search when searching for a specific clothing item or product. It is also essential for users to navigate through the website logically to complete whichever task is at hand.
Ideate
After conducting my interviews, I began working on the information architecture by creating a sitemap, a user flow, and a task flow.
These were important for me to have before organizing the layout of the website so that I can understand which pages are needed, and how they are all connected from the users' perspectives using the data from the interviews and card-sorting research.


Design
I started the design process by creating a logo because the brand did not have one previously. I wanted it to be simple, minimal, and modern looking.
Next, I created a style tile with photos that captured the brand's aesthetic, and colors that I was considering including in the design.


Sketches
After the brand design, I started the low-fi design process by quickly sketching many different versions of each page.

Mid-Fidelity Wireframes
Using Figma, I translated my first sketches into mid-fidelity wireframes. I created each page for desktop, mobile, and tablet.

Mobile mid-fi homepage

Desktop mid-fi homepage
High-fidelity Wireframes
Next, I created the high-fidelity wireframes using the mid-fidelity wireframes as a reference and making changes as necessary.

Mobile high-fidelity homepage

Desktop high-fidelity homepage
Test
Usability Testing
After creating and iterating on the high-fidelity wireframes, I created a fully functioning prototype and recruited three participants to test it.
The three research participants tested the prototype during a live usability test over video calls. I asked the participants to share their initial thoughts and comments with me while looking at the website prototype, then I asked them to perform a few tasks so that I could observe their task flows.
I created an affinity map after the interviews using the information I gathered from the participants. I decided to create an affinity map because I like to organize the data in a way to view it all at once and find the similarities and differences between the participants' feedback.

Iterate
User Feedback Changes
The user testing provided me with information on how to improve the design to create a better user experience for customers. I revised the design to include many of the suggestions provided by the research participants including changing the photos to include more models of different races, ethnicities, genders, body types, and ages. I added labels to some of the icons for clarity, and I set the liked hearts to bright pink rather than white as they were before.

Final
Prototype
Future Revisions
If I had additional time to work on this project, I would design more pages for the desktop, mobile, and tablet versions. Additionally, I would like to test the revised design with a larger group of research participants and continue to make improvements to the design based on user feedback.
Learnings
This project was the first responsive website I had ever designed. I learned many things while working on this project. I learned how to conduct usability testing, and became more proficient in Figma. This project was more time-consuming and complex than I realized it would be when I began, but it became one of my favorite projects. I enjoyed working on an e-commerce website, and I would love another opportunity to work on similar projects in the future.
Thank you for reading my case study!
If you would like to connect, please reach out on LinkedIn.