Mirror

The new standard in online shopping.

 

 
 

 

Project Summary

Client: Mirror (academic project via Designlab)

Goal: 1. Design a responsive e-commerce website that is easy to use and that allows customers to browse through different clothing categories and details. 

          2. Create a new way for Mirror to break into the online shopping scene by learning from the competition's successes and mistakes.

What I did: User research, Card Sorting, Product roadmap, Lo-fi wireframes, Hi-fi wireframes, Prototype creation and testing.

How long it took: 2 months.

 

 

Introduction

What is Mirror?

Mirror is a successful clothing store company similar to that of Zara or H&M, that has done quite well over the last twenty years offline. They now want to take their business online, and gain more of the market share.

How Mirror Works

The Mirror website is designed to not only take orders on clothing items, but to limit the amount of returns as well.

I took the notion that Mirror is a regular clothing store and created a "body scan" as a way to get perfectly fitting clothing. This is done by a full body scan provided by all Mirror locations, that allows the customer to see how clothes will fit them before they buy, as well as a size recommendation.

The idea for the body scan came from a major pain point in online shopping, which is excessive returns due to ill-fitting purchases.

The Task

-Design a responsive e-commerce website that is easy to use and that allows customers to browse through different clothing categories and details.

-Create a new way for Mirror to break into the online shopping scene by learning from the competitions successes and mistakes.

Research

I interviewed two people I know and two people I met just outside some of the competition's brick and mortar stores. I spoke with two men and two women, all within the age range of 19-30 years.

All of the participants shop every month either in person, online, or both. Most of them shop online more often than in the store due to a recurring theme. Time available is most often an issue for the participants.

Because there is a split between the amount of people in general who prefer to shop online vs in person, Mirror can access both markets by providing an experience online just as they have provided in person for the last 24 years.

I also created a competitive analysis to analyze the existing competition and how their current websites stack up against each other. This helped me define a place for Mirror to break in.

 
 
Research Ramp-Up.png
 
 

Define

Through a user persona and an empathy map, I was able to identify the main pains and gains from the research to adjust my designs of the project.

 
 
Marissa Persona
 
 
 
Mirror Empathy
 
 
 
Mirror Sitemap v3.png
 
 
 
Mirro User Flow v3.png
 
 

To create a blueprint for the information architecture, I conducted a card sorting exercise and created a product road map. I chose to do these things because I get to see how people categorize different clothing items as well as figure out what the most important features are for the website to have.

 
Mirror Slides copy 3.png
Mirror Slides copy 4.png
 

Design

I decided to sketch some wireframe options for a home screen and then get some feedback on them before deciding to move forward. After that, I mocked up the rest of the product responsively in a low-fidelity fashion.

 
Mirror Slides copy 2.png
 
Mirror Slides copy.png
 
 

The next step before UI elements was to decide on a logo for Mirror. I wanted to incorporate elements that relate to the creation of a user's "mirror," and the idea of a reflection.

 
Mirror Slides.png
 

A UI Kit is created after the remaining elements have been chosen such as the color palette, images, and typography. I ended up going with a simple but refined palette, because I wanted to represent Mirror as a modern and clean brand. 

 
 
Mirror UI Kit-1.jpg
 
 

Test

This test was used to gauge the emotional and physical process of the body scan used to create a “mirror”. The “mirror” created would be used to asses correct size and fit for articles of clothing purchased from the Mirror website, to allow for a more complete online shopping experience. Several of the participants found the prototype too detailed and the scan too clumsy to use.

All of the participants struggled with scanning their legs as directed by prototype. If the process is not seamless, the time it takes to complete and usability will lose the user.

To combat the pain points, the product shifted from a mobile body scan into an in-person body scan at a local Mirror location. This is a quick, safe, and accurate procedure that allows for the user to get precise measurements and see how they would look in Mirror items before purchase online.

 
 
Mirror Proto.gif
 
 

Key Takeaways

  • When users are struggling to the point that they cannot access the purpose of the product, it might be considered to rearrange the product.
  • Everyone has different ways of categorizing things, which is why when working on an e-commerce product, card sorting can prove to be very helpful.
  • It doesn't matter what might be a cool idea if the product does not solve the problem it sets out to relieve.