Case Study

Mirror

A responsive e-commerce website

Project Overview

✧ Project Dates: March 2022 - May 2022

✧ Client: Mirror (Personal Project)

✧ Role: Researcher, UX/UI, User Testing

✧ Project Background: Mirror is an affordable clothing store that has amassed a loyal customer base with only physical retail locations.

✧ Deliverables: UI, brand identity, responsive e-commerce pages (desktop & mobile)

✧ Project Problem ✧

Without an online store, Mirror is losing out on potential sales and wasting inventory.

Empathize

Competitive Analysis: The goal for this phase was to gain more knowledge of the fashion e-commerce industry, understand our competitors, and find gaps in the market to improve upon.

I found that consumers prefer a balance between online and physical stores. Our competitors offer a variety of items but many lack the synergy between online and physical stores. Creating a synergy between Mirror’s physical and online stores can build brand loyalty, increase sales, and help differentiate from competitors who focus solely on one channel.

1-on-1 Interviews: To gain a better understanding of our users, a 1-on-1 interview was performed with 4 participants. The goal for the interviews was to discover user needs and frustrations when it comes to shopping online and understand the buyer's journey from initial inquiry to purchase.

Motivations

  • Larger selection of items online, variety & size options

  • Clear product information displayed through reviews, pictures, material list

  • Access to sale items, items in their price range, current “online only” deals

  • Can easily filter through a wide selection of option

  • Buying from already trusted brands as they know the quality, size chart, and price range

  • Can shop from the comfort of their home or on the go

Goals

  • Easily find clothing that satisfies a gap in their existing wardrobe

  • Make sound decisions based on price, size, & quality before purchasing.

Habits

  • Browses shopping websites daily

  • Loyal to ~ 3 brands

  • Adds items to cart but doesn’t purchase

  • Purchase around once a month

  • Uses filters to sort through options

Frustrations

  • Unclear size guide

  • Slow or unreliable shipping

  • Poor customer service

  • Cluttered websites

Define

User Persona: Following the interview, I found the commonalities of users while shopping online in order to make a persona.

Feature Roadmap: I then compiled a list of pages/features that should be included on Mirror’s website based off the competitive analysis, user interviews, and secondary research. Each were then give a priority level to determine what is needed for the minimum viable product and what can be implemented at a later date.

Ideate

Site Map: An open card sort was performed to understand how users look for information while shopping online. The sort was completed online using Optimal Workshop.

Participants more commonly sorted by the occasion of the clothes, with item type becoming second most common. For Mirror’s site map, it is important to emphasize both as a way for customers to easily find what they are looking for.

Task Flows: To know the necessary pages to design, I created a flow to show the pages a user will visit and the actions they will make to complete the main task of the website. The main task used: purchase a wool coat.

Sketches: Next, I started sketching out layout ideas for the homepage.

Low-Fidelity Wireframes: Once I had an idea of the layout, I created a low-fidelity wireframe of the homepage for both desktop and mobile. I then created wireframes for other pages in the task flow including a categories page, product details page, shopping cart page, and the first step in the check out process page.

Design

UI Kit: Now that I had wireframes of the pages, I shifted my focus on building a brand identity for Mirror. I created a logo and chose the typography and color palette that I felt best represented the brand’s fresh and simple aesthetic. From there, I built a UI Kit that reflects their brand and will create a cohesive look throughout the designs.

High-Fidelity Wireframes: The UI Kit was added to the wireframes to create designs ready for prototype and testing.

Testing

Usability Testing: The next step was to turn the high-fidelity wireframes into prototypes to test user flow. The testing was performed in person with 4 persona-matching users who were asked to complete the following tasks:

Scenario #1: After learning about Mirror’s new online store, you want to check out the items they have online. Take a few minutes to explore the homepage, then select the “View New Arrivals” Button.
Test: Homepage, UI

Scenario #2: Your friend’s wedding is next year but you want to start looking for dresses to wear before you decide to buy. Save a red dress to your wishlist.
Tests: Navigation, Learnability, Wishlist Feature, Filters

Scenario #3: While browsing the tops section you see a top you immediately want to buy. Add the Babydoll Blouse in size “Large” to your cart and check out.
Tests: Navigation, Efficiency, Memorability, User Flow

Testing Results:The results of the usability testing were compiled into an infinity map to find patterns , pain-points, and any user suggestions.

What works

  • Tone is clear and consistent throughout website

  • Nice layout

  • Aesthetically and visually pleasing

  • User flow can be completed

What needs work

  • Links to Product Page

  • Confusing Checkout Page

  • Error in prototype while filtering

  • Search feature unavailable

Iterations: Taking into account feedback and user testing, improvements to the pages were made; including a redesign of the first step in the checkout process, implementing an interaction when filtering, and adding a quick add feature.

Re-Design: Check Out Page

The check out page was updated after the first iteration’s layout caused confusion while testing. The original first page in the checkout process focused solely on the user choosing to either sign in or continue as a guest. The users are still given those options, but can now flow seamlessly into the next part of the checkout process, adding shipping information.

New Feature: Filter

This iteration provides the user the ability to filter the listed items.

New Feature: Quick Add

A pop-up element was created so users can quickly add an item to their cart without navigating to a new page.

Conclusion

If given more time the next steps taken in the project would be:

✧ Lower Priority Features

  • Complete Checkout Processes

  • Finish Search feature

  • Create pages that allows users to make an account

✧ Gamification

  • Test scenarios with updated pages

  • Create new scenarios to test new pages and tasks

✧ Responsive Design Testing

  • Flesh out pages for multiple devices (mobile & tablet)

✧ What I Learned ✧

This project was my first experience with conducting interviews and user-testing, as well as, presenting my designs during group critiques to other designers. Throughout this process I was able to understand directly the importance of obtaining diverse perspectives, gaining insights from other designers, and garnering input from potential users in order to create an optimal user experience.