mirror logo
mirror logo
headshot
mirror logo

A shopping solution for every unique body

Company

Personal Project

Role

UX/UI Design
Art Direction

Currently, online clothing sites offer an abundance of options, but limited ways to filter items down to find relevant pieces. Lookbooks are limited in providing inspiration and “suggested with” lists feel impersonal and incomplete. I want to develop an experience that inspires shoppers with personalized offerings and customizable outfits. By serving up targeted recommendations, the brand builds confidence that Mirror is the best destination for well-fitting clothes. 

basic flow
inspire
basic flow
inspire

The Plan

Analyzing retail competitors and 2020 ecommerce trends shapes the focus on the research so that the product solution is future-focused while meeting consumer needs. Designing Mirror from the ground up is an opportunity to innovate, so I conducted contextual inquiries to gain first-hand knowledge of clothing shopping habits. My goal is to create a responsive website that helps customers expand their wardrobe with trendy items by easily finding options that fit their preferences.

The Process

Research Focus areas

What is the current standard for sorting, filtering, and recommmending clothes among competitors?

How do men, women, and caregivers find clothes that match their style and figure?

What are the biggest pain points to shopping online?
And what makes the experience easy?

Market Research

I studied five of the biggest fast-fashion retailers and noted their strengths and weaknesses around providing inspiration for customers, allowing users to filter to find desired items, and how they personalize content (if at all).

Contextual Interviews

To dive into empathemic research, I reached out to five people of various ages – 25 to 65 – who shop for clothes online. Due to coronavirus, all interviews needed to be conducted remotely, so I had users share their screen while performing tasks.

Understanding the user & Finding Patterns

Time to synthesize the research while keeping a human-centered mindset, I created an empathy map to document high-level behaviors, goals, frustrations, and influences. Next up, a persona! This concisely outines user pains, frustrations, motivations, and needs.

empathy assets

headshot

UX Challenges

Irrelvant Overload

On any site, shoppers are bombarded with hundreds of clothing options. Potential purchases are buried in a sea of unappealing colors, cuts, and fabrics, or worse, shoppers discover something they love, to only find out it’s not available in their size. This leads to quickly abandoned pages and feelings of disappointment and annoyance. 

Style Assistance

Shoppers are curious and eager to try new trends. They need assistance purchasing fully styled outfits and pairing new items to fit in their current wardrobe, just like they can get in the store.

Unique Bodies

Customers feel like they have a body shape unique to them. Because of this, it’s hard to find clothes that fit them and determine what size to order. Because most users do not look like the photographed model, they rely on user generated content to help in choosing size.  

UX Opportunities

From this research, it was clear that an online clothing retailer could do so much more to personalize the experience, inspire shoppers, and give them confidence in their purchases. 

In the Flow

I started with the basic task flow to show the high level steps for shopping for clothes. I next developed a user flow that allows for outfit inspiration. The next user flow depicts an idea for customizing an outfit based on inspirational looks.

mirror flows

headshot

Best Practices

Before diving into wireframing, I researched the current standards for online shopping. I thought about the pros, cons, and areas for innovation for each design pattern, as well as what would make sense based on user research.

design patterns

Exploration

Time for my favorite part – sketching! With the UX challenges in mind, I focused on generating solutions to inspire users with personalized outfit suggestions and customizing outfits to test new trends for the homepage, product page, and outfit builder page.

Then, on to low fidelity wireframes for prototype testing.

wireframes

headshot

Testing the wireframes as a prototype in Figma

The Solutions

The following solutions help users like Stephanie. Whether they are shopping with a purpose or just boredom browsing, users want to effortlessly find trendy clothes that fit their taste and unqiue body.

Personalized Profile

Set up a profile that gathers size info, style preferences, and interests. 

personalization

Personalized Profile

Set up a profile that gathers size info, style preferences, and interests. 

personalization

Personalized Profile

Set up a profile that gathers size info, style preferences, and interests. 

personalization

Relevant Results

The homepage and search results prioritize results based on these settings and shopping history. Rather than standard promo images, the user can start shopping right on the homescreen.

Relevant Results

The homepage and search results prioritize results based on these settings and shopping history. Rather than standard promo images, the user can start shopping right on the homescreen.

Relevant Results

The homepage and search results prioritize results based on these settings and shopping history. Rather than standard promo images, the user can start shopping right on the homescreen.

possibilities
possibilities
possibilities

Imagine the Possibilities

Feel inspired to try new things and see where new looks can take you. 

Mix and Match

Effortlessly test trends by customizing a new look. Beat boredom, by swiping through tops, bottoms, accessories, and shoes. Each category can be narrowed by style.

mix it up

Mix and Match

Effortlessly test trends by customizing a new look. Beat boredom, by swiping through tops, bottoms, accessories, and shoes. Each category can be narrowed by style.

mix it up
personal shopper

Personal Stylist

Discover how to style prospective clothes with custom recommendations.

personal shopper

Personal Stylist

Discover how to style prospective clothes with custom recommendations.

personal shopper

Personal Stylist

Discover how to style prospective clothes with custom recommendations.

Shop with Confidence

Mirror shows the most relevant reviews based on  personal profiles so shoppers can easily confirm size choices.

Shop with Confidence

Mirror shows the most relevant reviews based on personal profiles so shoppers can easily confirm size choices.

Shop with Confidence

Mirror shows the most relevant reviews based on personal profiles so shoppers can easily confirm size choices.

product page
product page
product page
product page

mobile collage

Testing & Iteration

The mix-and-match tool was the most ambitious aspect of this project. Since this does not currently exist on most shopping sites, the key to its success was making sure that it was intuitive and easy to use. This taught me the value of getting prototypes in front of user’s eyes as soon as possible. These tests were invaluable in making simple changes to the interface to improve ease of use.

affinity map

Affinity mapping the results from the testing to identify patterns

testing changes

The first round of Mix It Up vs. the new one after testing

headshot

Next Steps

2020 seemed like a good year to bring in Augmented Reality for clothes shopping. With more and more people shopping only online due to Covid-19, it’s the perfect time to improve user ability to “try things on” remotely. Due to time and technology constraints, I wasn’t able to pursue this idea yet.


There’s more!

perky header
Empowering women to take control of their health
Empowering women to take control of their health
Show ME
Show ME

Inspired to chat?
Reach me at
katielizlewis@gmail.com

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from - Youtube
Vimeo
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google