Adding an AI-driven personalized stylist feature to ASOS e-commerce
Overview:
ASOS, an online-only fast fashion retailer, reported a $316M pre-tax loss in 2022, largely driven by a nearly 50% return rate, with many returned items never resold. To help reduce returns, I designed an AI stylist feature. It uses personalized avatars and tailored outfit suggestions based on body type, skin tone, style preferences, occasions, and virtual try-on experience.
Methods
Interviews,
Moderated usability testing
Tools
Figma/FigJam, Google Form
My Role
UX/UI designer
Duration
Apr 2024 (3 weeks)
ASOS, an online-only retailer, suffers high return rates as shoppers struggle to decide what to buy and to gauge fit, style, and color without in-person try-ons.
Problem
The ASOS AI Stylist feature helps shoppers visualize how outfits fit on them and receive outfit recommendations without trying them on in person:
Personalized avatars for virtual try-on
Virtual fitting experience
AI outfit recommendations
Solution
Online shoppers found it difficult to choose items and assess fit and color without trying them on
Primary Research
To better understand the real-world challenges, habits, and unmet needs of online clothing shoppers, I conducted a survey (21 respondents) and 6 structured interviews (2 fashion enthusiasts, 3 busy professionals, 1 student). I aimed to learn:
Shopping’s role in daily life
How does clothing shopping fit into shoppers’ professional and personal life?
Experiences and pain points
Online clothing shoppers’ shopping and styling experience/pain points?
After the interview, I found the following key findings:
Frustration with limited body shape and skin tone representation (5/6)
Strong desire for outfit recommendations (6/6)
Adopting a trial-and-error approach to explore personal styling (2/6)
Affinity map was performed to synthesize key insights. This partial view shows how I got the insights. Click the link for the full report and the image to enlarge.
Key Insights
Diverse body types and skin tones of models needed
Outfits recommendations for different situations needed
How might we help shoppers visualize outfit fit and suggestions online?
A well-designed onboarding flow is the key first step to building a reliable AI stylist experience
Mid-Fidelity Wireframes
Building on the onboarding flow, I sketched low- and mid-fidelity wireframes to explore layout options, visual hierarchy, and placement. I also used this opportunity to evaluate whether the feature would work better as a modal or a standalone page within ASOS. Since the function is meant to enhance the traditional product page, I ultimately chose a modal design.
Mid-fidelity wireframes
Click the image to see the full-size image.
Mid-Fidelity Wireframes Usability Testing
Shoppers needed a guided onboarding process
Once I had a working solution, I tested it with users to evaluate the visual and functional experience of the onboarding process—and understand the perceived value of this feature within the website—I conducted moderated usability tests with 5 users via Zoom. The key findings are:
AI stylist icon on the ASOS site:
All 5 users highly valued AI stylist feature.
Average icon search time was 5 seconds, suggesting good visibility.
AI stylist onboarding process:
Average total onboarding completion was 5 minutes 52 seconds, but 1 - 3 minutes is common for smooth experiences, based on NNG.
4/5 users found intent-driven question for body type queries confusing.
All 5 users needed an even more flexible onboarding process, allowing skip without losing provided information.
The average satisfaction score was 7 out of 10, with 10 being the most satisfied.
Iteration
During the usability test, I found that users felt more comfortable with guided questions, as they wanted the avatar to be accurately built. They felt lost with open-ended questions and were unsure how to provide accurate information without guidance.
Change from “open-ended questions” to “guided body type questions”
BEFORE: ONE OPEN-ENDED QUESTION
AFTER: MULTIPLE GUIDED QUESTIONS
After the iteration, I wanted to assess whether the updates reduced onboarding time and minimized user overwhelm. I conducted moderated usability sessions using the Rapid Iterative Testing and Evaluation (RITE) method, allowing me to quickly evaluate the iteration results from a smaller group of users (3 participants).
To evaluate the improvements, I measured for the new flows:
task completion time
satisfaction score
The matrics
After the testing, the following key findings were identified:
The average task completion time was 5 minutes and 4 seconds, compared to 5 minutes 52 seconds.
The overall satisfaction score improved significantly, rising from 7.0 to 9.3.
1/3 user preferred a single onboarding flow, citing sufficient flexibility and confusion about where to start when the process was broken into separate steps.
Key Insights
Breaking the flow into smaller, guided steps with more skippable options and preset databases significantly improved both efficiency and user experience.
Prototype
Final Thoughts
What I accomplished:
I designed an AI Stylist feature for ASOS, enabling personalized avatars for virtual try-on and AI-powered outfit suggestions.
This feature was designed 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. It offers flexible image options, text-image explanations, auto-saving steps, and manageable tasks while gathering sufficient information.
Next Steps and Reflection
Balancing conversational inputs and traditional questionnaires:
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.
Ethical artificial intelligence insights in style tech:
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.
Adding delightful, user-centric functionalities:
Looking ahead, I’m eager to expand the AI stylist’s capabilities based on insights from competitor research and user interviews. I see potential in integrating the AI stylist with a user’s calendar to provide outfit suggestions for specific events, while also offering a closet management system to help users visualize and organize their wardrobe. These features aim to reduce decision fatigue and make the AI stylist a truly personalized, proactive companion in users’ daily lives, enhancing not just style, but also confidence and convenience.
Modal design and technical constraints:
Modal design is technically complex due to scroll handling, layering issues, and mobile constraints. I learned the importance of understanding engineering limitations early in the design process. While modal dialogs are sometimes seen as interruptions, I leveraged their ability to appear on top of a page—without requiring navigation—to present content intentionally before users enter the main shopping flow. This approach aligns with NN/g’s guideline that modals are appropriate when they support critical decisions or help prevent costly mistakes. By offering personalized outfit suggestions upfront, the modal enables more confident choices and helps reduce return rates by aligning options with users’ unique needs from the start.
How I would measure the impact
Return Rate Reduction: Track changes in product return rates before and after users engage with the AI Stylist to evaluate its effectiveness in improving fit and satisfaction.
User Satisfaction Score: Collect satisfaction ratings post-stylist usage through in-app prompts or email follow-ups to gauge perceived helpfulness and user experience quality.
Qualitative Feedback Collection: Use short feedback forms or contextual surveys to capture insights on how well the stylist matched user preferences, and identify areas for refinement.
<< Previous
Effortless sustainable shopping: Responsive website + Chrome extension
Next >>
Redesigning a Background Check Website for Faster Task Completion