Better Online Shopping - UX Case Study
Role:
UX Researcher, UX Designer, UI Designer
Tools:
Figma, User Interviews, Prototyping, Usability Testing
Timeline:
12 Weeks
February 2024 - May 2024
Course:
User Experience
Overview and Context
Shopping online is convenient, but for clothing, users can’t try items on. Because every brand sizes differently, shoppers rely on guesswork, memory, and long size charts, which leads to frustration and returns. This case study explores how UX can reduce that friction and help users confidently select the right size before checkout.
Problem: Users hesitate to buy form‑fitting clothes online because sizing varies across brands, and size charts are overwhelming.
Solution: A brand‑comparison sizing experience that shows how products fit relative to brands users already trust.
Impact: Faster decisions, reduced hesitation, fewer returns, and higher confidence at checkout.
Problem:
Users struggle to confidently buy form‑fitting clothing online due to brand inconsistency, cognitive overload, and unclear fit guidance.
Goals:
Reducing confusion around sizing.
Making size information quicker and easier to understand.
Comparing brand fit expectations.
Research
Research Objectives:
Understand how users currently choose clothing sizes online.
Identify frustrations with sizing charts and brand inconsistency.
Discover what features help users feel confident when purchasing.
Methodology:
1-on-1 user interviews
Empathy mapping (click here to view)
Persona creation (click here to view)
Key Insights:
Users rely on brand familiarity rather than measurements.
Size charts feel overwhelming and tedious.
Inconsistent sizing between brands creates hesitation.
Users want quick, simple sizing feedback instead of deep measurement tables.
Empathy Mapping
Persona
Problem/Need Statement
Online shoppers need a way to purchase form-fitting clothing of the correct size, but this is confusing because sizing across multiple brands is inconsistent.
Ideation, Wireframes, and User Flows (click here to view)
How Might We:
How might we make online shoppers more confident in finding the correct size of form-fitting clothing due to inconsistency across different brands?
How might we help online shoppers be more confident in customer service to address incorrect sizing issues quickly?
How might we make online shoppers less confused about where to find the type/style of form-fitting clothing they want?
Concept
Introduce a brand size comparison feature that shows how a product fits relative to other popular brands that users already know.
Example: “Our Size: M | Nike Size: S”
This gives users context instead of raw measurements and gives them a reference point for clothes they might already have.
Prototyping
A low‐fidelity prototype (click here to view) was created in Figma to test layout, sizing, interaction, and navigation.
Key Features:
Minimal product layout.
Hover/click size info.
Brand comparison sizing.
After iteration, a high‐fidelity prototype was introduced:
Clean, minimal UI.
Improved hierarchy.
Interactive size comparison.
Better spacing and readability.
Usability Testing
Task: Users were asked to purchase a shirt using the prototype.
Observations:
Users navigated quickly to the “Shirts” carousel.
They focused on size before anything else.
Brand comparison was the most helpful element.
Feedback:
Users liked:
Clean layout.
Easy size access.
Confidence in purchasing.
Users suggested:
Color‐swap options.
Sign‐in feature.
Click interaction instead of hover for size info.
Iteration
Based on feedback, improvements included:
Carousel for product images.
Renaming “Style” to “Style & Fit.”
Measurement units in inches and centimeters.
Improved button hover states.
Simplified size presentation.
Final Solution
The final design focuses on:
Clear hierarchy.
Minimal distractions.
Fast access to sizing.
Brand comparison for fit confidence.
Users can quickly understand how a product fits compared to brands they already trust.
Results:
Users felt more confident choosing sizes.
Brand comparison reduced hesitation.
Navigation felt intuitive and fast.