Mirror

August 2021 (Student Project)

E-commerce website for a new clothing brand.

Role: UX Design

  • Business Problem

    Mirror is a fictitious clothing brand that launched in August 2021. They understood that having an e-commerce presence is essential and wanted to implement a user-centric design for their website. Mirror needs their website to introduce and then retain customers to their brand and to facilitate the sales of their clothing.

  • Discovered User Problem

    Through user research, I discovered that when users shopped for clothing online, they disliked being unable to be certain that the fabric quality will be satisfactory. Users preferred to be able to feel the fabric themselves before making a purchase. Users also disliked having to click through menus to find the clothing they want. They preferred to be able to immediately search for the piece of clothing they wanted.

  • Proposed Solution

    Responding to my user research, the solution I proposed was an e-commerce website with a search bar prominently featured in the hero section of its homepage. Additionally, product pages had close-up, detail photographs of a clothing's fabric included in the product photos and an explanation of the clothing's material composition at the beginning of product descriptions.

  • Hypothesis

    My research led me to hypothesize that the majority of users would navigate to a specific product page using the search bar, not the top navigation menu.

Talking to Users

After completing market and competitor analyses, I chose three people to conduct user interviews with. Two of them were subject matter experts: one is employed by a direct competitor to Mirror and the other works elsewhere in the retail clothing industry.

The three people I interviewed shared many opinions. I was surprised by the importance of the search bar to their shopping experience. It was interesting to see that all three of them had the same problem of not being able to tell fabric quality while shopping online. This provided me with actionable insights into designing Mirror’s website:

Add a large search bar to the homepage's hero section.

“I liked being able to immediately search for the piece of clothing I had in mind.”

Add close-up, detail photographs of a clothing's fabric to the product photos.

“What I disliked was that I could not feel the clothing in hand and therefore could not check the quality in person.”

Begin product descriptions with an explanation of the clothing's material composition.

"For the average buyer having not only the fabric composition, but what that composition means could be helpful."

The Whole Story

After my research was complete, I wanted to summarize the existing user journey so I could improve upon it. I used the interviews I had just conducted to write a user narrative depicting the existing journey of purchasing clothing:

Sara realizes her pants are worn out and she needs to replace them. She opens up Everlane’s website on her laptop and types “pants” into the search bar. She looks at the results and filters them by size to see what’s available in her size. Once she finds a pair she likes, she views the product page, looking for information on the clothing’s material and quality. She finds it difficult to reliably determine the quality of the fabric when purchasing clothing online and likes to see thorough information on the material composition.

The user narrative allowed me to reflect on the existing user journey of purchasing clothing. Writing the narrative created the foundation for making the user flow.

 

Designing the User’s Experience

Working on the user flow for the website was very exciting, I really felt like I was designing the user’s experience on a granular level. Guided by the actionable insights from my research and my existing user narrative, I followed a path that starts when the user searches for a product directly from the homepage. I thought out which actions and decisions users could take on each screen and what would happen based on how the user reacted.

Diagram mapping the user's journey through the purchasing process.

I planned out the entire journey of the user from the homepage all the way to the order confirmation page. This journey told me what screens I needed to design. It also told me what affordances would be available on each screen.

Feature Roadmap

With my user flow and user interviews in hand, I started to list granular features that would solve user’s pain points. For each feature I thought of, I noted the user research that suggested that feature and included the quote that inspired it. I additionally looked at the websites of Mirror’s direct competitors and added features to the list based on that competitive analysis and noted what brands I was drawing inspiration from.

Spreadsheet detailing features to be added to Mirror's website and listing the research behind them.

After making an initial list of features and assigning them to screens, I prioritized them based on how important they were to the functions of the website. Throughout the design process I continued to refer back to and update my feature roadmap. I found that it was an extremely helpful document to organize the design of Mirror’s website, it told me what features had to be on each page and why they had to be there.

Putting Pen to Paper

Now that I had done my research and knew the top-priority features for Mirror’s website, I was ready to begin sketching ideas. I started by making a bunch of sketches for the hero section specifically, and then for the homepage in total, based on my top-priority features. I made a few of the sketches while looking at the websites of direct competitors and combined design choices I liked from each of them. I went through and made rough sketches of many of the major pages I had planned in my user flow and feature roadmap: the search results page, the category page, the product page, and the cart page.

[Figure 4: Low-Fidelity Sketches]

Sketches broadly defining the look of various pages of Mirror's website.

Having the feature roadmap handy told me what features to sketch out on each page. At this point the design of my pages was largely determined, but needed to be refined.

High-Fidelity Prototype

After designing the branding for Mirror, I took my sketches and turned them into mid-fidelity mock-ups and then into a high-fidelity prototype. I designed all nine pages from my user flow using Sketch and turned them into an interactive prototype using Invision. I wanted to validate the design decisions I made based on my research so I set up a usability test with two objectives: first, to test whether or not the site was usable, and second, to test my hypothesis that search is the predominant method of finding a specific product, rather than navigating through categories.

Usability Testing

I built a prototype from the high-fidelity wireframes I designed for Mirror’s responsive website. I then conducted three usability tests using my prototype. All three participants aligned with the persona I developed from user interviews. All of the tests were moderated by me. Two of the tests I conducted were remote, and one was in-person. 

I began my testing with two objectives: firstly, to test the usability of the website design and secondly, to test my hypotheses that search is the predominant method of finding a specific product. To reach those objectives I gave each user the following scenario:

Your t-shirts are worn out and you want to buy a new men’s t-shirt. 

You go to Mirror’s website -

I also established that I would measure the success and usability of the prototype by whether or not 50% or more of participants were able to a) navigate to the product page and b) complete the checkout process.

My findings show that my usability test met both objectives. The prototype is successful: 100% of participants were able to both navigate to the product page and complete the checkout process. Additionally, 33% of participants used search to find the product page. My hypotheses that search is the predominant method was proved wrong, but there are two caveats. First, 33% of users is still a substantial portion. Second, the participants in the usability test knew that they were using a prototype, so results on a live website might be different.

My measurement of success for the prototype was exceeded. 100% of participants were able to both navigate to the product page and complete the checkout process. Moreover, all of the participants easily navigated through each screen and none of the participants reached a point of confusion due to the design of the prototype. This result demonstrates that the prototype is not only usable but easy to use.