Reducing online shopping uncertainty through smart sizing and virtual try-on
Reducing online shopping uncertainty through smart sizing and virtual try-on
A UX redesign of the H&M mobile shopping experience that combines personalized size recommendations with AR-powered outfit visualization to help shoppers make more confident purchase decisions.A UX redesign of the H&M mobile shopping experience that combines personalized size recommendations with AR-powered outfit visualization to help shoppers make more confident purchase decisions.
A UX redesign of the H&M mobile shopping experience that combines personalized size recommendations with AR-powered outfit visualization to help shoppers make more confident purchase decisions.A UX redesign of the H&M mobile shopping experience that combines personalized size recommendations with AR-powered outfit visualization to help shoppers make more confident purchase decisions.
Tools
Tools
Figma · Canva · Microsoft Teams
Figma · Canva · Microsoft Teams
Team
Team
2 Designers
2 Designers
Project Type
Project Type
H&M Mobile App Concept
H&M Mobile App Concept
Timeline
Timeline
August 2025
August 2025
Role
Role
UX/UI Designer
UX/UI Designer
Scope
Scope
UX Research · Product Design · UI Design · Prototyping · Usability Testing
UX Research · Product Design · UI Design · Prototyping · Usability Testing
OVERVIEW
OVERVIEW
Shopping online removes two things customers rely on in-store: knowing what fits and seeing how it looks.
Shopping online removes two things customers rely on in-store: knowing what fits and seeing how it looks.
Our team explored how H&M’s mobile shopping experience could better support these decisions through two connected features:
Our team explored how H&M’s mobile shopping experience could better support these decisions through two connected features:
FIT — Style Recommender
FIT — Style Recommender
A guided sizing experience that uses body information, silhouette characteristics and fit preferences to recommend a size.
A guided sizing experience that uses body information, silhouette characteristics and fit preferences to recommend a size.
AR — Style Mirror
AR — Style Mirror
A camera-based virtual try-on experience that allows shoppers to visualize and compare styles before purchasing.
A camera-based virtual try-on experience that allows shoppers to visualize and compare styles before purchasing.
PROBLEM
PROBLEM
Buying the right clothes online still involves guesswork.
Buying the right clothes online still involves guesswork.
53.3%
53.3%
of respondents struggled with inconsistent international sizing systems.
of respondents struggled with inconsistent international sizing systems.
46.7%
46.7%
experienced confusion around different measurement units.
experienced confusion around different measurement units.
33.3%
33.3%
struggled with varying product fits.
struggled with varying product fits.
How might we help H&M shoppers understand what size to choose and visualize how an item will look before committing to a purchase?
How might we help H&M shoppers understand what size to choose and visualize how an item will look before committing to a purchase?
HMW
HMW
RESEARCH APPROACH
RESEARCH APPROACH
Testing the experience with real shopping tasks
Testing the experience with real shopping tasks
The project combined online surveys, qualitative interviews and usability testing.
The usability plan included research objectives, participants, task scenarios, data collection methods and evaluation metrics, and sessions were conducted remotely through Microsoft Teams.
The project combined online surveys, qualitative interviews and usability testing.
The usability plan included research objectives, participants, task scenarios, data collection methods and evaluation metrics, and sessions were conducted remotely through Microsoft Teams.
Participants were recruited based on experience with online clothing shopping and access to a camera-enabled phone for remote testing.
Participants were recruited based on experience with online clothing shopping and access to a camera-enabled phone for remote testing.
01
Surveys
Surveys
Quantitative behaviour
Quantitative behaviour
02
Interviews
Interviews
Qualitative feedback
Qualitative feedback
03
Usability Testing
Usability Testing
Observed interaction
Observed interaction
04
12 Participants
12 Participants
Mixed H&M + non-H&M users
Mixed H&M + non-H&M users
WHAT WE TESTED
WHAT WE TESTED
Participants were given three major tasks:
Participants were given three major tasks:
Find the correct size for a T-shirt using the body-input Fit Assistant.
Find the correct size for a T-shirt using the body-input Fit Assistant.
Try a jacket using the Live AR Try-On.
Try a jacket using the Live AR Try-On.
Complete a purchase.
Complete a purchase.
WHAT WE LEARNED
WHAT WE LEARNED
Users liked the concept, but needed more guidance.
Users liked the concept, but needed more guidance.
During testing, participants specifically asked for:
visual guidance for measurements
more tooltips and instructions
and responded positively to the ability to visualize products through AR.
During testing, participants specifically asked for:
visual guidance for measurements
more tooltips and instructions
and responded positively to the ability to visualize products through AR.
During testing, participants specifically asked for:
visual guidance for measurements
more tooltips and instructions
and responded positively to the ability to visualize products through AR.
CORE INSIGHTS
CORE INSIGHTS
✳︎ 1
✳︎ 1
Measurement needed to feel simpler
Measurement needed to feel simpler
✳︎ 2
✳︎ 2
Navigation needed to feel smoother
Navigation needed to feel smoother
✳︎ 3
✳︎ 3
New interactions needed onboarding
New interactions needed onboarding
DESIGN DIRECTION
DESIGN DIRECTION
From measurement tool to guided shopping assistant
From measurement tool to guided shopping assistant
Testing changed how we approached the solution.
Instead of expecting shoppers to understand complex measurements themselves, the redesigned experience provides multiple levels of assistance.
During testing, participants specifically asked for:
visual guidance for measurements
more tooltips and instructions
and responded positively to the ability to visualize products through AR.
During testing, participants specifically asked for:
visual guidance for measurements
more tooltips and instructions
and responded positively to the ability to visualize products through AR.
CORE EXPERIENCE - 01
CORE EXPERIENCE - 01
A clearer Size Guide
A clearer Size Guide
The redesigned product page keeps H&M’s traditional size-selection interaction but makes supporting sizing information more accessible.
The redesigned product page keeps H&M’s traditional size-selection interaction but makes supporting sizing information more accessible.
The redesigned product page keeps H&M’s traditional size-selection interaction but makes supporting sizing information more accessible.
Users can open a dedicated Size Guide containing:
Users can open a dedicated Size Guide containing:
Garment-specific measurements
Garment-specific measurements
Regional sizing
Regional sizing
Size conversion
Size conversion
Chest measurements
Chest measurements
Arm-length measurements
Arm-length measurements
CORE EXPERIENCE - 02
CORE EXPERIENCE - 02
Style Recommender
Style Recommender
Turning body information into a recommendation
Turning body information into a recommendation
For shoppers who are unsure about their size, we introduced a personalized Style Recommender directly on the product page.
For shoppers who are unsure about their size, we introduced a personalized Style Recommender directly on the product page.
During testing, participants specifically asked for:
visual guidance for measurements
more tooltips and instructions
and responded positively to the ability to visualize products through AR.
The first step asks for lightweight body information:
Preferred selection, Height, Weight, Age — optional
The first step asks for lightweight body information:
Preferred selection, Height, Weight, Age — optional
Design principle
Ask only for information that contributes to the recommendation.
DESIGNING AROUND BODY DIFFERENCES
DESIGNING AROUND BODY DIFFERENCES
Height and weight alone do not describe fit.
Height and weight alone do not describe fit.
Height and weight alone do not describe fit.
The next step allows shoppers to describe general body characteristics visually instead of entering more measurements.
The next step allows shoppers to describe general body characteristics visually instead of entering more measurements.
The next step allows shoppers to describe general body characteristics visually instead of entering more measurements.
Users can choose between:
Users can choose between:
Users can choose between:
Abdomen
Abdomen
Abdomen
Chest
Chest
Chest
Fit Preference
Fit Preference
Fit Slider
THE RECOMMENDATION
THE RECOMMENDATION
Don't give shoppers another chart. Give them an answer.
Don't give shoppers another chart. Give them an answer.
Don't give shoppers another chart. Give them an answer.
Once the inputs are complete, the Style Recommender converts that information into a direct recommendation:
Once the inputs are complete, the Style Recommender converts that information into a direct recommendation:
Once the inputs are complete, the Style Recommender converts that information into a direct recommendation:
YOUR SIZE IS M
YOUR SIZE IS M
CORE EXPERIENCE - 03
CORE EXPERIENCE - 03
Style Mirror — Exploring AR Try-On
Style Mirror — Exploring AR Try-On
After helping shoppers answer “What size should I buy?”, we explored the second uncertainty of online shopping:
After helping shoppers answer “What size should I buy?”, we explored the second uncertainty of online shopping:
“What will this actually look like on me?”
“What will this actually look like on me?”
Style Mirror was a concept exploration for bringing virtual try-on into the H&M shopping experience. The idea allowed shoppers to preview garments, switch between styles and explore combinations before purchasing.
Style Mirror was a concept exploration for bringing virtual try-on into the H&M shopping experience. The idea allowed shoppers to preview garments, switch between styles and explore combinations before purchasing.
From Product Page to Virtual Try-On
From Product Page to Virtual Try-On
The concept introduced a simple journey:
The concept introduced a simple journey:
Product Page → See it in AR → Style Mirror → Explore Styles
Product Page → See it in AR → Style Mirror → Explore Styles
Because this was an exploratory prototype, the focus was on showing how AR could fit into the shopping journey, rather than building a fully functional try-on system.
Because this was an exploratory prototype, the focus was on showing how AR could fit into the shopping journey, rather than building a fully functional try-on system.
"The exploration showed how AR could complement sizing support by helping shoppers visualize products before purchase."
"The exploration showed how AR could complement sizing support by helping shoppers visualize products before purchase."
TESTING & OUTCOME
TESTING & OUTCOME
Testing helped us simplify the experience
Testing helped us simplify the experience
Usability testing highlighted three recurring needs: clearer navigation, easier instructions, and more guidance for unfamiliar interactions.
Based on those findings, we refined the sizing flow and added clearer guidance around the AR concept.
After helping shoppers answer “What size should I buy?”, we explored the second uncertainty of online shopping:
53% → 80%
53% → 80%
Overall task success rate
Overall task success rate
REFLECTION
REFLECTION
What I learned
What I learned
This project reinforced the importance of testing unfamiliar interactions instead of assuming users will immediately understand them.
The sizing concept became stronger when we reduced the reliance on manual measurements and introduced more visual choices, while feedback on the AR concept showed the need for clearer onboarding and instructions. Users specifically reported confusion around body-input measurements and asked for more guidance.
If I continued the project, I would focus on further validating the Style Recommender and testing the AR experience with a more functional prototype before evaluating its impact on real purchase decisions.
After helping shoppers answer “What size should I buy?”, we explored the second uncertainty of online shopping:
