Adding an AI-driven personalized stylist feature to ASOS e-commerce
My Roles
UX researcher
UX/UI designer
Tools
Figma/FigJam, Procreate, Google form
Methods
Qual survey
Qual interviews
Moderated usability test
Duration
Jun 2024 (3 wks)
Problem
Without in-person fittings, online shoppers face significant challenges to gauge clothes fitting for them- body shape, skin color, styles, & occasions. These issues often lead to high return rates and missed opportunities for deeper customer engagement.
The ASOS AI Stylist feature, built into the e-commerce platform, streamlines shopping with three main components: personalized avatar creation for AR fitting, an adaptive style quiz, and intuitive result display with item swapping and cart functionality. This AI-driven solution merges user feedback and advanced technology for a uniquely satisfying shopping experience.
Solution
01.
Personalized avatar creation for AR fitting
02.
Fashion style quiz to analyze user preferences
Intuitive results display with options to swap items and add to the cart
03.
Scroll down to see my process
⬇️
Overview
Global fast fashion retailer ASOS faces an average 50% return rate for online shopping, with many returned items never resold, and caused pre-tax loss of $316 million in the 2022 fiscal year. To boost its brand loyalty and reduce return rate, I designed a personalized AI stylist feature with customized avatars and tailored outfit suggestions based on individual skin tones, body types, fashion styles, and occasions to enhance customer satisfaction.
Research
Primary Research
A structured interview on 2 fashion lovers, 3 busy professionals, and 1 student regarding online clothing shoppers lifestyles, shopping habits, experiences, styling, and closet management were conducted. The result highlights that 3/6 participants face body shape/skin tone fitting issues, have a hard time finding outfits/missing pieces for various events. Read full survey, interview, and affinity map in the links. Result shows shoppers need outfit recommendations, diverse body & skin representation.
I aim to learn:
How does clothing shopping fit into shoppers’ professional and personal life?
Online clothing shoppers’ shopping and styling experience/pain points?
Key findings:
4/6 shoppers find outfits look good on model but look bad on them due to skin tone and body shape mismatch. They need representation similar to their own.
6/6 shoppers want guidance & recommendations on events, style matching, and finding missing outfit pieces.
2/6 shoppers experiment with mix-and-match, trial-and-error methods to develop their fashion style and make decisions.
Insights:
Diverse body types and skin tones of models needed
Outfits recommendations for different situations needed
Competitive Analysis
I want to explore how similar fashion brands integrate the latest technology into their customer experience. I selected the following brands because they are fast-fashion companies share similar target customers with ASOS. See complete analysis for details here.
I aim to learn:
What cutting-edge technology adoption in user experience?
Competitor challenges and resolutions?
Key findings and insights:
None of ASOS competitors ever implemented AI stylist feature.
They had AR try-on or AI related feature but not widespread, reflecting the room of growth.
These brands has average 20%-50% returning rate.
(theguardian.com)
Who are our target customers?
I identified two distinct groups, from interview and survey, and created personas to keep their traits and needs in mind throughout my design process: 1. Fashion enthusiasts value meticulous style details. 2. Busy professionals seek personal style development amidst time constraints.
“ How can we help online shoppers visualize outfit fit and receive personalized recommendations without being in-store, in-person? “
Design
Feature Set & User Flows
The user flows designed are focus on the onboarding process: accurate avatar building and user fashion style/ need quiz
Implementing "skip", "pre-built database", and "save for later" options will help avoid choice overload, accommodate time constraints, and gather sufficient information.
Designing a flow that balances conversational and intelligent adaptability with sufficient guidance to gather necessary information.
Combining keywords and representative images is the guiding principle behind designing a visually impactful AI stylist user flow.
Avatar building user flow
AI stylist fashion quiz user flow
Click the image to see a full size image
Brand Design & UI Kit
To maintain brand consistency, I designed new components within the existing design system—product cards, interactive select states, a status bar, and modal open/close tabs.
Iteration
Usability Test
To understand whether the icon design effectively conveys its function, how users perceive the value of this feature within the website's content, and how they experience the feature onboarding process. To explore this, I recruited 5 users for a moderated usability test conducted on Zoom. Result shows shoppers need a more flexible, shorter, and guided onboarding process.
I aim to learn:
Feedback on AI stylist icon design
Value and experience of AI stylist onboarding process
-
AI stylist icon:
5/5 users highly valued AI stylist feature.
Average icon search time is 5”, suggesting good visibility.
AI stylist onboarding process
Average total onboarding completion is 5’ 52”, but 1-3’ is common for smooth experiences, based on NNG.
4/5 users find intent driven question for body type queries confusing.
5/5 users need a more flexible onboarding process, allowing skip without losing provided information
Click here to see the full usability test result.
Insights:
Users need shorter onboarding process
Users require flexible process with progress-saving / skippable steps
Guided onboarding is favored over intent-driven questioning
Iteration
Users need the flexibility to choose from uploading pictures or presets
Before
No flexibility
After
With flexibility to choose from uploading pictures or presets
2. Break single long onboarding process down to shorter tasks
Before
One single long process
After
Break the single AI stylist flow into savable, editable Avatar & Fashion Preference tasks
3. Change from “open ended questions” to “guided body type questions”
Before
One open ended question
Multiple guided body type questions
After
Prototype
Final Thoughts
What I accomplished
I designed an AI Stylist feature for ASOS with personalized avatar creation for AR fitting and AI outfit suggestions.
This feature aims to resolve online shoppers’ challenges in matching outfits to their body types, skin tones, unique fashion styles, and occasions.
A seamless onboarding process balances AI intelligent adaptability and user guidance, offering flexible image options, text-image explanations, auto-saving steps, and manageable tasks while gathering sufficient information.
Next Steps and Reflection
Reflecting on my ASOS AI stylist project, I recognized the importance of guiding users through the onboarding process to ensure their comfort and trust in the platform's accuracy. Key lessons learned included avoiding standalone open-ended questions when integrating AI functionality, the effectiveness of a text-image questionnaire over text-only or image-only options, and the value of combining multiple-choice and open-ended questions. This approach offered clearer guidance for users while encouraging them to express their unique needs and preferences.
Simultaneously, I acknowledged the pressing need to delve into AI ethics within the fashion world. By promoting ethical integration and usage of AI technology, I sought to contribute positively to the industry and foster responsible innovation. Enhancing avatar accuracy and harnessing the swap function for feedback-driven outfit suggestions also became crucial components of my vision to blend technology and ethics harmoniously.
<< Previous
Effortless sustainable shopping: Responsive website + Chrome extension
Next >>
Redesigning a Background Check Website for Faster Task Completion