Mirror

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.

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.

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.

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.

High-fidelity Wireframes

Next, I created the high-fidelity wireframes using the mid-fidelity wireframes as a reference and making changes as necessary.

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.

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.

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.