UI/UX Design | App | Research |  Principle | Sketch

3D Virtual Dressing Room

 

“I don’t like getting in a long line to try on clothes, especially in winter, people just wear too many clothes, and it’s very inconvenient.”
 

“I sometimes buy clothing online, but only brands I have bought before because I know the exact size. If there are some suitable recommendations  based on different brands, I will use it!”
 

“I had this image in my mind of what the pants would look like and got on a waiting list for them.  When they finally arrived they were 6 inches too short and looked like cheesy capris from the 90s. I was very disappointed and still had to pay to ship.

Overview

Dressing room is a virtual try-on app designed to give users more confidence in their online clothing purchases.

Online shopping always has the frustration and guesswork involved in wasting money and time shipping returned items.

 

The project aims to create a customized 3D model of each user, based on their real-life measurements allows them to try on clothes from our partner retailers.

The users can judge the fit on their own body types instead of extrapolating from the pictures on the website, sort items by the degree of preference, and try on multiple items simultaneously—even from different retailers. 

My Role

  • Planning and scoping research study

  • Analyzing the competitive market (direct & indirect competitors)

  • Writing interview scripts (1 for user interviews, and 1 for onsite interviews)

  • Recruiting and scheduling user interviews 

  • Facilitating 1:1 user interviews (4 one-on-one user interviews)

  • Coming up with various research methods that fit current situations. ex. Participatory action research activities, onsite interviews, observational studies...etc

  • Developing and presenting the final report (Tool: Sketch & Powerpoint)

Process

Context study

User pain points

Competitive analysis

Problem statement

Persona

Executive summary

Feature narrative

Design inspiration

Journey map UX flow

Low-fidelity wireframes
High-fidelity wireframes

Interactive prototypes

User Testing

Interviews

Group discussion

Iteration

Details fixing

Final presentation

 

Research Stage

Context Study

Buying clothes online adds a level of convenience. If you go to the store, you might have to wait on people or find a salesperson to unlock the door and count your items, and they might ask you how it’s going and try to bring you other things to try on. But there are risks to solving that by ordering online. You might get something that is not what you envisioned, and it can be daunting to face the uncertainty involved.

Forrester reports the return rate for apparel purchased online is 20%. Expensive items can hit 50%. Brick-and-mortar stores: 10%.

User Pain Points

We created an interview protocol designed to give us a framework for consumer experiences with purchasing clothes online:

both what users thought could be improved about existing processes, and why people may choose not to buy clothes online.

 

The following are the core problems this product aims to solve:

  • Delay: Waiting for an order to be filled and shipped can take anywhere from a few days to a few weeks.

  • Uncertainty/Risk: Brand differences, lack of consistent standards for clothing sizes, and other quirks about fit can make determining the best size less than straightforward. Material and feel are also more difficult to judge.

  • Lack of cohesion: It can be hard to tell how an individual piece will work with already-owned items.

  • Returns: If retailers do not offer in-store returns for items purchased online, or for online-only retailers, the initial shipping cost is absorbed by the customer, and return shipping is not always free.

Competitive Analysis

 

Analysis

Problem Statement

Buying clothes online involves the risks and guesswork, and how to purchase correct size and satisfied clothes online need improvements.

Persona

In our first round interview,  we focused on two Research Questions: 
1. How do people compare the experiences of shopping online and in stores?
2. What kind of information do people need to make decisions about purchasing clothes online?

Feature Narrative

Early Brainstorming Activities on feature narrative

Ideation

Design Inspiration

 

We conducted a survey to explore more problems that people have met online shopping. 14 potential features were provided for participants to be ranked in an order according to their desirability.

We found 8 features that were described with the most interest:

 

1. Sizing recommendations that account for differences in brands.

2. Filtering options (by color, item type, brand, etc).

3. Ability to make manual adjustments for further customization of your body type and dimensions.

4. Input numerical values for your known measurements when creating an avatar (e.g. height, waist size).

5. Links to purchase saved items.

6. Save items you like to a wishlist.

7. An initial style quiz to indicate your preferences.

8. Having access to a tool that can scan and input your measurements for you .

Executive Summary

Users could either scan the QR code from a laptop or desktop browser to open an item in the Dressing Room application or click a link if they are already in a mobile browser. Each item also has a recommended size feature, based on our brand-specific data, users’ specified fit preferences (given in an initial style quiz), and their measurement data. This helps users’ decisions and purchases reflect how they want their clothes to fit their body and takes into account the way each brand approaches sizing.

Information Architecture

​The first version of Flowchart

​The Flowchart of Dressing Room

 

Design

Low-Fidelity Prototype

Mid-Fidelity Prototype

We used the High-Fi design to do an interactive prototype and usability testing.

We set nine main tasks for users:

1. The function and navigation of Quiz

2. The accessible of scanning the body

3. The accessible of inputting manually

4. The accessible of scanning items to a virtual dressing room

5. The dressing room buttons

6. The meaning of closet in the dressing room

7. Move items around

8. Look-up the “History” function

9.Collection function

 

At last, we conducted SUS analysis to evaluate the satisfaction of design.

 

The 1st version of Collection page

The 2nd version of Collection page

The 3rd version of Collection page

Ideation of thought bubble for Maybe button inspired us. In the 3rd version, we also linked the item picture out to the retail site so users can purchase from their in-app collection without having to navigate back to an item manually later.

 

Note that the buttons are now rectangular instead of elliptical, and it looks cleaner. Any screens not pictured from Round 1 did not have changes made between the first two rounds of testing.

The 1st version of Scanning page

The 2nd version of Scanning page

The 3rd version of Scanning page

Because skipping the measurement input confused users in the first round, we added a button to show that both were camera functions. This also gave us the opportunity to associate the icon we used for adjusting measurements with the measurement input process early on, which adds an extra visual cue to its meaning. However, users still did not understand what the measurement input via camera meant.

The 1st version of Trying on process

The 2nd version of Trying on process

The 3rd version of Trying on process

After scanning the item, we shrunk our options menu to a drawer-like overlay that pops up when an item is selected and highlights the item the user is currently trying in the first and second versions. This allows users to maintain a sense that they have not left the dressing room.

 

According to user testing results, we found that users tended to drag the clothing to trying on the body. Thus, we used drag rather than click to mimic trying on process.

 

Final Presentation

The welcome and quiz page

The scan body and item process

The tryingon process

The Collection page