hand holding an iphone showing tailoar screen

Designed and launched the next version of an Augmented Reality body measurement app

Project type

Product design

Product type

Mobile app

Client

TailoAR

Timeline

April - November 2020

Team

Product manager
Product designer
UX Researcher
Software engineer

My role

Product designer & UX researcher

TailoAR

A mobile app that uses Augmented Reality and point-to-point measurement technology to simulate the experience of going to an actual tailor.

During my time working at Tailoru, a design collective in New York City,
I collaborated with a software engineer and a project manager
to design and launch the upgraded version of this app.

Problem statement
"I don't know my size."
People are discouraged to order tailored handmade clothings or shop for pre-made clothes online
because they don't know their accurate body measurements.
‍
How can we
help customers measure themselves without going to an actual tailor?
measuring a man wearing a suit
Introducing TailoAR
A mobile application aims to help users take body measurements by themselves.
Redesigning process
TailoAR redesign process
DISCOVER + DEFINE
Previous research data shows that users are hesitant about using a smartphone to measure their bodies
“I don’t know how to hold a phone to measure my body.”
“I am not sure if the measurement is correct.”
“Can I do this alone?”
The first app version was confusing for users to use
tailoar 1 measuring instruction screen
Measure screen with instruction
error icon
The illustration does not resemble a real human body.
The text instruction is vague.
tailoar 1 measuring screen
Measure screen
error icon
The instruction disappears once users start measuring, causing a lot of user's memory load to figure out how to measure.
tailoar 1 measuring screen with menu open
Measure screen with navigation
error icon
It's difficult to navigate through the app because of the unclear function of each button.
Ideate + prototype
My initial approach to fix the app
Add more details
to the measuring instruction text
Before
‍
Choose two points across your back between the far left and far right shoulders.
After
‍
Choose 2 points on the far left and far right shoulders. Place the phone at the point and tap on the screen.
Use a more human-like illustration
tailoar 1 measuring instruction screen
Before
tailoar screen with a new illustration
After
Provide more user guidances
tailoar screen for video instruction
Video instruction explains how the app functions
tailoar screen for measurement diagram
Explanations of how to correctly measure each body part
Improvements for the measuring flow
Keep instruction visible throughout the measuring flow
tailoar new screen shoulder measuring instruction
Starting screen
tailoar new screen shoulder measuring instruction
Step 1 to measure
tailoar new screen shoulder measuring instruction
Step 2 to measure
tailoar new screen shoulder measuring instruction
Measuring result
Provide reference for measuring results & warnings for failed measurements
tailoar 1.2 measurement reference
user Testing
Testing the design approach for fixing the first app version
user research plananalyzing research data
Testing method

Moderated user testing

Tools

Google hangouts, Google docs, Otter.ai, Miro

Participants

7 people, 4 women, 3 men

Findings

Users value trust and accuracy

71%

of users prioritize accuracy over ease of use

85%

users demand more instructions for phone holding & self preparation before measuring

User quotes
"It tells me to put the phone on my shoulder, but how? face up or face down?"
"Measure each part twice would make me feel more confident about the accuracy."
"Having the option to only do a few measurements (instead of 11) would have been really good."
Iterate
More improvements to bring out comprehensive solutions.
Onboarding sets users up for successful measurements by instructing them to prepare before measuring
tailoar 1.3 measuring guide
This is some text inside of a div block.
tailoar 1.3 measuring guide
This is some text inside of a div block.
New video instruction shows in details
how to hold the phone properly to measure
tailoar 1.3 video instruction
This is some text inside of a div block.
New improvements for measuring flow let users measure a body part twice
tailoar 1.3 - shoulder measurement instruction
A more succinct instruction text
tailoar 1.3 - shoulder measurement instruction
Illustration is enlarged
tailoar 1.3 - shoulder measurement instruction
User can measure a body part twice and be informed about the status by by looking at the progress bar on top.
tailoar 1.3 - shoulder measurement instruction
Measuring result
Enhance user control and freedom
new improvement on screen
tailoar 1.3 pop-up menu screen
Easy access to app instruction from the burger menu
‍
Users have the freedom to check results and edit them
tailoar 1.3 measurement diagram screen
Allow users to choose the body part they want to measure
What’s next?
Increase measurement accuracy using machine learning
In order to fully gain trust from the users, we want to make sure that TailoAR app gives precise body measurements that can satisfy tailoring demands.

Our next step is to build a machine learning model that can help our users to double check the accuracy of their measurements based on their provided information.
Improve the measuring experience
We are planning to create a more intuitive measuring experience by
1. Using audio and video instruction for each measuring part
2. Allowing user to create account to save their account information and keep track of measurement history
Make the app more inclusive
The app currently targets female users so we use the illustration for a female body. In the future, we will try to use a more gender neutral illustration to serve a larger group of users.
What I learned from this project
The significance of User Experience
By participating this project - one of my first UX projects, I came to understand the significance of the human factors in designing products.

I was also made aware of the vital role of a good user experience in facilitating human’s trust and confidence in allowing technology to become an effective tool for our life.
‍
This project immensely enhanced my knowledge and experience and solidified my career decision as a UX designer.
How a good design decision is formed
The decision for each change in product relies heavily on how the users react to it.

Being a part of user testings and interviews brought me a clearer purpose for each design decision. I learned that in order to select the right solution, I need to go with the option that effectively helps users achieve their goals.
Collaboration with software engineer
Working in a team of cross functional members requires a lot of communication and synchronization.
‍
After the software engineer launched his code, the application did not look exactly like what I designed. I realized that just sending the design file to him was not enough to accurately translate all my design intentions.

After much more communication, I found a better way to show the engineer my design and effectively explain all the changes for the new version.
Thanks for visiting. Let's get in touch!
thisishailee1@gmail.com
About me
My resume
© Hailee Hoa Luong 2024