Mirror

Research

I conducted primary and secondary research to better understand the online shopping realm, and uncover shopper’s goals and determine their pain points in an online shopping experience.

User Persona

Based on the above research, I created a persona representative of Mirror’s target shoppers.

Meet Sara, a 33-year-old Engineer in Bay Area. She cares a lot about the impact of the fashion industry on our environment and human labors across the world, so she consciously makes decisions to lessen these impacts through shopping for high-quality, minimal and classic style clothing that lasts longer.

Project Goals

Based on the data gathered in the empathize phase, I listed out the goals of the business, users, and technical considerations to provide an easy and enjoyable shopping experience for Mirror's online shoppers. I outlined product features that are must-have, nice to have and the ones that can come at a later stage.

Site Map

To organize products in categories that make the most sense to shoppers, I conducted an open card sorting exercise and used those findings to create the site map to visualize the layout and content of the site.

User Flow

To understand how shoppers will navigate through the website for buying a particular product, I built a user flow to identify multiple paths and decision points from entry to exit.

Low Fidelity Wireframes

Using my research findings, site map, and user flow diagrams, I started sketching few variations of the homepage. Once I decided on the visual direction of the layout, I digitized a low-fi version of wireframes based on sketches.

Further, to ensure shoppers have a consistent experience across different devices, responsive wireframes are created for desktop, tablet, and mobile.

User Interface Design

Brand Characteristics

Minimalist, trendy, clean, modern, earthy, professional

Logo Design

To establish brand identity, I brainstormed adjectives around the brand attributes and sketched as many logo options as I could. I then digitized a few shortlisted options and finalized my choice by examining their legibility at different scales.

Style Tile

To further develop the visual style of Mirror, I created a style tile which serves as a synthesizing document of the brand ideas and inspirations gathered, incorporating logo design, icons, color palette, typography, and image treatments that guides Mirror’s UI design.

High Fidelity Wireframes

By applying established UI design to wireframes, I created high-fidelity wireframes and pages to complete a task. It further helped me to examine the overall aesthetic feelings and visual balance of the website.

Desktop Prototype

In the Prototype phase, I built scaled-down versions of the product for testing. It helps me uncover false assumptions, identify UX frictions, eliminate errors before investing too much in developing the product. I used Figma to create the prototype using the pages that are necessary for users to finish each task.

Tasks

• Task 1: Find and navigate to women’s sweaters and cardigans

• Task 2: Find Alpaca Cardigan

• Task 3: Select color black, size M and add to cart

• Task 4: Proceed to checkout and place an order.

Usability Test

Test Objectives

• Test the ease of user and overall flow of the website.

• Test the navigation bar, easy filter, and product page.

• Identify areas of confusion and pain points.

• Gather feedback to identify room for improvement.

Methodology

• In-person and zoom with Figma prototype

Participants

• 5 participants, aged 25-35

Priority Revisions