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.
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!
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.
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.
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.
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.
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.
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):
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.
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.
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:
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.
After three versions and multiple rounds of testing, the high fidelity protoype of the Mize Extension was created.
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.
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.
Get in touch!
© Deanna Kadota 2022