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.
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.
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)
User pain points
Journey map UX flow
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.
Buying clothes online involves the risks and guesswork, and how to purchase correct size and satisfied clothes online need improvements.
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?
Early Brainstorming Activities on feature narrative
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 .
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.
The first version of Flowchart
The Flowchart of Dressing Room
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
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.
The welcome and quiz page
The scan body and item process
The tryingon process
The Collection page