uniqlo ar fitting room app

Brief

Uniqlo, an international fashion retailer based in Japan, provides high quality, performance- enhanced basic casual wear at affordable prices for men and women.

Note: This is not affiliated with Uniqlo. This is a concept project done under General Assembly to practice and refine UX skills.

As part of their effort to make well-fitting and functional clothing accessible to everyone, Uniqlo wants to release an augmented reality fitting room that will allow users to try on anything currently in store from their mobile app.

 

Team: Christine Le, Maral Habeshian, Matt Phan, Jade Vasun

My Role: co-project manager, lead user researcher, documenter, brand research and style guide, competitive & comparative analysis, persona creation, usability testing

Tools: Sketch, Google App (Forms, Sheets, Docs), Pen, Paper, Invision, Whiteboard, Marvel

Duration: 3 weeks

 
 
ux process.png
 

Research


Augmented Reality (AR):

To implement an AR Fitting Room, we first had to understand the concept and principles of the technology. Based on our online research and interviews with AR developers/experts, we determined for our project that augmented reality is to take a 3D model and place it in the real world environment through our device.

Competitive & Comparative (C&C) Analysis:

We researched Uniqlo and their direct competitors to discover the types sizing features each brand offers from mobile app. I synthesized the team’s research and gained the following insights: Unqilo offers many features to help online shoppers determine size and look, however Zara and Bershka offer an interactive sizing feature. The release of an AR fitting room will help Uniqlo reach their business goal, to lead the way for retail innovation and increase online sales. We also researched analogous competitors who have incorporated AR into their mobile app to help us ideate.

 

                                   Direct competitors

                              Analogous competitors

 

User Interviews:

I created a survey screener via Google Forms and received 36 responses. Out of the 36 responses, 31 people matched our target market (people age 20-40 who have ordered and returned clothing online in the past 6 months). 12 out of the 31 agreed to interviews. To remind the team of our interview goals and ensure consistent information, I developed a user interview script.

I interviewed 3 people to understand shopping preferences, reasons for returns, and decision making factors.

 
I shop online to avoid the crowds. Plus there are more options available.
— Natalie
I usually return clothes due to sizing, but it’s such a hassle to return things.
— Josh
 

Data Synthesis

I led the team thru affinity mapping to discover patterns based off the data from user interviews.  

Key insights:

  • Returns occur due to sizing or item is not as expected
  • Users shop online for tops, but shop in store for bottoms (measurements vary between brands; more difficult to find perfect fit)

A persona was generated to embody our target audience based on user interviews.

We mapped out Izabella’s emotional response in a user journey map  while going through the current Uniqlo mobile app to see what area to focus on. We observed Izabella became most frustrated and unsure on the product detail page when selecting her size. Because Izabella did not have a strong affirmation on fit and size, she guesses, and eventually has to return the item due to sizing, leaving her disappointed.

 

                                          Persona

                              Izabella's Journey Map

 
 

ideation


Feature Prioritization:

We brainstormed different ways to solve each pain point. Ideas were inspired from our analogous competitive analysis. We narrowed our features that best solved each pain point. This would be our hypothesized minimum viable product (MVP)

feature prioritization.png

Design Studio

Each team member sketched different designs for each screen and presented the user interactions. We then combined the best design concepts and formed one our ideal wireflow.

 
 
 

Prototyping & Testing


We did 3 rounds of prototyping and testing with each iteration resulting in a more refined design. To validate our design, we tested each prototype guided by my usability test plan. This guideline helped my team gather consistent data.

Low Fidelity Prototype: 

To test our MVP and determine a baseline for our user interface, we started with a low fidelity paper prototype. We used Marvel to make the paper prototype clickable on mobile.

It was difficult for users to imagine an AR screen and the intended interactions thru paper and tap only gestures. However, we learned how users interact with a mobile screen. We realized our user didn’t mind inputting their measurements, but they didn't like the amount of pages. Insights can be read in the annotations below.

low fi.png

Medium Fidelity Prototype

From our usability testing, we were able to further reiterate and refine our application to create a digital prototype. Some changes we made were:

  • The removal of the option menu, and age input.
  • The addition of a 'back/skip’ button, a 'Uniqlo' indicator at the top center, an automatic tooltip for recommendations, a skin tone adjuster to the avatar, and added the a clear ‘add to bag’ call to action
  • We also cleaned up the icons and its functions
  • We condensed some the pages to make the avatar creation shorter
med fi.png

High Fidelity Prototype 

We took a lot away from this round of testing and was able to tighten up the overall look and feel. A few things we changed were:

  • Adding a progress breadcrumb

  • Making skip and continue option less ambiguous
  • Remove the recommended clothing swap icon button
  • Relocated the back button and other UI aspect for more consistency

The final result can be seen below. Click thru the prototype! 

Reflection

As my first ux team project at General Assembly, collaboration and constructive feedback was essential in the creation of our successful solution. I learned to clearly communicate my ideas with supporting grounds and mediate discussions. It was a challenge to understand how to design a proper AR feature, but AR designers and developers were inclined to answer any questions we had. When it came to selecting UI icons we used our best judgment and best knowledge of conventional standards, however, performing an iconography test would have been more time efficient  Overall, this project allowed me to grow as a designer and team member.