Overview

Buying clothes online is frustrating. Many don’t recommend it. Some don’t bother anymore.

Since e-commerce has become a major player in the way the world buys their clothing, there has always been the issue of finding out that the item purchased doesn’t look as good on you as it did on the website. There are many possible reasons why this could be, but one common issue is that there is a lack of communication on how the garments are meant to fit on the body, and what size recommendation would suit the customer. 

The Product

I designed Mize, a browser extension that enhances a shopper’s experience in finding their clothing size while browsing online by making measurements and fit more visually digestible to the user. 

Roles: UX Design, UI Design, UX Research
Project Length: 10 weeks
Tools: Figma, InVision, Photoshop, Otter.ai
Team: It was all me!

Human-Centered Design Approach

I took on this challenge with the people I was designing for at the core of my thinking process. The UX Design Thinking Process encouraged me to broaden my horizons and keep an open mind, and then come back to narrow the scope and focus on a few key problem.

Unregulated Sizing

While it is common practice for clothing retailers to post size charts on their websites, these go highly unregulated. There is often no clarification about body measurements and even less information (if any) about the fit style, or the garment measurements itself. Each company defines their own sizing charts and may use completely different base points than their competitors, which only adds confusion. A shopping trend that has arisen because of this has been for consumers to buy multiple sizes of one style, and then returning the rest of them.

In 2019, the volume of online returns has increased by 95%.
In Canada, that’s about $46 Billion.

About 30% of online purchases will be returned, comparable to 10% brick-and-mortar store sales.

Fashion and Consumerism Wastage

With growing concerns over waste, especially in the fashion industry, the movement of “slow fashion” has risen in popularity over the past 10 years. This movement encourages buyers to make more conscious and meaningful purchases, and to cherish the clothes that they buy in order to length the lifespan of the item, and reduce the high turnover rate of trendy or seasonal clothing. Consumers have become more aware of negative industry practices over fashion items as well: burning excess stock, throwing away returns, and essentially creating more waste. While slow fashion has pushed some consumers to make more informed decisions about the clothes they buy, this mindset is moreso popular within communities of eco-conscious individuals.

Few Online Initiatives

Even through a shifting mindset within a market sector, there aren’t many solutions to help customers make more informed decisions when buying online. There are a few apps and plugins floating around online, but there hasn't been a stand out solution to aide shoppers who prefer to stay at home. The growing hesitancy to shop in brick and mortar stores, accelerated by the COVID-19 pandemic, hasn’t yet brought new, accessible initiatives for online shoppers to find clothing that fits them. 

Between 2014 and 2018, numbers went up by 113%.
In 2020, the UK alone saw online sales rise by one third.

How might we provide a widely accessible product to help online shoppers better understand how clothes will fit their body and make a more informed purchase?

The interviews conducted sampled opinions from a variety of genders, as well as age groups. By researching a wider range of the population, we still were able to find common trends and attitudes in online shopping habits. Nine individuals were interviewed, and we found four major key insights.

1. Shoppers dislike returning clothes through shipping enough that some prefer to simply give away or donate the items.
2. There is demand and need for more contextual and informational product photos that relate to the consumer.
3. Sizing charts are still difficult to understand and relate to the human body, even moreso when they differe from brand to brand.

With the information I learned through our research, interviews, and persona creation, I developed an experience map to identify what the average shopper is going through as they look for clothing, and where I might find an opening for a product. 

Goals: to get a new outfit wearable to work as businesses transition back to in-person work.

Frustrations: body has changed slightly over the past year, and not sure what size to buy.

Pain Points (red):

• Each brand’s sizing and information variance doesn’t allow for a compresensive comparison.
• Items that seem ‘too good to be true’ do not make her feel confident about the purchase.
• Model pictures of unknown brands rarely make it easier for her to tell how it would look on her.

Opportunities (green):

• Create a way for users to compare the online clothing to their own bodies.


• Be realistic about how clothes fit, so that users don’t feel “fooled” by the model images.

• Present clothing in a relatable way for users to connect with.

Core User Epic: Finding well fitting clothes

I started with many ideas for how the UI could look, exploring different options before settling on one. One thing that stuck in my mind was that I wanted to make a browser extension. I noticed that almost all serious and thoughtful purchases made by my interviewees were made on a desktop platform, so i wanted to meet that need exactly where it stands.

The first iteration of prototypes for the product were more detailed than what one may find in usual wireframes or even low fidelity greyscales, but due to the specific nature of this product, and the tendency for confusion surrounding clothing sizes, I decided to add more detail in the text elements to help the audience of my user tests.

User Testing Tasks

Task 1: View your 3D model in the extension
Task 2: Open the Compare function
Task 3: Import Size Chart from website
Task 4: Change the size that is compared
Task 5: Close the extension

From the beginning, all testers completed all tasks. I recognized this may have been due to the detailed prototypes, so I occasionally experimented with explaining tasks and explanations in a slightly different way to investigate if a user would truly understand how to use the extension. 

Based on the Round 1 tests, the following changes were made:

1. Outline or dropshadow the extension bounding box
2. Change frame height to fit all content without scrolling
3. Adjust small and diagonal fonts on the fit slider
4. Add steps and explanations onto the “Compare” page for more clarity
5. Change the top nav “compare” button to avoid confusion of duplicate buttons
6. Add a note about losing progress when exiting the extension
   

Branding 

The look and feel of an app is sometimes just as important to the users, so the branding choices like moodboards, colours, wordmarks, logos were all previewed by my colleagues while in development. It's always important to keep in mind that even if I know exactly what I've drawn, that it reads to others as well.

Wordmark

Logo

After three versions and multiple rounds of testing, the high fidelity protoype of the Mize Extension was created.

Marketing Site Planning

The mock-up of the marketing website for the extension has a simple landing page with most of the essential information presented on it, and a centered, top nav bar that scrolls along with the user. It draws the simplicity of the extension colours to make it look bright and clean. 

So, how does Mize help online shoppers?

1. Create an alternative for those who avoid brick and mortar stores for reasons like social anxiety.
2. Allow people with physical disabilities to shop in a comfortable environment.
3. Reduce contact points for those concerned about illnesses.
4. Provides an easy way for shoppers to compare fit from store to store.

Online shopping has only grown and looks to keep rising. Mize not only creates a solution to current problems, but it is a tool that can be configured and expanded to solve future issues.

Next Steps in the Future

• Build functionality for Bookmarking, Settings, Account, and Help sections.
• Refine interface after further user testing and receiving feedback.
• Work with 3D modelling professional.
• Work with a development team.

Get in touch! 

© Deanna Kadota 2024