top of page

CoordiFit

Industry

Individual

Role 

UX Designer

Themes

UX Designer

Duration

12 weeks

Tools

Figma, Invision, Canva

Rectangle (9).png

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.


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.

Man in khaki shirt holding the iPhone mockup (Mockuuups Studio).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.

Image by Brooke Lark
  • 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.

image 9.png
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.

Presentation Order.jpg

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
IMG_0047_edited.png
export_edited.png
export 2_edited.png
export 3_edited.png
export 4_edited.png
END
export 5_edited_edited.png


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

Rectangle.png
Rectangle (1).png
Rectangle (1).png
Rectangle (2).png


Grayscale Wireframes

A revised interactive grayscale prototype was created to emulate the online fitting room experience.

Screen Shot 2022-12-12 at 2.02_edited.pn
Screen Shot 2022-12-12 at 2.04_edited.pn
Screen Shot 2022-12-29 at 5.04_edited.pn
Screen Shot 2022-12-12 at 2.05_edited.pn
Screen Shot 2022-12-12 at 2.05_edited.pn
Screen Shot 2022-12-12 at 8.39_edited.pn
Screen Shot 2022-12-12 at 8.40_edited.pn
Screen Shot 2022-12-12 at 8.40_edited.pn
Screen Shot 2022-12-12 at 8.40_edited.pn
Screen Shot 2022-12-12 at 8.40_edited.pn



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

Screen Shot 2022-12-12 at 3.20.46 PM.png

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

Group 5444.png
Group 5446.png
Group 5445.png



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.

bottom of page