AR FITTING ROOM

Product Design

Accessibility Design

RGD Student Award · 2024 · Honourable Mentions in Award for Accessible Design

RGD Student Award · 2024

RGD Student Award · 2024

Indigo Design Award · 2024 · Bronze Winner in UX, Interface & Navigation

Indigo Design Award · 2024

Indigo Design Award · 2024

Team

Solo Project

Role

Product Designer

Timeline

15 Weeks

Tools

Figma, Principle, Blender

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. 

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.

And before my grandfather passed away, we went shopping, and he struggled due to the lack of accessibility at the mall. However, an even bigger issue was seeing him struggle just to try on clothes multiple times to find the right fit. That experience made me wonder if there could be a way to provide an intuitive online shopping experience—one that doesn’t require traveling to the mall or relying on a small screen for online shopping.

The Goal

Shopping should be an enjoyable experience for every individual with any condition.

The goal of this project is to enable people with mobility issues to shop for clothes with minimal inconvenience.

Solution Sketch

What if users could try on clothes in their own room?

How can I create an inclusive shopping experience that addresses accessibility challenges, such as finding the right fit without visiting a physical store or trying on clothes multiple times?

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.

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

USER TESTING: ACCESSIBILITY DEVELOPMENT 1

Why is the nav bar on the right? It is hard to tap for me as a left-handed!

This was a good point. I added 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

Image of coffee being poured into a mug

UI CONCEPT

Simple and Intuitive UI to Avoid Overwhelming Users.

The smart mirror itself is a new device, which might pose a challenge to users. The inspiration for the design comes from kiosks currently in use, such as those found in shopping malls. These kiosk screens are designed with simple buttons and minimal features, offering users an intuitive experience. Similarly, the goal was to keep the UI as simple and straightforward as possible, ensuring that users feel the device is easy to use rather than overwhelming.

PRE-SETTING STAGE

Users can customize a screen position before they start experiencing AR Fitting Room.

The device offers options for preferred hand and height and users can choose them based on their various conditions.

LET'S DO SHOPPING

It's a basically a shopping device that feels like browsing a website or mobile app.

Just like on a computer or phone, users can select clothes they want to try on, save items to a wishlist or bag, and even try them using the AR feature by tapping the AR menu on the navigation bar.

Additionally, users have the flexibility to reposition the navigation bar at any time while shopping by simply long-pressing it. While the menu bar can be preset to a lower position during the initial setup, users who prefer standing while shopping might set it higher. If they suddenly decide to sit down, they can easily readjust the menu bar to a lower position without going back to the settings page.

EXPERIENCE AR FITTING ROOM

Users Can Virtually Try On Clothes with the AR Feature.

A camera mounted on the mirror recognizes users and utilizes AR technology to display how the selected clothes look on them, directly in the reflection. Users can pose and check the fit of the clothes as if they were actually wearing them.

Additionally, just like in a video call, users can set virtual backgrounds or apply video filters to see how the outfit might look in different settings, giving them the impression of wearing the clothes while out and about.

The device also provides a feature to capture these moments as photos, allowing users to share them with friends and family. A timer option lets users step back from the mirror to strike the perfect pose before the photo is taken. Once the picture is captured, options to share image, video, information appear for easy sharing.

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.

AR Fitting Room

AR Fitting Room

Piik AI

Piik AI

HOVR Admin

HOVR Admin

JoJo

JoJo