MIRROR Case Study

Responsive E-commerce clothing website

Company:

Mirror (clothing store)

Duration:

5 weeks

Role:

UX Researcher, UX/UI Designer

laptop

Project overview

Mirror is a very big clothing store chain for both kids and adults. A clothing store targeting a budget-minded audience who looked for low-cost clothing for any occasion. The quality is pretty good and the prices are rather low. They are very successful offline. They have over 400 stores around the world in 32 countries. However, they are very late in the game of a digital transformation. They decided to give people the opportunity to buy clothes online. Regarding the brand, Mirror has a very outdated logo that they are looking to re-do. They’re not planning on keeping anything of what they currently have.

goal

The goal is to create a responsive online store to increase sales and customers.

Solution

  • Design a logo for the company that is modern and neutral enough to attract all types of people and styles.
  • Design a responsive e-commerce website that is easy to use and allows customers to browse through all products and filter by size, color, style.

process

icon
    Empathize
  • User Interviews
  • Competitive Analysis
  • icon
      Define
  • User persona
  • Empathy map
  • Storyboard
  • icon
      Ideate
  • Card sorting
  • User flow
  • Information architecture
  • icon
      Design
  • Lo-fi wireframe
  • Hi-fi wireframe
  • Brand logo & style
  • UI kit
  • icon
      Test
  • Usability testing
  • empathize

    competitive analysis

    I selected 5 companies for competitive analysis to understand their strengths and weaknesses and make our site better. 3 of them were direct competitors and 2 of them were indirect competitors.

    Direct competitors

    direct competitors

    Indirect competitors

    indirect competitors

    Summary

    • Some online stores have the same features but are implemented differently.
    • Each store has a filter, but not everyone has the ability to clear each category separately.
    • Each store has the ability to add products to the cart without log in.
    • The size guide is important because some people don't know their own size.
    • Navigation should be simple and clear.
    • Images should focus on the items, not the model.
    • Large and contrasting CTA.
    • The ability to have free shipping or a cheap annual shipping subscription is important.
    • Use a readable font size.
    • Show hot deals.

    Interviews

    Number of participants – 3

    Ages – 29–55 y.o.

    Research objectives:

    • Identify what motivates people to shop online.
    • Understanding how they shop online.
    • Understanding how they find certain products.
    • Understanding what motivates people to add a product to the cart.

    Summary

    • The actual photo of the clothes is important
    • Convenient filters, form of payment and the ordering process
    • Products must have descriptive details
    • The navigation is easy and clear
    • Shipping is important
    • Ability to use the website from different devices
    • Ability to view reviews
    people

    define

    User persona

    user persona

    empathy map

    empathy map

    storyboard

    The story of why Emma decided to buy a dress.

    storyboard

    Ideate

    Card sorting

    Card sorting is a way to understand and analyze the information architecture of a site. There were 20 items and 5 participants for card sorting. I chose the hybrid version of the card sort, which allows me to create a specific categories and also allows participants to create their own. I noticed 15/20 items were placed in the same categories by every participant and 5/20 items were placed in different categories.

    2 out of 5 participants chose to place "Rainbow toe socks" in the "Socks" category instead of "Accessories". I think it would be nice to have a separate category for socks.

    card sorting

    Sitemap

    Sitemap

    User flow

    User flow

    design

    lo- fi Wireframes

    card sorting

    Hi-fi wireframes

    Homepage

    homepage
    homepage
    homepage
    homepage

    The products page

    category page
    category page
    category page

    The product page & shopping bag

    product page
    product page
    shopping bag

    Checkout Process

    Checkout Process
    Checkout Process
    Checkout Process

    UI kit

    user persona

    Test

    Prototype

    The participants had several tasks:

    • Find a dress for the event;
    • Add dress to cart;
    • Continue checkout as a guest;
    • Continue to checkout as a registered user.
    View Prototype
    laptop

    Usabilty testing

    Test Objectives

    • Observe how participants complete the task.
    • Observe participants react to the UI.
    • Identify design issues that may be confusing.

    Participant 1: 29 years old, often buys clothes online.

    Participant 2: 54 years old, rarely buys clothes online.

    Participant 3: 27 years old, often buys clothes online.

    Participant 4: 33 pyears old, sometimes buys clothes online.

    laptop