UI/UX Case Study
VRFiT
VRFiT
VRFiT
Revolutionising Fashion E-commerce through AI-Driven Virtual Try-On Solution
Revolutionising Fashion E-commerce through AI-Driven Virtual Try-On Solution
Revolutionising Fashion E-commerce through AI-Driven Virtual Try-On Solution
How Lagogo and VirtualFit's AR Technology Transformed Online Shopping, Reduced Return Rates, and Enhanced Customer Satisfaction
How Lagogo and VirtualFit's AR Technology Transformed Online Shopping, Reduced Return Rates, and Enhanced Customer Satisfaction
Project Time Duration
10
10
Weeks
Weeks
+10
+10
Screens
Screens
User Group
Targeting people who had an online shopping experience before with over
1000 times
Targeting people who had an online shopping experience before with over
1000 times
My Role
Concept
Concept
Research
Research
Interface
Interface
Prototyping
Prototyping
Interaction
Interaction
OVERVIEW
In the fast-evolving e-commerce world, Lagogo, a renowned fashion brand, faced significant challenges with high return rates and customer dissatisfaction. Traditional online shopping methods often fail to meet consumer expectations for a seamless and personalised experience, resulting in wasted resources due to unsellable returned items. Recognising the need for innovation, Lagogo partnered with VirtualFit to revolutionise the online shopping experience through cutting-edge technology.The collaboration led to the development of VRFIT, an AI-driven virtual try-on app. This innovative solution leverages augmented reality (AR) to allow customers to try on clothes virtually from the comfort of their homes. By offering a more immersive and realistic shopping experience, VRFIT aims to boost customer confidence, reduce return rates, and increase conversion rates.
OVERVIEW
OVERVIEW
In the fast-evolving e-commerce world, Lagogo, a renowned fashion brand, faced significant challenges with high return rates and customer dissatisfaction. Traditional online shopping methods often fail to meet consumer expectations for a seamless and personalised experience, resulting in wasted resources due to unsellable returned items. Recognising the need for innovation, Lagogo partnered with VirtualFit to revolutionise the online shopping experience through cutting-edge technology.The collaboration led to the development of VRFIT, an AI-driven virtual try-on app. This innovative solution leverages augmented reality (AR) to allow customers to try on clothes virtually from the comfort of their homes. By offering a more immersive and realistic shopping experience, VRFIT aims to boost customer confidence, reduce return rates, and increase conversion rates.
CURRENT PROBLEMS
CURRENT PROBLEMS
1
Return Issues
Return Issues
Since consumers can't see the actual product before buying, they often buy multiple items to try on and then return many of them.
Since consumers can't see the actual product before buying, they often buy multiple items to try on and then return many of them.
2
Impulse Buying
Impulse Buying
Influenced by ads and trends, consumers often buy products they don't need.
Influenced by ads and trends, consumers often buy products they don't need.
3
Fake Reviews
Fake Reviews
Fake reviews make it hard for consumers to judge product quality, leading to poor purchasing decisions and lowering shopping experience and brand trust.
Fake reviews make it hard for consumers to judge product quality, leading to poor purchasing decisions and lowering shopping experience and brand trust.
4
Lack of a Personalised Cart
Lack of a Personalised Cart
The shopping cart lacks a sorting system, making it hard to determine necessary items, often leading to impulse purchases.
The shopping cart lacks a sorting system, making it hard to determine necessary items, often leading to impulse purchases.
Therefore, I have identified the current problems and decided to proceed with the following process for the next phase of design and development.
Let's move forward.
Therefore, I have identified the current problems and decided to proceed with the following process for the next phase of design and development.
Let's move forward.
DESIGN PROCESS
DESIGN PROCESS
Empathize
User research
Competitors Analysis
quantitative Research
Define
User research
Competitors Analysis
quantitative Research
Ideate
Brain storming
user flow
paper sketch
Prototype
Low fidelity wireframe
high fidelity wireframe
Test
Visual design
interaction
Empathize
User research
Competitors Analysis
quantitative Research
Define
User research
Competitors Analysis
quantitative Research
Ideate
Brain storming
user flow
paper sketch
Prototype
Low fidelity wireframe
high fidelity wireframe
Test
Visual design
interaction
Empathize
User research
Competitors Analysis
quantitative Research
Define
User research
Competitors Analysis
quantitative Research
Ideate
Brain storming
user flow
paper sketch
Prototype
Low fidelity wireframe
high fidelity wireframe
Test
Visual design
interaction
Before beginning the design process, I conducted a market trend survey on the current development of virtual fitting technology, and then proceeded to conduct user research to gather relevant data.
Before beginning the design process, I conducted a market trend survey on the current development of virtual fitting technology, and then proceeded to conduct user research to gather relevant data.
MARKET RESEARCH
MARKET RESEARCH
Based on market research, the findings summarize the impulsive shopping behavior of consumers, the growing demand for virtual fitting room markets, and the potential environmental benefits of using AR technology in virtual fitting rooms.
Based on market research, the findings summarize the impulsive shopping behavior of consumers, the growing demand for virtual fitting room markets, and the potential environmental benefits of using AR technology in virtual fitting rooms.
60%of user
admit that their purchases are impulsive
Market trend new report that:
The virtual fitting room market
valued at USD 4.55 billion in 2023,
reach USD 20.63 billion by 2030.
Europe is expected to see significant growth, driven by increasing adoption of AR-fitting in retail.
High demand
for personalized and customizable shopping experiences increasing grow
Future Potential was prove that AR try-on technology supports sustainability by reducing waste from returns and excess inventory.
60%of user
admit that their purchases are impulsive
Market trend new report that:
The virtual fitting room marketvalued at USD 4.55 billion in 2023,
reach USD 20.63 billion by 2030.
High demand
for personalized and customizable shopping experiences increasing growFuture Potential was prove that AR try-on technology supports sustainability by reducing waste from returns and excess inventory.
USER INTERVIEWS
USER INTERVIEWS
We conducted a series of user interviews and surveys to delve into consumers' online shopping habits and their experiences with purchasing clothes online. These interviews provided valuable insights that guided the design and development of our VirtualFit app.
We conducted a series of user interviews and surveys to delve into consumers' online shopping habits and their experiences with purchasing clothes online. These interviews provided valuable insights that guided the design and development of our VirtualFit app.
USERS & AUDIENCE
Tech-savvy millennials aged 20-40
Preference for online shopping over traditional retail
Experienced online shoppers with over 1,000 previous online purchases
Interview Questions:
Survey Questions:
FINDINGS FROM THE INTERVIEWS
FINDINGS FROM THE INTERVIEWS
We conducted a series of user interviews and surveys to delve into consumers' online shopping habits and their experiences with purchasing clothes online. These interviews provided valuable insights that guided the design and development of our VirtualFit app.
18-24 Years Old:
College students and social media enthusiasts often make impulse purchases driven by advertisements.
These users appreciate trendy and visually appealing items promoted on social media platforms.
25-34 Years Old:
Office managers use online shopping impulsively to alleviate work-related stress.
Common frustrations include receiving mismatched items and the difficulty of returning them.
35-40 Years Old:
Full-time moms frequently rely on online shopping for convenience.
Reviews are crucial in their decision-making process, influencing their purchase choices to ensure suitability.
18-24 Years Old:
College students and social media enthusiasts often make impulse purchases driven by advertisements.
These users appreciate trendy and visually appealing items promoted on social media platforms.
25-34 Years Old:
Office managers use online shopping impulsively to alleviate work-related stress.
Common frustrations include receiving mismatched items and the difficulty of returning them.
35-40 Years Old:
Full-time moms frequently rely on online shopping for convenience.
Reviews are crucial in their decision-making process, influencing their purchase choices to ensure suitability.
18-24 Years Old:
College students and social media enthusiasts often make impulse purchases driven by advertisements.
These users appreciate trendy and visually appealing items promoted on social media platforms.
25-34 Years Old:
Office managers use online shopping impulsively to alleviate work-related stress.
Common frustrations include receiving mismatched items and the difficulty of returning them.
35-40 Years Old:
Full-time moms frequently rely on online shopping for convenience.
Reviews are crucial in their decision-making process, influencing their purchase choices to ensure suitability.
AFFINITY MAP
AFFINITY MAP
After conducting user interviews and surveys, I created an affinity map to condense user behaviors and needs.
After conducting user interviews and surveys, I created an affinity map to condense user behaviors and needs.
After conducting user research, I identified several issues and summarized them using an Affinity Map. Next, I will use personas and user journeys to simulate real user scenarios and further define and delve into these problems.
After conducting user research, I identified several issues and summarized them using an Affinity Map. Next, I will use personas and user journeys to simulate real user scenarios and further define and delve into these problems.
USER PERSAONAS
USER PERSAONAS
I simulated the backgrounds of two users in real-life situations, the pain points they encountered, and the goals they hoped to achieve.
I simulated the backgrounds of two users in real-life situations, the pain points they encountered, and the goals they hoped to achieve.
USER JOURNEYS
USER JOURNEYS
We simulated the backgrounds of two users in real-life situations, the pain points they encountered, and the goals they hoped to achieve.
We simulated the backgrounds of two users in real-life situations, the pain points they encountered, and the goals they hoped to achieve.
INSIGHT
INSIGHT
Based on the above user research, I have selected four key items as priorities for the next design phase.
Based on the above user research, I have selected four key items as priorities for the next design phase.
Importance of relying on user reviews
Importance of relying on user reviews
Social media influence leads to impulse buying
Social media influence leads to impulse buying
Blindly following trends leads to increased shopping frequency
Blindly following trends leads to increased shopping frequency
Unable to try on clothes causes size, fit, or color problems, resulting in cumbersome returns
Unable to try on clothes causes size, fit, or color problems, resulting in cumbersome returns
solution
VR Fit offers a solution: an innovative virtual fitting that allows users to experience personalized virtual try-ons and interact with the community, aiming to enhance the online shopping experience.
VR Fit offers a solution: an innovative virtual fitting that allows users to experience personalized virtual try-ons and interact with the community, aiming to enhance the online shopping experience.
KEY SOLUTIONS AND STRATEGIES
KEY SOLUTIONS AND STRATEGIES
Personal Preferences Settings
Personal Preferences Settings
Allows users to set personal preferences to receive recommendations that better match their needs, reducing impulse buying opportunities.
Allows users to set personal preferences to receive recommendations that better match their needs, reducing impulse buying opportunities.
Personalized Wardrobe
Personalized Wardrobe
Offers functions similar to a shopping cart but with enhanced organization and management features, allowing users to group and save their favorite items.
Offers functions similar to a shopping cart but with enhanced organization and management features, allowing users to group and save their favorite items.
Virtual Try-On Technology
Virtual Try-On Technology
Users can use AR technology in the virtual wardrobe to try on items and share the results with the community, gaining genuine user feedback and reducing return rates.
Users can use AR technology in the virtual wardrobe to try on items and share the results with the community, gaining genuine user feedback and reducing return rates.
Customer Community
Users can share their try-on photos in the community and ask for opinions from others, helping to reduce the impact of fake reviews.
Users can share their try-on photos in the community and ask for opinions from others, helping to reduce the impact of fake reviews.
Before proceeding with the design, I identified some potential challenges. I then conducted a competitor analysis to see how others are addressing these issues and to gather some suggestions to inform my upcoming design.
Before proceeding with the design, I identified some potential challenges. I then conducted a competitor analysis to see how others are addressing these issues and to gather some suggestions to inform my upcoming design.
CHALLENGES
CHALLENGES
•
Ensuring AR technology accurately represents the fit and appearance of clothing on different user body types.
Ensuring AR technology accurately represents the fit and appearance of clothing on different user body types.
•
Ensuring AR technology accurately represents the fit and appearance of clothing on different user body types.
•
Designing a seamless user experience that connects to the checkout pages of various stores.
Designing a seamless user experience that connects to the checkout pages of various stores.
•
Designing a seamless user experience that connects to the checkout pages of various stores.
•
Ensuring compatibility and usability of virtual products across different platforms and devices.
Ensuring compatibility and usability of virtual products across different platforms and devices.
•
Ensuring compatibility and usability of virtual products across different platforms and devices.
•
Determining the role of Web3 technology in the project, especially for using virtual goods on other platforms.
Determining the role of Web3 technology in the project, especially for using virtual goods on other platforms.
•
Determining the role of Web3 technology in the project, especially for using virtual goods on other platforms.
COMPETITOR ANALYSIS
COMPETITOR ANALYSIS
DIRECT COMPETITORS
DIRECT COMPETITORS
Let's start the design process! First, confirm the design tasks, then proceed with creating the information architecture.
Let's start the design process! First, confirm the design tasks, then proceed with creating the information architecture.
TASK PROCESS
TASK PROCESS
INFORMATION ARCHITECTURE
INFORMATION ARCHITECTURE
Next, start designing the product !
Next, start designing the product !
LOW FIDELITY
LOW FIDELITY
After verifying my building information, I contemplated my layout design arrangement. Subsequently, I proceeded to draft my wireframe.
After verifying my building information, I contemplated my layout design arrangement. Subsequently, I proceeded to draft my wireframe.
DESIGN SYSTEM
DESIGN SYSTEM
Through careful selection of colours, design layouts, and interactive elements, I've established a set of clear and concise
design principles
Through careful selection of colours, design layouts, and interactive elements, I've established a set of clear and concise design principles
VISUAL DESIGN
VISUAL DESIGN
Through careful selection of colours, design layouts, and interactive elements, I've established a set of clear and concise
design principles
Personal Preferences Settings
preference
preference
After the user logs in, a series of questions will be asked to the user. This can accurately recommend users’ preferred styles
After the user logs in, a series of questions will be asked to the user. This can accurately recommend users’ preferred styles
preference
preference
There will be a series of styles, colors and other issues for users to test. The test page uses pictures to let users make choices
There will be a series of styles, colors and other issues for users to test. The test page uses pictures to let users make choices
Personal Preferences Settings
Homepage
Homepage
Homepage
Displayed here are recommended product combinations determined through user testing based on the user's personal style preferences.
Displayed here are recommended product combinations determined through user testing based on the user's personal style preferences.
Displayed here are recommended product combinations determined through user testing based on the user's personal style preferences.
Search Bar
Search Bar
Search Bar
Users can search for any desired product through the search bar
Users can search for any desired product through the search bar
Users can search for any desired product through the search bar
Video stories
Video stories
Video stories
Video stories based on user preferences will be displayed here
Video stories based on user preferences will be displayed here
Video stories based on user preferences will be displayed here
Product
Product
Product
Users can add their favourite products
Users can add their favourite products
Users can add their favourite products
Personalised Wardrobe
Wardrobe
Wardrobe
Wardrobe
When the user clicks to add the product. The product will be added to this wardrobe. Users can add groups or write group names according to their own categories
When the user clicks to add the product. The product will be added to this wardrobe. Users can add groups or write group names according to their own categories
When the user clicks to add the product. The product will be added to this wardrobe. Users can add groups or write group names according to their own categories
create group name
create group name
create group name
Users can create groups for the products they have joined and modify their names.
Users can create groups for the products they have joined and modify their names.
Users can create groups for the products they have joined and modify their names.
add Product
add Product
add Product
Adding this product to wardrobe
Adding this product to wardrobe
Adding this product to wardrobe
Personalised Wardrobe
Wardrobe - Dress Me
Wardrobe - Dress Me
Wardrobe - Dress Me
When the user clicks to add the product. The product will be added to this wardrobe. Users can add groups or write group names according to their own categories
When the user clicks to add the product. The product will be added to this wardrobe. Users can add groups or write group names according to their own categories
When the user clicks to add the product. The product will be added to this wardrobe. Users can add groups or write group names according to their own categories
Auto matching style
Auto matching style
Auto matching style
Users can change to another mode from the Wardrobe. That is the automatic matching function. Users can see the overall effect of automatic matching to decide whether this style is suitable for them
Users can change to another mode from the Wardrobe. That is the automatic matching function. Users can see the overall effect of automatic matching to decide whether this style is suitable for them
Users can change to another mode from the Wardrobe. That is the automatic matching function. Users can see the overall effect of automatic matching to decide whether this style is suitable for them
Virtual Try-On Technology
VR-Try on
VR-Try on
VR-Try on
When the user clicks to add the product. The product will be added to this wardrobe. Users can add groups or write group names according to their own categories
When the user clicks to add the product. The product will be added to this wardrobe. Users can add groups or write group names according to their own categories
When the user clicks to add the product. The product will be added to this wardrobe. Users can add groups or write group names according to their own categories
VR Try-on
VR Try-on
VR Try-on
Through VR try-on, users can simulate trying on clothes and change the clothes in the wardrobe through the following options
Through VR try-on, users can simulate trying on clothes and change the clothes in the wardrobe through the following options
Through VR try-on, users can simulate trying on clothes and change the clothes in the wardrobe through the following options
try-on record
try-on record
try-on record
After completing the simulated fitting, the user can record the fitting results
After completing the simulated fitting, the user can record the fitting results
After completing the simulated fitting, the user can record the fitting results
Customer Community
Community
Community
Community
This community allows users to initiate questions to ask people about their opinions on style and try-on results, and then initiate voting.
This community allows users to initiate questions to ask people about their opinions on style and try-on results, and then initiate voting.
This community allows users to initiate questions to ask people about their opinions on style and try-on results, and then initiate voting.
Ask question
Ask question
Ask question
Users can ask questions here
Users can ask questions here
Users can ask questions here
voting
voting
voting
After users record the fittings, they can choose to post the fitting results in the community and then add the first-vote direction, allowing people to vote.
After users record the fittings, they can choose to post the fitting results in the community and then add the first-vote direction, allowing people to vote.
After users record the fittings, they can choose to post the fitting results in the community and then add the first-vote direction, allowing people to vote.
