Mirror

I designed a responsive e-commerce site for an international department store.

Background

Mirror is aiming to capitalize on the booming digital marketplace, as well as provide a sales outlet for surplus warehouse inventory. Their main ideal is to make “any type of clothing accessible to anyone.”

Challenge

Design a responsive e-commerce site for Mirror, an international department store specializing in clothing retail. 

My Role

I served as lead designer, and was responsible for all phases of the design process from research to implementation. 

I wanted to know more about online shoppers, their user journeys, habits, motivations, pain points, and anything else impacting their online shopping experience. To this end, I employed three distinct research methodologies: 

First, I conducted secondary research to explore current market trends related to department store shoppers. The findings were incredibly illuminating, especially as they related to the online habits of Millennial and Gen X consumers:

It's clear from these numbers that Millennial and Gen X engagement would be crucial to achieving success with Mirror's site. The site’s design, therefore, should cater heavily to these demographics. For this reason, I recruited mainly Millennial and Gen X participants for subsequent research and testing.

Second, I created and distributed an online survey that was completed by 10 men and women in their 20’s and 30’s, all with experience shopping online. Noteworthy data points from the results include:

Lastly, I conducted 5 separate in-person interviews, which gave me a less data-driven, more qualitative picture of the online shopper. While results varied, the unifying themes were:

1. Feelings of “guilt” associated with the acts of shopping and spending money.

2. Frustration with clothing not fitting as expected.

I synthesized the insights gained in the interviews and surveys to create a representative persona to humanize the user and guide later design decisions. 

With a provisional blueprint of the site’s IA, I created a site map to visualize how the site’s content might be organized and structured.

To determine how users could move through the site, I created a user flow centered around two main shopping scenarios

Once i identified the key pages I would be designing for, I began sketching the pages of the site that I would later translate into wireframes.

While designing the wireframes, I kept the following considerations in mind based on my research findings:

1. Since 80% of survey respondents claimed they multi-task while shopping online, designing a smooth and simple checkout flow would be critical in making sure these more "distracted" shoppers complete their purchase.

2. Since 70% of survey respondents said it was “very important” for clothing sites to list the physical dimensions of the items, I included a link on the product page to a size chart, as well as a simple graphic based on user reviews denoting “Overall Fit.”

3. Many interviewees expressed  feelings of guilt tied to the act of shopping, citing the burden of student loans, aversion to materialism, among other reasons. Aiming to assuage this sentiment in Mirror shoppers, I put the savings-related content at the very top of the homepage to ensure maximum discoverability. Furthermore, I made “price” a featured criteria by which shoppers can sort or filter Mirror’s content. 

Having established the basic architecture of the site, I began to explore the different ways Mirror could look aesthetically. Aiming for a clean, elegant style, I chose a simple blue and grey color palette, distinctive enough to express the brand’s attributes, while understated enough to play a supporting role to the content. These traits are echoed in both the typography and iconography.

I designed a high-fidelity mock-up of the site that is distintively clean, relying heavily on whitespace and modular design. 

Once I had a high-fidelity mockup of the site, it was time to take it for a test-drive. I created an interactive prototype using Invision, then recruited 5 participants for a usability test to assess the site’s basic usability and identify any pain points in the user experience. 

After conducting a brief preliminary interview to gauge shopping experience, I asked each participant to perform three tasks in succession: to locate a blue tank top, put it in their shopping bag, then complete the checkout process as a guest.

While all participants were able to successfully complete each task, certain participants experienced the following pain points during the test:

Delay in finding filter function: 4 of 5 testers

Confusion with category names/meanings: 2 of 5 testers

These hiccups in the user flow highlighted what the priority revisions to the site would be - namely, to move the filter higher on the page to increase discoverability, place the “Filter” dropdown closer to the “Sort By” dropdown to emphasize their distinct functionalities, and further simplify the site’s taxonomy to facilitate user navigation. After the test, I made these iterations to enhance Mirror's overall usability.

Reflection

This project taught me that the most effective designs are able to balance the needs of both users and stakeholders. Mirror’s business goals, from the onset, were to exploit the digital marketplace and drive revenue through online consumers. But this objective clashed with a key insight I received from user interviews: that the acts of shopping and spending money occasionally induce feelings of guilt for many online shoppers. So how do you reconcile these disparate needs? As discussed in my study, I featured savings-related content prominently on the site’s hierarchy, and gave users the opportunity to sort and filter content by price. As a result, Mirror users can shop with reduced guilt and stakeholders can continue to grow their business. These considerations of the emotional and psychological needs of the user, I believe, embody effective user-centered principles, and enrich Mirror’s overall experience. 

Next Steps

The next steps would be to iterate on the prototype to include more features, functionalities, and working links so that the user flow is more seamless during testing, and then to performing further usability tests with the updated prototype to gather feedback and identify additional areas for improvement.