AR Fitting Room
Product Design
Honourable Mentions in Award for Accessible Design
RGD Student Award · 2024
Bronze Winner in UX, Interface & Navigation
Indigo Design Award · 2024
Team
Solo Project
Role
Product Designer (UX/UI)
Timeline
12 weeks
Tools
Figma, Principle
AR Fitting Room
An Augmented Reality (AR) mirror device aimed at enhancing the online shopping experience for individuals with mobility challenges. This solution enables users to virtually try on clothing and accessories from the comfort of their homes, significantly reducing the need for offline store visits. The AR mirror combines advanced technology with a user-friendly design to offer an inclusive online shopping experience, catering specifically to the needs of those with limited mobility.
Background
Everything started with my grandfather.
He loved to be cool and fashionable, so he always enjoyed shopping for clothing until he had mobility issues because of Parkinson's disease.
THE PROBLEM
People who have mobility issues have difficulty going shopping offline.
According to Fable, 50 percent of individuals with disabilities shop online for physical products once a week. In contrast, only 22 percent of general consumers shop online with the same frequency.
People with disabilities have clear criteria for selecting an e-commerce store: accessibility, variety, and price. Accessibility was the most commonly cited factor influencing their choice of one website over another.
THE GOAL
Shopping should be an enjoyable experience for every individual with any condition.
In this project, I focused specifically on the clothing shopping category.
Solution
What if users could try on clothes in their own room?
How can I provide a legitimate online shopping experience that avoids accessibility challenges?
IDEATION: INITIAL SKETCHES
A full-body mirror with a built-in camera can provide the best online shopping service.
This potential solution offers an AR fitting room service, allowing users to try on clothes in the comfort of their own space.
IDEATION: USER FLOW & SCENARIO
Sketching out the user flow when a person stands in front of the mirror and engages with it.
The AR feature will allow users to try on clothes virtually.
Let's imagine a user interested in purchasing clothes. They might select a jacket they like and try it on virtually. However, the user may be uncertain about the fit and have no one to consult. In such situations, the recording and sharing option during the virtual fitting room experience would be helpful for users who need opinions from their family or friends about the fit.
THE CHALLENGE
The biggest challenge was measuring the size of a full-length mirror-sized screen.
A full-length mirror differs from typical digital devices due to its significantly larger interface size compared to devices available in the market. Treating design elements intended for smaller devices would result in an interface too large for practical use when implemented at full scale. The solution to this challenge was simply creating a real-size paper wireframe and measuring the correct size of the icons and buttons.
USER TESTING: ACCESSIBILITY DEVELOPMENT 1
Why is the nav bar on the right? It is hard to tap for me as a left-handed!
Adding the selection option as an initial setting page for choosing the nav bar location!
USER TESTING: ACCESSIBILITY DEVELOPMENT 2
If the menu bar moves horizontally, it should also be able to reposition vertically.
Various users' conditions might include different heights, people in wheelchairs, or people tired of standing up when using the device. For example, touching the screen when the navigation bar is positioned at the top of the interface can be uncomfortable for a user in a wheelchair. In this case, the solution could be repositioning the menu bar into a long-press button. This flexible menu bar would enable users to swipe and relocate it according to their preferences.
USER TESTING: ACCESSIBILITY DEVELOPMENT 3
The timer will help users when the users take pictures.
During the ideation phase, the need for a recording feature was identified while users have a virtual fitting room experience. Users have to tap a shoot button to take pictures, right? However, since the camera is located at the top of the device, users cannot take a proper picture of their outfit. Considering the size of the mirror, it cannot function like a phone selfie. In this case, the timer can help users take a proper picture of their outfit. Users can take a moment to step back after tapping the shoot button!
FINAL SOLUTION
SETTING PAGE
Users can choose their preferred hand and height
For customizing navigation bar locations based on their various conditions.
PRODUCT DETAILS PAGE
Users can see product list page and product detail page like the mobile app!
Also, users can adjust the navigation bar location with a long press at any time.
AR FITTING PAGE
Users can wear the clothes virtually with the background of their choice!
The AR feature is a solution for users who prefer not to visit physical stores or require assistance when they move. Users also can record videos & photos and share them with their family and friends 📸
TIMER FEATURE
The timer helps take a nice photo of the outfit.
because users need to stand a few steps behind after they tap the shoot button.
TAKEAWAY
Trying different methods helps in reaching a solution.
Throughout this project, I gained crucial insight into the role of precise size measurement in UX/UI design, particularly when applied to everyday products rather than conventional mobile screens. Creating a device like a full-length mirror required consideration of users' height, preferred hand, and gaze direction. I used various methods to find a solution, from physical to digital wireframes. It helped me find pain points while I tested them out. I learned that trying different ways can guide me to the solution effectively.