Mirror

A DesignLab project that challenged me to create a responsive website and branding for a global clothing retailer.

01. Introduction Mirror is a global clothing retailer who offers value on clothing for people of all ages and styles. They are very successful offline with over 400 stores around the world in 32 countries. Due to the rise of e-commerce and customer demands, they are now looking to sell their products online. PROJECT GOALS The goal was to launch a responsive e-commerce website, and refresh Mirror’s visual branding, to give the brand a modern image, and take their business online. 02. Research OBJECTIVES Understand the current state of e-commerce clothing stores. Uncover the strengths and weaknesses of direct and indirect competitors’ websites. Find out about pain points, goals, and motivations of people when shopping online or in-store. Research interviews were conducted on 3 participants to find out about their pain points and needs when shopping online or in-store for clothing. KEY LEARNINGS

Goals and motivations

 

  • changing up their wardrobe
  • buying suitable clothing for the current weather
  • trends
  • influence from social media and friends
  • immediate need
  • sales

Pain points

 

  • lack of good tracking
  • long lines
  • messy store
  • bad customer service
  • clunky checkout process
  • crowds
  • traffic
03. Define PERSONA DEVELOPMENT Based on the data gathered, I explored creating several provisional personas:

EMPATHY MAP

 

Based on the persona created above, an Empathy Map was constructed to visualize user needs and inform product strategy.

CARD SORTING

 

An open card sort was hosted among 4 participants to organize products into categories that make sense to them. Results of this exercise were used to guide information architecture of  the product categories.

INFORMATION ARCHITECTURE

 

A sitemap was constructed to outline the relationship between the content on the Mirror website, and to give us an idea of the pages needed on the site. The task flow was created to show the sequence of steps a user takes to purchase a product, as well as a user flow to show the various paths a user can take while interacting with the Mirror website.

04. Design WIREFRAMES & LOW FIDELITY PROTOTYPE Based on the site maps and user flow, a list of features and UI elements were determined before building out the sketches. 5 key pages were sketched out before producing responsive wireframes and a low fidelity prototype.

Responsive wireframes for the Home Page.

Home page, Category Page, Product Page, Shopping Bag, Checkout

BRANDING & UI

 

Mirror is all about having clothing accessible for everyone with good prices and a variety of styles. The following brand attributes were considered when designing Mirror’s visual language:

 

  • Neutral
  • Modern and fresh
  • Clean and clear

 

The refreshed visual identity for Mirror features a modern logo, muted color palette and a font library.

 

RESPONSIVE UI DESIGN

 

Branding elements were applied to responsive wireframes to yield a high-fidelity prototype for testing.

 

06. Next Steps This project was done within a short time frame, so the focus was mainly on building out the key pages - in particular, the checkout process. The next steps would be to build out further pages and capabilities on the InVision prototype and reiterate as needed. In addition, features suggested by test participants can be considered, such as a system to indicate how much more the customer needs to spend to qualify for free shipping.

Back to projects

REBECCA LI

WORK

BACK TO TOP →

ABOUT

CONTACT

WORK

hello@rebecca-li.com