TailoAR

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

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?

Introducing TailoAR

A mobile application aims to help users take body measurements by themselves.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

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

Measure screen with instruction

The illustration does not resemble a real human body.
The text instruction is vague.

Measure screen

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

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

Before

After

Provide more user guidances

Video instruction explains how the app functions

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

Step 1 to measure

Step 2 to measure

Measuring result

Provide reference for measuring results & warnings for failed measurements

user Testing

Testing the design approach for fixing the first app version

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

This is some text inside of a div block.

New video instruction shows in details
how to hold the phone properly to measure

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

Illustration is enlarged

User can measure a body part twice and be informed about the status by by looking at the progress bar on top.

Measuring result

Enhance user control and freedom

Easy access to app instruction from the burger menu
‍
Users have the freedom to check results and edit them

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.

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

Project type

Product type

Client

Timeline

Team

My role

TailoAR

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

Testing method

Tools

Participants

Findings

71%

85%

User quotes