A virtual fitting room that allows H&M shoppers to try on items virtually.
Project Overview
The AR Fitting Room is a virtual fitting room which allows users to pick out clothing and try them all out virtually. This project is built on the most sophisticated technologies: Augmented reality and 3D scanner using laser based technology. Augmented reality enables the customers to select a piece of clothing without having to try it on physically. As a customer, you see yourself on-screen with a 3D copy of a dress. A 3D scanner is used to take a scan of a body and suggest the best suitable size. Then they can apply their choice of attire on a screen, letting them quickly check out how a piece of clothing looks on them.
Details
Deliverables
Mobile app
Duration
Nov 2020- Dec 2020
Role: UX/UI designer, I worked on implementing AR feature on existing app.
Responsibilities: Research, sketching & brainstorming, prototyping, accounting for accessibility and iterating on designs.
Note: This is not affiliated with H&M. This is just a concept project done under The Interaction Design Foundation to practice and refine UX skills.
Tools
Figma
Adobe photoshop
Adobe Illustrator
3D Sketchup
Problem
I came across many articles about how the clothing industry saw a major decline in retails sales. H&M announced that it is closing 170 stores, resulting in a net decrease of 40 stores. The company said it is now focusing more on its online business to reflect changing consumer shopping habits.
"H&M’s March Sales Fall 49% Amid Covid-19 Outbreak"
"Shopper calls out H&M for sizing issues"
“We’re trying to understand the future of fashion retailing, H&M knows that technology will play an increasingly important role in the future."
Why Augmented Reality?
A virtual fitting room is a type of technology that allows shoppers to try on items virtually.
one article shows- What are Virtual Fitting Rooms and Why Should Retailers Use Them?
It’s predicted that the global virtual fitting room market will grow from $3 million in 2019 to $6.5 million by 2025. That’s a compound annual growth rate of 13.44%.
User Research
Analytics
Before preparing the survey, I start looking for any data points regarding online clothing and I found H&M Top reasons for returns:
77% of reasons for return are related to Size and Look
Size too small: 30% | Size too large: 22% | Changed my mind: 12%
Style: 8% | Not as described: 5% | Defective: 5%
Other or not specified: 18%
Size too small: 30% | Size too large: 22% | Changed my mind: 12%
Style: 8% | Not as described: 5% | Defective: 5%
Other or not specified: 18%
Survey
Results
- Most of our participants were female between 26–44
- Most favorite brands are Zara, H&M and Uniqlo.
- The main criteria for buying online clothes are Price, Style Size & Fit
- The main reason for retuning online clothes is split between size and Doesn’t look good on me
Competitive Analysis
I researched H&M and their direct competitors to discover the types sizing features each brand offers from mobile app. I synthesized the following insights: H&M offers many features to help online shoppers determine size and look, The release of an AR fitting room will help H&M reach their business goal, to lead the way for retail innovation and increase online sales. I also researched analogous competitors who have incorporated AR into their mobile app to help me ideate.
To better understand the online sizing stand in the current market, I looked into the existing solutions and I found two main categories:
Comparison of functionality within competitors
Analogous Competitors
User Persona
Following user research and to better empathize with users, I created one persona to remind me of who my users are and the goals and needs that I need to solve.
Feature Prioritization
I brainstormed different ways to solve each pain point. Ideas were inspired from the analogous competitive analysis. I narrowed the features that best solved each pain point. This would be my hypothesized minimum viable product (MVP).
Sketching
I sketched different designs for each screen and presented the user interactions. Then I combined the best design concepts and formed one Ideal wire flow.
Prototyping
Takeaways
What I learned:
1. While designing the AR feature, I learned about Human guidelines for Apple's ARkit and how to use it while designing.
2. I learned more about UI design-typography, design style from H&M brand app.
3. During my primary research method It was important how to prepare survey and find insights.
3. I developed my skills in Figma prototyping animation.
Next steps:
1. Create a movie video in real life environment for better understanding.
2. Usability study and findings to add more features.
