GAP 3D Fit Viewer
GAP 3D Fit Viewer
A UX case study of how GAP Inc. helped reduce fit issues with a 3d fit finder viewer that helped reduce returns.
A UX case study of how GAP Inc. helped reduce fit issues with a 3d fit finder viewer that helped reduce returns.
This problem was faced across Gap Inc. portfolio
Post metrics after the re-design
120 M
Interactions
20.3 %
Increase in visit
80%
CTR
//
Overview
Online return are a real problem. $ 3B Loss every year
Timeline
2021-2024
Overview
Online apparel returns are often driven by poor fit, especially in categories like denim. To address this, Gap Inc. integrated Drapr’s 3D fit technology across its brands. I worked on adapting the tool specifically for Old Navy’s Denim line, transforming it from a shirt-fit viewer into a denim-specific experience. The goal was to help customers visualize fit more accurately and reduce hesitation around size — ultimately driving down return rates and boosting purchase confidence.
Online apparel returns are often driven by poor fit, especially in categories like denim. To address this, Gap Inc. integrated Drapr’s 3D fit technology across its brands. I worked on adapting the tool specifically for Old Navy’s Denim line, transforming it from a shirt-fit viewer into a denim-specific experience. The goal was to help customers visualize fit more accurately and reduce hesitation around size — ultimately driving down return rates and boosting purchase confidence.
Role
As a Technical Product Designer, I adapted Drapr’s 3D fit viewer which was originally built for shirts—and optimized it for the denim buying experience on Old Navy’s platform. I designed the UX flow, collaborated on 3D asset optimization, and ensured the tool addressed denim-specific fit concerns like thigh, calf, and inseam.
As a Technical Product Designer, I adapted Drapr’s 3D fit viewer which was originally built for shirts—and optimized it for the denim buying experience on Old Navy’s platform. I designed the UX flow, collaborated on 3D asset optimization, and ensured the tool addressed denim-specific fit concerns like thigh, calf, and inseam.
Timeline
2021-2024
Overview
Online apparel returns are often driven by poor fit, especially in categories like denim. To address this, Gap Inc. integrated Drapr’s 3D fit technology across its brands. I worked on adapting the tool specifically for Old Navy’s Denim line, transforming it from a shirt-fit viewer into a denim-specific experience. The goal was to help customers visualize fit more accurately and reduce hesitation around size — ultimately driving down return rates and boosting purchase confidence.
Role
As a Technical Product Designer, I adapted Drapr’s 3D fit viewer which was originally built for shirts—and optimized it for the denim buying experience on Old Navy’s platform. I designed the UX flow, collaborated on 3D asset optimization, and ensured the tool addressed denim-specific fit concerns like thigh, calf, and inseam.
//
Context
What was the problem. Underlying problem
Sizing Issue
40% of online apparel returns are due to sizing issues
Inconsistent size
Inconsistent sizing across diff products within the same brand.
Difficulty in finding soze
Customers often guess their size, leading to disappointment
Denim wash issues
Denim fit, wash, and length remain a mystery until delivery
Sizing Issue
40% of online apparel returns are due to sizing issues
Difficulty in finding soze
Customers often guess their size, leading to disappointment
Inconsistent size
Inconsistent sizing across diff products within the same brand.
Denim wash issues
Denim fit, wash, and length remain a mystery until delivery
//
CURRENT LIMITATION
Limitation of the Existing Shirt Viewer
Too many questions
Lack of guidance on avatar customization
Difficulty adjusting the avatar visually
Limited Inputs
Only accepted chest and height data which is not sufficient for accurately simulating lower body garments like jeans.
Too Many Screens
Avatar setup was spread across multiple steps, adding friction and making the process feel tedious.
Outdated UI
The shirt viewer UI was designed for an older version of Old Navy’s website, making it visually and functionally inconsistent with the current brand experience.
Heavy Backend Simulation
For denim, the logic needed optimization. Only one size up and down would be simulated per avatar.
This version served its purpose for shirts but wasn’t ready for denim which is a category that requires greater personalization, smarter simulation, and intuitive UI.
This version served its purpose for shirts but wasn’t ready for denim which is a category that requires greater personalization, smarter simulation, and intuitive UI.
This version served its purpose for shirts but wasn’t ready for denim which is a category that requires greater personalization, smarter simulation, and intuitive UI.
//
USER RESEARCH
Conducted User Interviews. Ship with confidence.
Conducted User Interviews. Ship with confidence.
Conducted User Interviews. Ship with confidence.
Brief overview
Before designing the denim-specific 3D fit experience, we conducted 50+ user interviews and usability sessions with male shoppers aged 25–45. At the time, there was no virtual fitting tool available for denim, which gave us a clean slate to understand the frustrations, gaps, and expectations users had around buying jeans online.
These insights directly informed the design of our denim 3D fit viewer.
Brief overview
Before designing the denim-specific 3D fit experience, we conducted 50+ user interviews and usability sessions with male shoppers aged 25–45. At the time, there was no virtual fitting tool available for denim, which gave us a clean slate to understand the frustrations, gaps, and expectations users had around buying jeans online.
These insights directly informed the design of our denim 3D fit viewer.
//
Testimonials
What did the user say? a clear feedback.
There are so many fits — straight, slim, taper and the photos all look similar. I can’t tell what the real difference is.
Derrick, 38
Senior Engineer
Let me compare two sizes visually. If I can’t see what sizing up or down does, I’ll still end up ordering both.
Get the exact answer with line numbers and context. My productivity has skyrocketed.
For jeans, I always care about the taper. I want to see how it narrows — not just front-on, but side and back too.
A size suggestion is fine, but I also want to know why. Show me what part of the fit that size is based on.
Ethan R
Devops
No more wading through irrelevant completions.
The shirt viewer was okay, but denim is trickier. I’d need more control — like adjusting calf or inseam length.
Emma Larsson
Full-stack Developer
The tool should account for stretch denim vs rigid? I’ve had jeans that fit totally different even in the same cut.
The privacy-first approach gives me peace of mind.
There are so many fits — straight, slim, taper and the photos all look similar. I can’t tell what the real difference is.
Derrick, 38
Senior Engineer
The shirt viewer was okay, but denim is trickier. I’d need more control — like adjusting calf or inseam length.
Emma Larsson
Full-stack Developer
A size suggestion is fine, but I also want to know why. Show me what part of the fit that size is based on.
Ethan R
Devops
Get the exact answer with line numbers and context. My productivity has skyrocketed.
The privacy-first approach gives me peace of mind.
For jeans, I always care about the taper. I want to see how it narrows — not just front-on, but side and back too.
Let me compare two sizes visually. If I can’t see what sizing up or down does, I’ll still end up ordering both.
The tool should account for stretch denim vs rigid? I’ve had jeans that fit totally different even in the same cut.
No more wading through irrelevant completions.
There are so many fits — straight, slim, taper and the photos all look similar. I can’t tell what the real difference is.
Derrick, 38
Senior Engineer
For jeans, I always care about the taper. I want to see how it narrows — not just front-on, but side and back too.
The shirt viewer was okay, but denim is trickier. I’d need more control — like adjusting calf or inseam length.
Emma Larsson
Full-stack Developer
Let me compare two sizes visually. If I can’t see what sizing up or down does, I’ll still end up ordering both.
A size suggestion is fine, but I also want to know why. Show me what part of the fit that size is based on.
Ethan R
Devops
The tool should account for stretch denim vs rigid? I’ve had jeans that fit totally different even in the same cut.
Get the exact answer with line numbers and context. My productivity has skyrocketed.
No more wading through irrelevant completions.
The privacy-first approach gives me peace of mind.
//
UX RESEARCH
Research Findings
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Denim Fit Feels Unpredictable
Users Don’t Know Their Measurements
Returns Create Hesitation
Fit Expectations Vary by Body Zone
Observation: 42/50 participants said sizing felt inconsistent across denim styles (slim, tapered, straight) — even within the same brand. Past purchases offered little confidence for future buys.
Denim Fit Feels Unpredictable
Users Don’t Know Their Measurements
Returns Create Hesitation
Fit Expectations Vary by Body Zone
Observation: 42/50 participants said sizing felt inconsistent across denim styles (slim, tapered, straight) — even within the same brand. Past purchases offered little confidence for future buys.
//
INFORMATION ARCHITECTURE
Initial user flow created
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Brief overview
Based on insights from over 50 user interviews, we designed an initial user flow that prioritized clarity, personalization, and ease of decision making. Users expressed a need for visual confidence, minimal friction, and the ability to compare fit dynamically. This flow was crafted to reflect that which gave shoppers the freedom to adjust their avatar, explore size variations, and make confident denim purchases, all without guesswork.
Brief overview
Based on insights from over 50 user interviews, we designed an initial user flow that prioritized clarity, personalization, and ease of decision making. Users expressed a need for visual confidence, minimal friction, and the ability to compare fit dynamically. This flow was crafted to reflect that which gave shoppers the freedom to adjust their avatar, explore size variations, and make confident denim purchases, all without guesswork.
//
Use cases
Design solution
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Choose Height
Choose Waist
Adjust Avatar
3D Fit Showcase
Choose Height
In this step user will choose their own height mentioned in inches. There is a carousel to toggle between the size pool. 3D window at the right will showcase live the height changes.
Choose Height
Choose Waist
Adjust Avatar
3D Fit Showcase
Choose Height
In this step user will choose their own height mentioned in inches. There is a carousel to toggle between the size pool. 3D window at the right will showcase live the height changes.
export function validateEmail(email: string): boolean { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return regex.test(email) } export function validatePassword(password: string): boolean { // ⚠️ Error: 'lenght' is not a property of string if (password.lenght < 8) { // ← Ligne 8 avec erreur return false } return /[A-Z]/.test(password) && /[0-9]/.test(password) }
Debugging and refactoring
Find bugs instantly with precise error detection. Refactor confidently with AI that understands dependencies across your entire codebase. Zero broken imports.
import Stripe from 'stripe' const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: '2023-10-16' }) // AI suggestion: Add webhook handler export async function createPaymentIntent(amount: number) { try { const paymentIntent = await stripe.paymentIntents.create({ amount: amount * 100, // Convert to cents currency: 'usd', automatic_payment_methods: { enabled: true } }) return { clientSecret: paymentIntent.client_secret } } catch (error) { // Ghost text: Handle Stripe errors properly throw new Error(`Payment failed: ${error.message}`) } }
API integration
Connect to any API in minutes. Exact generates type-safe requests, handles authentication, and suggests error handling—all tailored to your API documentation.
import { validateEmail, hashPassword } from '../utils/auth' describe('Authentication', () => { describe('validateEmail', () => { it('should accept valid email addresses', () => { expect(validateEmail('user@example.com')).toBe(true) expect(validateEmail('test+tag@domain.co.uk')).toBe(true) }) it('should reject invalid email addresses', () => { expect(validateEmail('invalid')).toBe(false) expect(validateEmail('@example.com')).toBe(false) }) }) // AI suggestion: Add test for password hashing describe('hashPassword', () => { // Ghost text suggestions... }) })
Testing & CI/CD
Write tests faster with AI-generated test cases. Set up CI/CD pipelines with precise configuration. Ship with confidence, every time.
Brief overview
Based on insights from over 50 user interviews, we designed an initial user flow that prioritized clarity, personalization, and ease of decision making. Users expressed a need for visual confidence, minimal friction, and the ability to compare fit dynamically. This flow was crafted to reflect that which gave shoppers the freedom to adjust their avatar, explore size variations, and make confident denim purchases, all without guesswork.
Brief overview
Based on insights from over 50 user interviews, we designed an initial user flow that prioritized clarity, personalization, and ease of decision making. Users expressed a need for visual confidence, minimal friction, and the ability to compare fit dynamically. This flow was crafted to reflect that which gave shoppers the freedom to adjust their avatar, explore size variations, and make confident denim purchases, all without guesswork.
//
V1 Feedback
User feedback for v1. a clear feedback.
I liked being able to compare the fit between sizes. Seeing the jeans get baggier at the bottom as I adjusted the length gave me a better idea of what to expect. I wish more websites did this.
Derrick, 38
Senior Engineer
Let me compare two sizes visually. If I can’t see what sizing up or down does, I’ll still end up ordering both.
Get the exact answer with line numbers and context. My productivity has skyrocketed.
I liked seeing how the jeans fit, especially around the thighs and calves. But I didn’t know how tight or relaxed is supposed to feel. Those labels could use more explanation.
A size suggestion is fine, but I also want to know why. Show me what part of the fit that size is based on.
Ethan R
Devops
No more wading through irrelevant completions.
It was cool to see how the fit changes with size and length, that helped. But I still wasn’t sure if I should rely on this recommendation, because it didn’t match what I usually buy.
Emma Larsson
Full-stack Developer
The tool should account for stretch denim vs rigid? I’ve had jeans that fit totally different even in the same cut.
The privacy-first approach gives me peace of mind.
I liked being able to compare the fit between sizes. Seeing the jeans get baggier at the bottom as I adjusted the length gave me a better idea of what to expect. I wish more websites did this.
Derrick, 38
Senior Engineer
It was cool to see how the fit changes with size and length, that helped. But I still wasn’t sure if I should rely on this recommendation, because it didn’t match what I usually buy.
Emma Larsson
Full-stack Developer
A size suggestion is fine, but I also want to know why. Show me what part of the fit that size is based on.
Ethan R
Devops
Get the exact answer with line numbers and context. My productivity has skyrocketed.
The privacy-first approach gives me peace of mind.
I liked seeing how the jeans fit, especially around the thighs and calves. But I didn’t know how tight or relaxed is supposed to feel. Those labels could use more explanation.
Let me compare two sizes visually. If I can’t see what sizing up or down does, I’ll still end up ordering both.
The tool should account for stretch denim vs rigid? I’ve had jeans that fit totally different even in the same cut.
No more wading through irrelevant completions.
I liked being able to compare the fit between sizes. Seeing the jeans get baggier at the bottom as I adjusted the length gave me a better idea of what to expect. I wish more websites did this.
Derrick, 38
Senior Engineer
I liked seeing how the jeans fit, especially around the thighs and calves. But I didn’t know how tight or relaxed is supposed to feel. Those labels could use more explanation.
It was cool to see how the fit changes with size and length, that helped. But I still wasn’t sure if I should rely on this recommendation, because it didn’t match what I usually buy.
Emma Larsson
Full-stack Developer
Let me compare two sizes visually. If I can’t see what sizing up or down does, I’ll still end up ordering both.
A size suggestion is fine, but I also want to know why. Show me what part of the fit that size is based on.
Ethan R
Devops
The tool should account for stretch denim vs rigid? I’ve had jeans that fit totally different even in the same cut.
Get the exact answer with line numbers and context. My productivity has skyrocketed.
No more wading through irrelevant completions.
The privacy-first approach gives me peace of mind.
//
Design Variation
Turning User Insight Into Intuitive Design for V2
Size Explanation
Almost all clicked on it naturally out of curiosity, even if the size recommendation was in line with what they generally wear.
Size Explanation
Almost all clicked on it naturally out of curiosity, even if the size recommendation was in line with what they generally wear.
Fit Descriptors
Participants knew to click on the question mark to see additional information and appreciated the added clarity of what fitted, loose, and relax mean.
Fit Descriptors
Participants knew to click on the question mark to see additional information and appreciated the added clarity of what fitted, loose, and relax mean.
Measurement UX
Users felt more confident entering exact measurements than relying on visual estimation alone.
Measurement UX
Users felt more confident entering exact measurements than relying on visual estimation alone.
Measurement UX
Users felt more confident entering exact measurements than relying on visual estimation alone.
//
Metrics
V2 Post release metrics
120 million interactions, a 20.3% increase in visits, and an 80% rise in click rates across all devices
After launching the denim fit viewer, we conducted multiple rounds of user testing, A/B experiments, and usability studies to evaluate its impact. Our goal was to understand how the tool influenced user confidence, engagement, and purchase behavior and identify opportunities for further refinement.
//
Conclusion
Reflections. I got answers.
Key Outcomes
What I learned
Next steps