Adding an AI-driven personalized stylist feature to ASOS e-commerce
Duration
Apr 2024 (3wks)
Tools
Figma, FigJam
Role
UI/UX designer
Methods
Solution Highlights
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 & virtual try-on
Virtual fitting experience
AI outfit recommendations
Impact/Result
User Research
Online shoppers found it difficult to choose items and assess fit/color without trying
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:
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.
Good onboarding ensures a reliable & pleasant AI stylist experience
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.
Usability Testing
Shoppers needed a guided and skippable onboarding process
I tested it with users to evaluate the visual and functional experience of the onboarding process and the perceived value of this feature within the website. I conducted moderated usability tests with 5 users.
Test Result
A more flexible, guided design improves the AI stylist onboarding experience
Changing from “open-ended questions” to “guided body type questions”
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.
Adding flexible onboarding control
Introducing skippable presets allowed users to bypass repetitive steps, significantly reducing friction.
Usability Testing
Guided steps with skippable presets boosted user satisfaction significantly
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 the following:
The average task completion time went from 5'52" to 5'4". While not a significant change in speed, the overall satisfaction score jumped from 7.0 to 9.3. This indicates that even without a dramatic time improvement, the flexibility, built-in datasets, and image-text options greatly improved the quality of the experience.
Current Prototype
Final Thoughts
What was accomplished
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.
Reflection
Balancing flexible, conversational, and traditional inputs is key to a pleasant AI experience
Through the ASOS AI stylist project, I learned that users need clear structure and guidance to feel confident in AI-driven experiences. Avoiding standalone open-ended questions, combining multiple-choice with open input, and using text-image questionnaires helped me understand how to balance flexibility with clarity, an approach I would apply more deliberately in future designs.
Recognizing the role of ethics in AI-powered fashion tools
This project highlighted the importance of considering AI ethics alongside functionality, especially in style tech where representation and accuracy matter. I learned that improving avatar accuracy and using features like outfit swapping as feedback loops can help align AI suggestions with user trust, reinforcing my commitment to designing more responsible and transparent AI systems.
Designing features that reduce decision fatigue, not add complexity
By analyzing competitors and user feedback, I learned that successful personalization goes beyond recommendations and into everyday usefulness. Ideas like calendar-based outfit suggestions and closet visualization helped me see how thoughtful integrations can reduce cognitive load, shaping how I approach feature prioritization in future projects.
Understanding when and why to use modals and technical constraints
Working on modal design taught me the importance of considering technical constraints like layering, focus management, and how a modal affects interaction with the underlying page. I learned that modals can be effective, not disruptive, when used intentionally to support critical decisions, guiding me to collaborate more closely with engineers and apply interaction patterns more strategically.
Learning to question existing designs through an accessibility lens
Discovering that ASOS’s primary CTA color did not meet accessibility contrast standards helped me realize that even well-known products can contain accessibility issues, and that poor design choices are more common than they appear. This reinforced the importance of critically evaluating existing designs and intentionally applying accessibility guidelines to create more inclusive user experiences.
