CoordiFit
The origins of the Coordifit app arise from the question of how the online apparel shopping experience can integrate the convenience of shopping from home with the precision of trying on clothes in person.
Industry
Individual
Role
UX Designer
Themes
UX Designer
Duration
12 weeks
Tools
Figma, Invision, Canva
.png)
Introduction
Online shopping, ever since the COVID-19 pandemic, has rapidly risen in popularity to become a channel that retailers must optimize, especially for fashion brands. The ability to purchase clothes online has made a previously high-effort endeavor an easier one; however, this does not come without challenges.
A major pain point for many online apparel shoppers is the number of returns they have to make due to purchased items not fitting as expected, or clothing articles not appearing as in the original images.
.png)
Research Highlights
Before diving into any designs, I conducted a combination of online research and customer interviews to define the problem in a more concrete manner.
-
According to Hestler, Karessli, and co., the return rate for online apparel is the highest of any industry, at up to 40% for some companies. 100% of online shoppers interviewed stated that they had made returns in the past 2 years.
-
CNBC News corroborates the idea that online shoppers’ issues boil down to the simple fact that shoppers cannot "visualize in person how they will look or fit”. 70% of online shoppers who were interviewed cited inconsistencies in the predicted fit of clothing items and the actual fit of the physical items as the primary reason for returns.
-
Time asserts that with there being "no standard size", online shoppers must anticipate the different sizing patterns of different manufacturers. 50% of online shoppers who were interviewed stated they felt some degree of unease about clothing sizes because different brands often have different sizing standards.
Problem Statement
Shoppers often make returns due to clothing items purchased online not fitting and/or appearing as on the brands’ websites, ultimately negating the convenience factor of shopping from home.
“
How Might We
enable online shoppers to select clothing online that fits their body type without having to order the items to their homes and risking costly returns?
“
User Persona: Ambitious Amy
Ambitious Amy is a go-getting young professional who is focused on her career. While she does not necessarily go out of her way to stay ahead of fashion trends and buy expensive clothes, she values aesthetics and fit when it comes to her outfits. Due to her busy schedule, she often finds herself browsing for clothes and accessories online, and would love to just find the right items the first time.
Motivation
-
Would like to minimize "non-productive" time
-
Would to have an accurate idea of how an item bought online will fit
Frustration
-
Does not always know if her size matches a brand's sizes
-
Would prefer to avoid complicated situations like returns
-
Sometimes having difficulty in measurements
Behaviors
-
Tries to use time efficiently
-
Most frequently uses casual colthing
"I do not like it when I buy something and it does not fit properly and I have to return it."
Solution Task Flow
The below task flow outlines the main capabilities I envision online shoppers having available to them to mitigate the risk of ordering the wrong items.
Start the app in a homepage →
Adding your body measurment→
Visualize the clothing item on an avatar with the user’s exact dimensions →
Make an informed purchase decision
Ideation
I started the design process with hand sketches of the main app pages I envisioned for an online fitting room experience.
START
END
User Testing
The final prototype was developed through 2 rounds of refinement of a low-fidelity prototype.
Sizing Page V1
Sizing Page V2
Iteration Process 1
I found that in the version 1 testing round, users did not immediately understand the concept of a virtual fitting room, and so I took measures to make the intent of the app clear upfront.
Iteration Process 2
In the second testing round, I found users were confused about the exact mechanics of the virtual fitting room task flow, and so made instructions and buttons clearer to understand at each stage.
Sizing Page V2
Sizing Page V3
Grayscale Wireframes
A revised interactive grayscale prototype was created to emulate the online fitting room experience.
Coordifit Final Prototype
Coordifit is an application that allows online shoppers to copy and paste links to webpages of clothing articles they are shopping for, and visualize realistic avatars of themselves wearing those pieces of clothing. The visualization of the avatars wearing the selected clothing would depend on the relative dimensions of the avatar (ie. the user) and the size of the clothing item selected, thus simulating the experience of trying on a piece of clothing in-person.
See for yourself how the virtual fitting room experience could be with Coordifit!
Mood Board and Colour Palette
Throughout the prototyping process, I leveraged a mood board to develop a colour palette matching the theme of convenient, aesthetic fashion.
Coordifit theme broken down:
-
Aesthetics customized for one’s specific body and figure
-
Simple, intuitive online shopping experience
-
Informed purchase decisions
Color Palette
Brand Colour Accessibility
I aimed for a AAA or AA ratio for the colour contrast, and leveraged 44 x 44 pixel icons to ensure wide accessibility.
Error
AAA
7.24:1
Button
AAA
4:5:1
Button
AAA
14.19:1
Text Field
AAA
9.24:1
Key Learnings & Next Steps
One major design challenge with the virtual fitting room experience is developing a realistic avatar that continues to look realistic while wearing clothing articles transferred from clothing brands’ websites. Continued iteration will be needed on this front to ensure the look and feel of the avatars and depictions of virtual clothing items keeps up with current graphics capabilities.