Mirror is a fictional clothing store chain with a goal of making clothing that feels accessible to everyone. Aligning with that goal, they provide affordable clothing that encompasses a wide variety of styles to both kids and adults. While they have found success offline in their brick-and-mortar stores, they are only starting to dip their toes into the opportunities of E-commerce.
Mirror wants their responsive website to support their existing in-store experience while also encouraging online orders. In that pursuit, their E-commerce platform should:
My final deliverables for this case study were high-fidelity mockups in desktop and mobile for the following pages: Homepage, Product Listings Page (PLP), Product Display Page (PDP), Cart, Checkout.
Since these mockups were not developed, I considered usability testing as my main metric of success/performance; when I asked 3 participants to undergo the task of finding and purchasing a red sweater using the desktop prototype, they were all able to complete it without any help from my end.
If this design were actually developed, I would like to see how Mirror's customers change their shopping behavior. For instance, have existing customers ordered more clothes overall with the full-inventory available online? What chunk of their orders is now placed online instead of in-store? How have the stats on clothes returns changed?
I framed my research goals to learn about the following:
After doing a round of competitive analysis to get a better grasp on common E-commerce practices, I conducted five user interviews, which revealed the following user needs:
From those findings, I created a persona to encapsulate the main user group that Mirror’s website would be designed for.
After building a sitemap, I created a task flow and user flow as a launching point for designing wireframes.
These wireframes pages outline what’s involved in the task flow. The tablet and mobile versions are excluded here for brevity; however, the final designs for mobile are presented at the end.
The following section outlines my reasoning for certain design decisions.
Neutral
clean
fresh
clear
modern
I felt that having arrows that point in both directions represented Mirror’s message – having wide-ranging styles that are accessible to everyone. The arrows also appear as a reflection, fitting with the name, Mirror.
I chose teal for the brand color since it’s neutral yet modern and fresh. Maroon was picked as an accent color because it balanced out the teal. My hope was for the colors to feel approachable and inviting without distracting from the clothes.
The sans-serif typefaces, Spartan and Lato, were picked because they felt clean and non-obtrusive.
For my usability testing, I asked three participants to go through the task of finding and purchasing a sweater in the high-fidelity prototype I made in Figma. As they completed the task, I asked them to think out loud so I could evaluate if any parts of the design created a mismatch with user expectations.
The participants successfully filtered through the clothing selections to find a sweater (with specifications of color = red and size = medium) and navigated through the checkout flow to purchase that sweater. I noticed some design changes to be made as they went through the PLP page.
A glaring issue was that some participants did not notice the photo gallery feature in the Reviews section because it was placed at the bottom, and those participants did not read through the reviews that preceded it. I moved the feature higher up on the page so that it is visible before the customer reviews.
A participant struggled to find the “Details and Materials” section, so I decided to move it below the product image (rather than in a collapsed accordion next to the image) to fit better with convention.
Overall, the 3 participants were able to complete the task without any help from my end. After making improvements to address the issues above, I moved onto polishing the final UX/UI designs that are shown below.
homepage
.png)
plp
pdp
cart
checkout
Mirror wanted to provide consumers with the convenience and full-inventory selection that online shopping offers; however, they still wanted to encourage people to shop in-store because that is the channel that they’ve established success in. Throughout the designs, I tried to promote ordering clothes for both shipping and in-store pickup — users can even purchase clothes for both types within the same order.
Since images are helpful tools for representing how clothing looks, I included a photo gallery section on the PDP for customers to submit pictures that show the clothing worn by real people. The rating system also shows how other customers feel about the fit, length, comfort, and quality so that users can better understand what to expect. If I had more time, I would look into incorporating video so users can see what the clothing looks like from all orientations and how the material moves.
I tried to organize Mirror’s inventory into clear tiers and categories within the navigation so that users would know directly where to look for a given item. On a PLP, users can navigate between categories without having to revisit the navigation menu. PLP’s also have a range of filters for further funneling down items for what a user wants.
.png)
