New York, NY
mockup_2x.png

Mirror - an e-commerce website

 Mirror

Designing an e-commerce site

 

Timeline: 1 month
Roles: UX researcher & designer, visual designer

About

Mirror is a conceptual project that addresses the challenges of sifting through large inventory and the helping retailers sell remainder inventory.

Project brief: Started in 1994, Mirror is a brick and mortar clothing store with 400 stores around the world in 32 countries. They provide customers with quality, yet affordable clothing in various styles for all different types of people and body types. Mirror has its dedicated clientele, however, over the years they have been asking for an online website where they can order from Mirror. Customers argue that they can’t always find their size in store and they end up ordering clothes online from the competitors. Mirror has outdated branding and wants to change to be more modern, clean, and clear.

Challenge
It was a rather daunting challenge to design and develop a website for a large inventory e-commerce site. Where does one begin? I asked myself many questions: Do you start with the landing page? How does the navigation menu look? What parameters would I use for the filters and search menu? After ruminating on it, I came to the conclusion that I needed to make the task flow of ordering and item as easily as possible for the user. How I did just that is explained below…..

Target Customer
I found the target customer was someone between the ages 25-35, working professional that doesn’t have much time for shopping. They want to be able to log on, navigate to what they are looking for and purchase.

 
 
 

Process

I used a human-centered design approach to understand the user goal by researching on the issues that other retail competitors facealong with gathering user data on their shopping habits & attitude. The research phase allowed me to synthesize those insights into design through rapid prototyping and testing.

 
  1. Research

Methods: competitive analysis and user interviews

1.1 Competitive analysis

In order to understand how other clothing companies developed their websites, I researched three popular brands: Uniqlo, H&M, and Zara. Each of the websites had varying approaches to the design of their homepage, category page, and product page. Below are some key differences I found.

Uniqlo

 

Zara

1.2 Interviews

I interviewed Mirror’s target audience, men and women between the ages of 18-65 via telephone. Over the course of each phone call, I was able to distill a lot from the interviewees. In great detail they were able to describe to me when they had a positive shopping experience online and when they had a terrible experience. I found out the following:
Needs: Faster checkout process; clothing across different settings (work, going out, etc)
Wants: Free shipping and return; more availability for sizes and how they fit
Pain Points: Hidden fees and shipping charges; items don’t fit as described and can’t determine quality of material.

1.3 Key takeaways

A lot of valuable information was uncovered in my research. Speaking to potential users, I was able to uncover their pain points and gains when shopping online. Hearing it straight from them helped me focus in on what elements I needed to create in this website.

 

2. Define

Methods: persona, empathy map, and user flow

2.1 Persona

Phil captures the different characteristics of my target segment - in his 30s, working professional who doesn’t have much time to shop due to his busy schedule. He would like to buy fashionable items but doesn’t know how to put outfits together. He likes the idea of being able to buy outfits online and search for his favorites quickly. He hates paying for shipping and when there are too many pop-ups.

Persona

Empathy Map

 

2.2 Empathy Map

After creating the persona of Phil, I created an empathy map to get a further idea of what he might be thinking when shopping online. I wanted to write down what he might be hearing and seeing, what were his pain points and gains when shopping online. I visited the competitors’ websites with his persona in mind to see what he would like or dislike about the experience.

 

2.3 Task Flow

Based on my site map, I built a task flow that Mirror customer would take upon entering Mirror’s homepage. The flow demonstrate how a customer would navigate to the right product right up to checkout.

Example Task Flow

Example Task Flow

 

3. Design

Methods: Sketches, Wireframes, UI Kit

3.1 Sketches

Once I had my research and information architecture complete, I wanted to sketch out multiple ideas I had for the homepage and product page.  I visited different online retailers’ websites to develop a vision of how I wanted the overall project to look. Below are some of my initial sketches I had for the homepage and different versions of the product page.  

 
 
 
 
 
 
 

3.2 Low Fidelity Wireframes

After sketching out my ideas, I reconsulted my notes and research to come up with the low fidelity wireframes. My goal for the lo-fi wireframes was to see how exactly I could translate my ideas into a working model. Building the wireframes, I realized how much space I was going to use in designing the landing page. I added a “What to Wear” section to the landing page because users mentioned in the interviews, they like putting together outfits but either time was limited, or they like to casually browse at clothing. By creating this section, it presents the user with full outfits fully made. I took a similar approach and added a “Complete Your Look” feature on the product page to encourage users to add items to complete the outfit.

 

3.3 High Fidelity Wireframes

I took my style guide and low fidelity wireframes to create a high fidelity mockup for the user flow of searching and adding an item to the cart. As I was building, I realized some of the features such as trending and best sellers were redundant as the user already has multiple ways of navigating to the product.

 
 

3.4 Brand guidelines

 
final style tile.png
 

For the color scheme, I wanted to give Mirror a clean, simple, modern look. What better than the classic combination of black and white. To spice things up, I added two accent colors. The blue is used throughout the website for the prices of the items. The red is used tastefully as the highlight color of the categories. It establishes for the user what category they’ve selected. 

To help give the site the look and feel I wanted, I knew I needed to use a sans-serif font. I experimented between Futura and Avenir. I found the Avenir and its respective families gave the site the best look. I used a mixture of the fonts found in the family to establish hierarchy and highlight important information for the user. I wanted the photographs to represent the clean, modern look and feel of what Mirror is. The sleek grey background with the high quality photographs translates well across the site and invokes the sense of a modern fashion company.


TEST

Methods: Prototype, Test, and Iterations

First Prototype

I created a high-fidelity prototype of the main user flow through Maze in order to test the usability of the website. My main goals were to:

·      Determine the usability of the new Mirror site and observe how easily a user can complete the supplied task

·      Make note of any difficulties for further iteration/improvement

·      Collect feedback from user on ease of navigating the website

 
 

Results

At the end of the prototype testing, there was a Google form with 6 questions asking the users about their experience with the prototype. From there I compiled their responses into an affinity map to further see where I was successful and where I needed to improve on my design. Some of my key findings I distilled from my first prototype are:

Positives

Good use of white space — clean and minimal
Photography matches brand
Intuitive layout and flow
Simple navigation

Opportunities to Grow

 
 
  • Add “&jackets” to outerwear or create a sub-category

  • More spacing between options in drop down

 
 
  • Hero image is very large and takes up bulk of screen

 
 
  • Image at the end of the page doesn’t match the images and branding throughout the website

 
 
  • Logo is not consistent with branding across the website

Final Iterations

After reviewing all my notes from my usability testing, I redesigned my prototype to address the following issues:

Landing Page: I wanted a more sleek and modern feel to the landing page. I kept the options limited and didn’t want too many repeating elements

Logo: I redesigned the logo to make it more uniform with the branding across the site

Drop-down menu: created more spacing between categories, created sub-category for Jackets underneath Outerwear

 
 

WHAT I LEARNED

  • Create and categorize a large inventory e-commerce site

  • Developed research plan to uncover what users wanted in a e-commerce site

  • Rapid prototyping wireframes and testing with users to determine what elements need to be improved

  • Developing and creating a style guide


NEXT STEPS

  • Let customers buy without creating an account and make checkout a single page

  • Simplify filtering and sorting of products to make search quicker

  • Simplify our overall site structure so that it’s more intuitive