The users can now virtually try on clothes from their mobile devices to see the size, fit, and style of apparel before they buy it.

duration

9 Weeks @ BrainStation

tools

Figma, InVision, Photoshop

deliverables

iOS app

Roles

User Research, U.I Design, Prototyping, Usability Testing

MOTIVATION

Buying fashion online is convenient but can be mentally exhausting when customers are unable to understand the look and feel of the apparel and determine the size.

Unhappy purchases are returned, and 40% of them are due to size and fit issues.

01. secondary Research

Online fashion and its challenges

A shopping addict myself, I enjoy buying clothes online but hate the drawbacks of it. So, I wanted to dive deep into the realm of online shopping and its challenges to create a platform to facilitate shopping with confidence.

  • Vanity sizing, a practice when clothing is deliberately labeled as a smaller size to make the customer feel better about themselves and buy more makes it difficult to buy clothes without trying it on
  • There is no online trial room
  • Online shoppers mainly have to rely on product images and description and discover the product only when it arrives
  • Helpful assistance in understanding the product is missing in the online experience
  • Damaged product or purposely modified fashion products is a common reason for returns request
  • Hassles incurred in claiming the refund can be cumbersome

02. primary research

What do the interviewees have to say?

I conducted 3 user interviews with people from different circles and habits to understand their online shopping experience.

My questions include: Do you prefer to buy fashion online? How often do you shop online? What are the challenges you face when buying clothes online? What are the impacts? How do you see the future of online fashion shopping?

The top complaint consumers have while online fashion shopping is when they receive a product different from what was expected (size, fit, color, style, etc.). My research also suggested size and fitting issues as the number one reason for returns, so I highlighted these insights..

Sizing charts are not accurate

It is impossible to know the fitting from the images of models posing

Sometimes, they return an apparel because it didn't look good on them

They have to rely on reviews for recommendations primarily

03. Key takeaways

Online shoppers want to be confident about the size and fit of the product they are buying

Size and fit issues are real. Keeping the above insights in mind, I wanted to focus my project on improving the online shopping experience by helping users determine the correct size, style, and fit of apparel before buying it.

How might we help online shoppers (18- 40 years) choose the correct apparel size, style, and fit so that consumers are satisfied with their purchases on arrival?

04. Persona

The user's experience at the core of my design

From the design question and the insights gleaned from the user research, I created a user persona to represent the motivation and frustrations of our primary stakeholders and identify opportunities in which to focus my digital solution.

Diagram: Journey Map

After looking at my persona's journey map, I realized that my persona wanted the experience of in-store shopping. Most people prefer trying clothes on before purchasing. So, I thought to copy the emotional experience of offline shopping by offering many of the same benefits.

05. Task Selection

The primary focus was to emulate an in-store experience to beat the size and fitting issues

Considering the HMW statement and my persona’s needs, I created a set of 10 user stories under each of the 3 epics in order to determine the main function of my product.
Core Value proposition matrix helped me to choose the primary epic and user stories to create my minimum viable product (MVP).

core value proposition

To facilitate online shoppers with confident shopping.

core epic#2

Find the correct apparel size, style, and fit before buying them.

As a

I want to

So that

Task

User

option to input correct body measurements

I get accurate sizing recommendation

create “How to measure” guidelines

User

find apparel in my true size

I don't have to return it

recommend size

User

enter my fitting preference

the outfit flatters my body

choose outfits based on body shape

User

to see how the outfit looks on me

I am confident about my purchase

to try on clothes before purchase

I decided to tackle these user stories by designing an app that would allow users to try on clothes virtually through an AR fitting room and be size-inclusive. In addition, I wanted to create an aggregator to facilitate shoppers buying clothes from any brand. Next, I developed a task flow thinking about how the user will interact with the product.

TASKflow diagram

Start the mobile app by entering the URL of the product. Then, fetch your inches and try out the virtual fitting room to see the apparel's size, style, and fit on YOU!

Diagram: Task Flow showing the steps to obtain correct size recommendation

TECHNOLOGY

The augmented reality (AR) or artificial intelligence (AI) technology places the apparel over the customer's image and shows them the style and fit of a product they're thinking of buying. The solution is also size-inclusive as it matches the clothing to the user's unique body measurements to offer unbeatably accurate sizing recommendations.

06. MARKET STUDY

Comparative analysis

Feature

Smartfit

Fit Analysis

Easy Size

WAIR

Aggregator app that allows you to choose an outfit from any shopping site to determine its size

YES

NO

NO

NO

Input user's body measurements

YES

YES

NO

YES

How to measure? guidelines

YES

YES

NO

NO

Fit preference

YES

YES

YES

NO

Use of illustrations to help determine your body shape

YES

YES

YES

NO

Virtual fitting room using AR

YES

NO

NO

NO

Integration with Brands

NO

YES

YES

YES

07. Sketching & wireframes

Exploring ideas

I drew inspiration from various shopping apps in terms of functionality and collaborated ideas to sketch the early concepts. These concepts helped to determine the framework and flow of the application.

Diagram: Sketches and wireframes (Click to see more)

08. Usability test - 2 rounds

Gathering feedback

Focused on the usability of the mobile app, the first mid fidelity wireflow underwent usability testing for two rounds with five participants in each round. The main task conducted by the users during the test:

Find your correct size and fit for the apparel you want to buy.

Below is the final wire flow achieved after two rounds of usability tests. Some of the major changes based on the priority matrix are listed below and used to design the hi-fidelity prototype.

PROBLEM

4/5 users expected response to the URL entered before proceeding with the set of questions. It means the users need feedback on the action performed.

SOLUTION

I added a screen with the product information related to the URL.

PROBLEM

3/5 users referred to the images as first, second, or third.

SOLUTION

Adding alternative text to the images of body types and shapes give more clarity.

PROBLEM

4/5 users wanted an option to buy the product directly without having to go to its site again.

SOLUTION

Adding the "Shop the Look" takes the user directly to the product site. Also, the inclusion of size statistics gives confidence to the user.

Below is the final wire flow achieved after two rounds of usability tests. Some of the major changes based on the priority matrix are listed below and used to design the hi-fidelity prototype.

Diagram: Complete wire flow

9. BRAND identity - Moodboard

Set the tone for the brand

I started translating from grayscale into a high-fidelity prototype by recognizing a list of keywords that embody the brand’s essence and define its personality. Then, using these keywords, I searched for inspiration and created a mood board that helped me derive the color palette.

Diagram: Moodboard

10. UI library

UI elements to maintain a unified design voice across the devices

I designed components and saved them in the UI library to be easily accessible in the future.

Diagram: UI Elements

11. Usable by everyone

Accessibility

Keeping accessibility and WCAG standards as priority, I intended to design a product that everyone could use.

Diagram: Accessibility features

12. HIGH FIDELITY PROTOTYPE

Creating an experience

I injected my brand’s identity into my prototype, iterating many variations to reach a balance of color, typography, and the product's overall look.

If you're interested in the interactive prototype please click on the screen below.

14. reflections

What have I learned from this project?

  • Planning the research helped me to set expectations, stay focused and on track
  • Test early, test often. Valuable feedback has helped me see troubled areas that I had previously overlooked
  • Knowing what to ask and how to interpret my user's answers helped me to solicit reliable feedback