Virtual Try On Assistant

Creating a virtual try on experience for users

Add a Feature to an existing website.

Duration: 3 Weeks

Role: UX/UI Designer + Brand Designer + Researcher

Project Type: Add a Feature

Tools: Figma, FigJam, and Zoom

Domain Area: Fashion Industry

The Virtual Try On Assistant provides a way for User’s to add their body stats, add a photo, and virtually see what an item would look like on themselves before making an online purchase.

Project Overview

Background

Fashion brands like Gap, Zara, and H&M are major contributors to environmental degradation due to their production methods and disposal of unsold merchandise. The fashion industry is the second most water-intensive industry in the world, consuming around 79 trillion liters of water every year. It takes around 20,000 liters of water to make one t-shirt and one pair of jeans. That is enough drinking water for one person for 900 days. A cotton t-shirt needs 2,494 liters of water to make. It takes around 17,128 liters of water to make a cow skin leather tote bag. A pair of cow skin leather boots requires 12,370 liters of water, and it takes 7,612 liters of water to make a pair or cow skin leather shoes.

The creation of clothing also produces high levels of pollution, which has far-reaching consequences. Textile treatment and dyeing accounts for approximately 10% of global carbon emissions, with polyester emitting nearly three times more CO2 than cotton. Additionally, it is estimated that the industry produces 92 million tons of textile waste per year.

According to a recent study by the National Retail Federation, retailers lose about 45 billion dollars a year due to inventory shrinkage. In 2017, H&M lost $4.3 billion in unsold inventory. In 2018, Burbury admitted to burning $37 million of unsold inventory.

While some brands have taken steps towards sustainability, the clothing industry must continue pushing for responsible practices to reduce its environmental footprint.

Solution

To address the issue of consumers buying more inventory than they will keep or buying multiple sizes, my proposed solutions is to develop an AI driven Virtual Try On Assistant to help consumers. This feature will be integrated on Gap’s website and app due to its alignment with their sustainability efforts. This innovative tool will allow users to see how an item will look on their body before making a purchase. This feature will significantly reduce the likelihood of buying items that do not fit, buying multiple sizes, and buying items that the consumer doesn’t think looks good on them.

This will allow retailers to only produce what their customers truly want, therefore, decreasing their shrinkage.

The Problem

Since 2020, e-commerce sales have increased by $244 billion. Due to the increase in sales and many consumers continuing to buy clothing online, retailers need to find a way for the consumers to see what the items look like on them before they make their purchases. The retail industry as a whole is lacking a virtual try on option which would revolutionize the e-commerce fashion industry.

The Goal

The primary goal of the Virtual Try On Assistant is to give consumers the tools necessary to virtually try on an item before purchasing it online. This will be accomplished by:

  • Inputing stats and body type

  • Uploading or choosing a photo that represents what the consumer looks like

  • Virtually trying on the selected item

The Process

Through user interviews and competitive analysis, I found that there is an opportunity to provide a virtual try on experience that will help consumers make better online purchases and decrease the amount of returns that are made. This will also save retailers millions of dollars in production costs.

The Conclusion

I designed and tested a key flow for a Virtual Try On Assistant that would be added to Gap’s website. The designs were rated highly in ease of use, concept, and overall design. The participants thought it was very user-friendly, and it would be very beneficial for Gap’s website. and should be developed for any clothing retailer.

The Design Process

01. EMPATHIZE

Conducted research to understand what virtual try on options are currently being used.

02. DEFINE

Identified where the user pain points are by creating user personas.

03. IDEATE

Brainstormed ideas, User Flows, and Low Fidelity Wireframes.

04. DESIGN

Created High Fidelity wireframes from the Low Fidelity wireframes and user flows

05. TESTING

Conducted user testing to test the new prototype.

06 WRAP UP

Key findings, implementation, and next steps.

01. Empathize

Research Goals | Competitive Analysis | Interview Analysis | Affinity Mapping

Understanding the User

My goal was to understand what key features consumers are looking for in a virtual try on assistant in order to help them successfully complete a virtual try on session online. This was a crucial step in order to define the problem and design the solution.

User Research Goals

We want to learn:

  • How to reduce the number of unwanted items purchased by consumers.

  • who the target audience is.

  • How to develop a strategy to help consumers make more effective choices when shopping online.

User Research Objectives

We want to understand:

  • Who the target consumers are.

  • The consumers shopping styles, process, purpose, and pain points.

  • And evaluate how consumers are making purchasing decisions.

How Our Competitors are Implementing Virtual Try On Technology

I compared the features, strengths, and weaknesses of four retailers: Zyler, Ray-Ban, Warby Parker, and Uniqlo. The research helped prepare me for user interviews by giving me a better understanding how virtual try on is being used and implemented. This also helped me to identify common strengths and weaknesses so that I would better understand what elements were needed or needed to be avoided when designing my feature. I also had an understanding of what consumers are seeing and what could be useful for them. This background gave me a great starting point before diving into the user interviews.

Competitive Analysis Insights

TARGET MARKET

Most seemed to have a broad target market that could lend itself to any online shopper.

CAMERA

In order to use most of these you had to have camera access for it to work.

VIRTUAL USE

Most didn’t have a function that you were actually virtually trying on an item.

User Interviews

In order to better understand what features consumers are looking for in a virtual try on assistant, I interviewed five users who shop online frequently. During the interview process, I focused on five main topics:

  • When shopping for clothing online do they use a website or a retail app.

  • What device they usually use for online shopping.

  • How often they typically have to make online returns.

  • How they determine what size to purchase.

  • What features they would need to see in order to use a virtual try on option.

User Interview Analysis

  • Websites

    Retail Apps

  • Desktop

    Smartphone

    Tablet

  • 50% of the time

    Frequently

    Often

    30% of the time

  • Customer Reviews

    Size they normally purchase

  • Height

    Weight

    Different body types

    Different stats

    Physique

User Interview Quotes

  • “I read comments to see how an item will fit. But a lot of the time the material is different or the color is different.”

  • “You can’t tell online how something will look on you.”

  • “I usually don’t buy as much online because I don’t know how it will look on me.”

  • “Many times I will end up buying two sizes to find the right size, and then I havee to go to the store to return the other one.”

User Interview Results Through Affinity Mapping

Personas

02. Define

User Personas | Point-of-View Statements | How-Might-We Questions

Building User Empathy

My competitive analysis and user interviews provided me with a better understanding of who my users are and what problems that they face. In order to turn my research findings into visualizations, I created two key personas to help me empathize with my users and understand their needs.

I created two user personas in order to best keep my users in mind and to empathize with them. .

How-Might-We Statements

Now that I could visualize my users and empathize with their problems, I wanted to create how-might-we questions that would help me to clarify the key problems and focus on designing a feature to meet my user’s needs.

How Might We:

  • Find an easy way to help user decide what size will fit them when purchasing clothing online.

  • Find an easy way for users to try on clothing items virtually to see how they look on them before purchasing.

  • Design a virtual try on feature that will accurately show users what an item looks like and how it fits on them before making purchasing decisions.

03. Ideate

Feature Roadmap | User Flows

Turning Needs Into Features

With my HMW Questions highlight the problem and focusing my attention to my user’s needs, I began to develop a strategy moving forward. Keeping my research at the forefront, I created a Product Roadmap which ranked features from high priority to low priority. The roadmap would also help me to make my design decisions.

User Flows

After gaining a better understanding of my users, my primary features, and the hierarchy of my content, I started sketching out my users flows for the feature. This allowed me to better understand the navigation that a user would take through the beginning to end of the feature. It also showed me what actions they would take if they faced any potential roadblocks.

04. Design

Low Fidelity Wireframes | High Fidelity Wireframes | Prototype

This is where I started designing my key screens. I started by creating Low-Fidelity wireframes in Figma. I designed one key flow for my feature. I completed the flow with desktop screens, and created key mobile screens as well.

Building the Prototype

After finishing my Low-Fidelity wireframes I built a prototype to test the wireframes. I was looking to make sure that the flow worked from start to finish and that all of the features were present before starting on my high fidelity wireframes. From there I created my High-Fidelity wireframes and built the prototype that I would use for my final usability testing.

Getting Started

The user is able to view a product and select the try on button from the image. They are then able to select the Get Started button to begin the virtual try on process.

Setting It Up

Once the user has selected an item to try on, they are directed to a body silhouette image where they can add in all of their body stats. Once that is complete they can add a full body photo of themselves or choose to select a photo that most closely represents themselves.

Completing the Virtual Try On

When all of the stats and pictures are input, it is time for the use to see what the item looks like on themselves. They can fully view the item on an image of themselves, and then decide if they want to buy that item or not. Also once it is set up and saved, they can view any item on themselves that they choose.

05. Test and Iterate

Usability Testing | Revisions | The Final Prototype

Usability Testing

Once my prototype was ready, it was time to test it. I conducted usability testing with five participants in order to evaluate if the virtual try on assistant provided an easy to navigate experience, to make sure adding a user’s stats was easy and accurate, and to make sure that the necessary stats were present to give an accurate representation of what they would look like. I wanted to understand the overall process from start to finish with the virtual try on assistant, and gather any final thoughts about the process. I wanted to make sure that I received enough feedback for any improvements that would be needed.

Participants were asked to complete the following tasks:

  • Click on an item to complete a virtual try on session

  • Find and click on get started with virtual try on

  • Enter measurements

  • Upload or choose a photo of your choosing

  • Adjust the measurements if they chose a photo to represent themselves

  • Complete the virtual try on to see what the item looked like on themselves

Success was measured by the following metrics:

  • Task success rate

  • Time to complete each task

  • Easy of use

  • User satisfaction

  • Overall design and aesthetics

Revisions

The following changes were made:

General Changes:

  • The virtual assistant stats set up page has both the stats and the photos on the same page

  • Adding the full body image photo is on a separate page

  • The body image is added to the page where the sliders are so it is more accurate when adjusting what the image should look like

  • The final virtual try on image was updated with a full body photo

Consistency:

  • All buttons were checked to make sure sizing and spacing was consistent

  • The try it on button was made larger for better visibility

Before

After

The Final Prototype

After extensive research, design, user testing, and iterations, The Virtual Try On Assistant is ready! The final prototype has been built and is ready to view.

06. Wrap Up

Final Thoughts

This project gave me a lot of real world experience into how to navigate adding a feature to an already existing website. I was able to take an industry that I do design work for on a daily basis and add to their existing features. I was able to take a lot knowledge from existing customer issues and turn it into something that would be productive and solve problems for this company as a whole.

Key Takeaways:

  • Having a board research pool made a big difference in gaining insights from experiences, pain points, and wants for this feature

  • Using existing design patterns saved me a lot of time, especially when trying to meet deadlines

  • Organization is key

  • Sticking to a timeline and schedule aids in time management and meeting deadlines

  • User testing and feedback is key to each part of the design process

  • Taking time to evaluate feedback saved time when making design changes