Fitzi App

The Fitzi App is a pocket-sized fitting room that allows users to virtually see how clothes fit on their bodies while in the comfort of their home, therefore streamlining the process of buying clothes online.

Role

UX designer

Project Type

Self-led project

Duration

1 month

Final App Design

Problem

Shoppers, particularly those with motor impairments or who are plus-sized, find that the online shopping experience can be disorientating, stressful, and overwhelming. They need a way to find clothes that suit their needs and be able to accurately assess how clothes will fit before arriving at their home.

Solution

The Fitzi app is more accessible to those with situational, temporary, or permanent disabilities because users won’t have to physically put on or take off clothing items. Instead, users can swipe to see another item on their body. This convenience also extends to the general public that might be too busy to shop in-store, therefore saving themselves time, money, and effort.

The Process

Empathize
User interviewsCompetitive audit
Define
User flow
Ideate & Prototype
High-Fidelity Prototype
Test
Usability testing
Empathize
Define
Ideate & Prototype
Test
User interviewsCompetitive audit
User flow
High-Fidelity Prototype
Usability testing

User Interviews

User Interview Questions
Users want a more accurate and organized online shopping experience
I started with user interviews to discover what influences users' shopping habits and what are some challenges they experience while online shopping.
I then synthesized participants’ answers into individual empathy maps to break down each interview into digestible pieces of information, and then combined shared opinions into one empathy map as a representation of my target user.
Aggregated Empathy Map
Individual Empathy Maps
These are my takeaways from the user interviews and empathy map:
Goals
  • Make fewer returns with more useful information about the product
  • Purchase clothes that suit their lifestyle
  • Find clothes that suit their style and body type
Challenges
  • Sorting through too many disorganized styles all at once
  • Limited diversity of models
  • Brands with fluctuating sizing and inconsistent product photography

Competitive Audit

Competitive Audit SlidesCompetitive Audit Report
I compared the digital try-on experience of 4 competing apps
to spot any gaps in the market and opportunities that could inspire my app design
FORMA
Virtual try-on for clothing and lookbooks
Ulta Beauty
App for Ulta store products
Perfect 365 Makeup Photo Editor
Virtual try-on for makeup and hair inspiration
Dior Makeup
Virtual try-on for Dior makeup
Gaps
  • FORMA doesn’t allow checkout within the app
  • FORMA doesn’t provide enough information on their clothes
  • Dior Makeup has a narrow range of products
  • Perfect365’s design is overwhelming and disorganized
  • GLAMlab Ulta is a feature within their Ulta app, and only provides beauty products to try-on
Opportunities
  • Allow users to purchase products in-app
  • Have less cluttered navigation and layout that allows users to organize based on their preferences
  • Focus on virtually trying-on clothes rather than having a lot of features
  • An onboarding flow to preview upcoming features
  • Make the app inclusive and catered to the user by having diverse category selections

User Flow

After getting ideas from competitors on what to incorporate into my design, I solidified my app’s user flow to define how a typical user will use the app

Usability Testing

I measured effectiveness by tracking 5 users’ experiences when they try to complete core tasks of the Fitzi app
Participants shared the following feedback:
  • Make selecting categories more obvious
  • Overall, the scanner was too fast and users didn’t realize it was automatically taking photos of them
  • Change icons to be more representative of their actions, or add labels underneath icons to clarify
High-Fidelity Prototype

High-Fidelity Prototype vs Final Design

Final Design Prompts
Key changes from the high-fidelity prototype to the final design are shown below:
Onboarding & Category Selection
Participants liked being able to preview the app's main components and thought this would make browsing clothing easier later.
Wireframe
Prototype
Final App Design
Changes
Body Scan Tool
Old Experience
1. Read introduction
2. Read instructions
3. Scan body
4. Review scan
Didn’t scroll to the second slide
Thought that the clipboard icons were clickable
Thought direction labels above scan were clickable
Didn’t understand what “Try-On Manually” meant
New Experience
I condensed the description to keep it on one page
Users liked the blue color scheme which conveyed security and said the criteria was easy to understand - “It’s nice that there are tips and an example image.”
Adding phrases for each phase of the scanner to show what part of the scan the user is on with a countdown so the user is prepared to hold still when having the scan taken, then letting the user control switching to another pose by clicking a button
Removing outlines on directions the users weren’t facing in order to not imply interactivity, and I changed "Try-On Manually" to “Retake” in case the user isn’t satisfied with their scan
Clothing Page
Participants were most confused about the door icon because they thought clicking on the door icon would open to an individual product page rather than clicking on the entire product photo. They also thought that the numbers that replaced the door icon equated to the quantity of that item rather than the total number of items added to their Fitzi Room.
Wireframe
Prototype
Final App Design
Changes
Before
After
Changes
Wireframe
Prototype
Final App Design
Changes
Fitzi Room
Users forgot the instructions after they were closed and already assumed clothes were on their bodies, so both the instructions and the merge function were unnecessary.
Wireframe
Prototype
Final App Design
Changes
Before
After
Changes
Final App Design

Final Takeaways

Overall users found the app to be welcoming from the illustrations used and the personalized options offered
A lesson I learned is the value of user testing to challenge my assumptions. For example, I numbered items when users added them to their Fitzi Room since, in a physical store, the sales associate usually gives a number for how many items a shopper is taking into their fitting room. User testing showed that users have different mental models for online shopping vs in-person shopping.
‍
Participants were able to understand the concept of the scanner and Fitzi Room, and I think with advancements in technology, integrating digital design into the physical world will innovate the online retail space and lead to more conscientious shopping habits.

From this, here's what I'd keep in mind if this was a real-world project:
Edge cases
How I’d proceed if I was working with a team would be to ask engineers about constraints with AR & VR technology. For example, with the Body Scan feature, there might be edge cases for different body types.
Future designs
  • Design a checkout experience and then test what users would want in the Fitzi Room vs the Checkout page
  • Design a way for users to view all their clothing items at once to account for a user adding a lot of clothes into their Fitzi Room
  • The body scan could also benefit from adding sound or voice-controlled navigation, especially when transitioning between different poses to give users feedback on actions they’ve taken
Back Arrow IconCampus Cafe App
Content Creator Merch WebsiteNext Arrow Icon
Copyright Icon
2022, Designed and built by Cindy Liang in Webflow
LinkedIn IconResume IconEmail Icon