mirror

INTRODUCTION

THE PROJECT

The following case study will take you through my first UX design project at Designlab’s UX Academy course. It can be best described as a journey as I fumbled my way through all the essential design deliverables in the best way I could and tried to accomplish the desired goals and solving the user problems that were revealed during my process. The good news was, being a former architectural designer, the similar design thinking approach has made my experience feel very familiar and easier than expected.

BACKGROUND

“Clothing doesn’t have to be expensive and last forever
-that we should be able to change styles as we need and please.”

That’s the main goal behind MIRROR, a large clothing store chain for both kids and adults with a history of 27 years in the retail industry catering to their loyal customers with high-end quality products at affordable prices. They’ve built their reputation through 400 brick-and-mortar stores across 32 countries, but the rise of an online store was both necessary and inevitable.

THE CHALLENGE

• Business Challenge : To catch up with the other business counterparts in having an online presence, increase the sales and manage the left over inventory.

• Users’ Challenge : To shop from the comfort of their homes and have an over all best online shopping experience without any hassles.

THE OBJECTIVES

• Design a responsive e-commerce website that is easy to use and allows customers to browse through all products and various filter by size, color, style, etc.

• Rebrand and design a logo for the company that is modern and neutral enough to attract all types of people and styles.

PROJECT SCOPE

RESEARCH

Keeping the high level goals and objectives in mind, I started with basic market research while also having simple conversations with my friends and family about shopping online, since we were in middle of a pandemic and almost everyone were shopping online for almost everything including apparel. I realized that my empathizing had begun right then even before doing formal interviews. Then I went on to do a Competitive analysis to better understand the current market and identify existing solutions by assessing the strengths and weaknesses of 3 to 5 current and potential competitors.

COMPETITIVE ANALYSIS

The findings from the above analysis helped me to gain some insight on the requirements that are needed for a good shopping experience in general but it wasn’t until the completion of the user interviews that the more deeper and more user level problem was identified.

USER INTERVIEWS

I conducted 1:1 virtual interviews with 5 participants :-

• Aged 20 - 60, who regularly shop for clothing online.

• 2 out of 5 were parents who shopped for kids as well.

• 2 out of 5 had Plus-size requirements in Fashion.

Over all, the participants expressed their frustration majorly in one aspect, finding the right sizes. This was especially expressed by the women with plus size needs. That is when I decided to make this the main area of focus in this project.

VIEW DETAILED RESEARCH FINDINGS

PERSONA

Based on the collective qualitative insights gathered from the interviews, I created the following persona that would further narrow down the specific goals and needs to help me define the problems.

PROBLEM / SOLUTION

THE PROBLEM

Difficulty in finding right Size & Fit and Inclusiveness of all the size ranges.

Customers return an estimated 40% of what they buy online, mostly because of sizing, style and fit. Especially women with plus size needs cannot relate and determine the size and style of an outfit based on the standard straight models which most of the brands represent their apparel on.

Customers enjoy the ease of ordering clothes online from the comfort of their homes, but the frustration and the fear of getting deceived by the final style and look deter shoppers from exploring various styles and reduces the retailer’s revenue due to high return rates.

PROBLEM STATEMENT

How might we help online shoppers eliminate sizing guesswork and also create more inclusiveness and diversity into the brand that would ultimately increase their purchase confidence.

DERIVING THE SOLUTIONS

I went on to research more about inclusiveness in fashion and found out some interesting facts.

“Plus-size” is defined as any size above 16. This separates the 67% of women in the U.S. who wear a size 16 or up from the 33% who don’t.

Despite being in the minority, the latter group’s size range, referred to as “straight” sizing, is considered the standard.

Another factor that is attached to the plus-size issue is the discrimination that comes with the term “plus” itself. This discrimination has been reinforced by the shopping experience, the commercials and the marketing materials provided by many brands.

Good news is that in the past few years, many fashion brands have started embracing the inclusive sizing and also started manufacturing various styles of outfits in all size ranges. But some of them still have a single standard straight model images on sites. On the other hand, some brands like Mango, even if they have all the outfits featured by plus size models in addition to regular models, they still have them in a seperate Category/Section of their website which would cater the users to relate and find the right sizes but doesn’t completely justify inclusiveness.

“The only right way to do plus-size, is not to do plus-size.”

-ALEXANDRA WALDMAN, COFOUNDER & CREATIVE DIRECTOR, UNIVERSAL STANDARD

I wanted to have a solution where I could have the same outfit displayed by two kinds of models and still have them in a single page. I further researched the other competitive brands to find out how they tackled the similar problem.
I found some good design patterns across the various brands and derived a solution.

VIEW DESIGN PATTERNS

PROPOSED SOLUTIONS

 TASK FLOWS

Before I start sketching, I created some flows to better understand what pages would be required to design for testing the prototype.

Task : Purchase a green colored petite maxi dress in Size 4

 USER FLOW

Sara wants to buy a new dress for an upcoming party. Her favorite go-to Site is Mirror. She loves the fact that they have petite options available that perfectly match her height. She has an idea of what kind of look she desires. And mostly feels that an Emerald Green Colored Maxi Dress would satisfy that look but a little doubtful of her choice. And might as well be open to diff kinds of dresses.

RESPONSIVE WIREFRAMES

Ideally, this would be the stage where I should be conducting some usability test but one of the main solution I want to test is related to the images so, I felt testing the prototype after the visual design would be more apt in this scenario.

 PROTOTYPE

Once the high fidelity pages were designed, I created a prototype using Figma for testng. It was created based on the main user flow consisting of purchasing an apparel all the way from landing on home page to checking out.

VIEW PROTOTYPE

 USABILITY TEST

The prototype was ready to be tested. 5 participants were picked and a task was given to check the ease of entire flow from landing on home page till making a purchase. The participants were delighted with the “inclusive model images - having two sets of models’ images for same outfit in single product page”

Though the entire flow and navigation to complete the task felt easy and seamless, there were couple of minor inconviniences faced by the participants which have been addressed below in the form of an affinity map.

 AFFINITY MAP

 PRIORITY REVISIONS