Mirror

A responsive website for an e-commerce fashion store.

Project Details

Client Mirror

My Role UX/UI Designer and Researcher

Duration6 weeks

ToolsFigma

Background

Mirror is a clothing store that started in 1994. While they’re successful online with hundreds of locations around the world, they are late in the game for a digital transformation. They are looking to bring their presence online to expand their customer base.

PROBLEM

Customers have been asking to have an online store for years, citing its convenience and arguing that if they can’t find their size in the shop, they always order clothing online from other stores.

Research

Context

We want to know customers’ shopping behaviors so we can create an excellent experience.

Approach

  • Secondary research and competitive analysis
  • 4 user interviews

Competitive Analysis Findings

  • Mirror needs to have easy filtering options according to size, fit, and color
  • The UI must be clean and not overwhelming to the user with too many ads upon entering the homepage
  • Mirror needs to have detailed clothing information, particularly on sizing and quality of the items

    Interview Findings

    All of my participants prefer to shop in-store over online primarily because they are able to try on the clothing before they buy. However, when they do shop online, it’s for two reasons:

    • They’re repurchasing from a brand they trust and had a positive shopping experience in the past
    • The items they’re looking for can only be found online
      NEEDS
      Motivation
      Frustrations

      The right fit and size for their bodies

      Motivated to purchase when there are positive customer reviews

      Poor fit and quality

      Confidence of the quality of clothing when shopping

      Convenience

      Hassel returning items

      "I would repurchase from a brand again if I know they have accurate sizing guidelines."

      User Persona and Empathy Mapping

      After my 1-on-1 interviews, my results were synthesized in a user persona and empathy map based on the patterns I observed. The purpose of this is to get a better understanding of their goals, frustrations, and motivations when it comes to online clothing shopping.

      Define

      Context

      In order to make sense of the data we’ve gathered from our research, I need to identify high level goals of both the business’ and users’ goals, as well as any technical considerations.

      Approach

      • Venn diagram to define project goals
      • Feature roadmap

      Project Goals Venn diagram

      Feature Roadmap

      With my user persona in mind, I created a feature road map that should be included in Mirror’s website. I made sure to design for both the user’s goals as well as the business’s goals. These are ordered based on must-haves and nice-to-haves.

      Ideate

      Context

      With my features and personas in mind, it was time to focus on the scope and sitemap of Mirror's website.

      Approach

      • Sitemap
      • User flows
      • Task flows
      • Wireframes

      Sitemap

      To help me understand how information and content of the website will be structured, I created a sitemap showcasing the location of every clothing under its respective categories. Starting with the navigation menu and working my way down to more granular menu items.

      Task Flows

      I created task flows based on how users will go through the journey of purchasing an item. The main task is the buying process, how they can add the item to cart, and if they’re able to find sizing information on the website.

      Sketches

      After creating the site map and user flows, I created sketches to better visualize how Mirror’s website will look like.

      Low Fidelity Wireframes

      I digitized my sketches by creating low-fidelity wireframes and made additional pages based on my task flows.

      Design

      Context

      Mirror was in need of a new logo so I created a new brand identity that can be best described as: fun, chic, stylish. In designing the logo and brand identity, I kept these keywords in mind.

      Approach

      • Logos
      • Style tile
      • UI Kit
      • High-fidelity pages

      Logos

      Style Tile

      UI Kit

      High Fidelity Pages

      Prototype & Test

      Context

      I turned my wireframes into high-fidelity prototypes for usability testing. My participants are users who have experience with online clothing shopping as well as those who participated in my user interviews.

      Test Goals

      • To see if users could successfully navigate an item they’re looking to buy
      • To see if users use filters with ease
      • To see if my users can purchase an item to checkout

      Tasks

      I conducted 4 usability testing both remote and in- person. Here are some of the tasks I asked of my participants:

      • You want to find a women’s yellow dress, that’s in a size small, long sleeve, and loose-fit. How would you find it?
      • You’re not sure if the dress fits you, walk me through how you can find this information.
      • You’re interested in the dress and want to buy it. How would you go about it?

      Results

      4 out of 4

      were able to navigate the dress with ease

      4 out of 4

      were able to find sizing information

      1 out of 4

      were able to purchase with ease

      1 out of 4

      were able to purchase with a minor issue

      1 out of 4

      had a major issue in the checkout process

      1 out of 4

      failed to checkout

      Iterate

      Based on usability test findings and feedback from participants, I iterated on my designs by:

      Next Steps

      Conclusion

      Overall, I was extremely happy with my usability tests; however, I was surprised on the number of challenges my users had in the checkout process. Everything else apart from the checkout process, my users were pleasantly happy with. They are able to locate the item with ease and felt there were ample amounts of filters for them to find an item. Most importantly, they said the product answered their frustrations when online clothing shopping.

      Next Steps

      If I had more time, I’d conduct a second round of usability testing with my updated iteration on a new set of participants. From there, I would design for mobile and tablet and focus on designing the Fit Quiz which is a feature that seems to be the most helpful for users when finding their size.