Adding an AI-driven personalized stylist feature to ASOS e-commerce

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.

Methods
Qual interviews
Moderated usability testing

Duration
Jun 2024 (3 weeks)

Tools
Figma/FigJam, Procreate, Google form

My Roles
UX researcher
UX/UI designer

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 them to the cart

03.

Scroll down to see my process

⬇️

Primary Research

Shoppers need outfit recommendations, diverse body & skin representation

A structured interview with 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.

I aim to learn:

How does clothing shopping fit into shoppers’ professional and personal life?

Online clothing shoppers’ shopping and styling experience/pain points?

  • 4/6 shoppers found outfits look good on model but look bad on them due to a skin tone and body shape mismatch. They need representation similar to their own.

  • 6/6 shoppers wanted guidance & recommendations on events, style matching, and finding missing outfit pieces.

  • 2/6 shoppers experimented with mix-and-match, trial-and-error methods to develop their fashion style and make decisions.

Key findings:

Insights:

Diverse body types and skin tones of models needed

Outfits recommendations for different situations needed

Competitive Analysis

The fast fashion industry faces high return rates and the ongoing use of AI and AR suggests growth potential.

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?

None of competitors ever implemented AI stylist feature.

Key findings and insights:

They had AR try-on or AI related feature but not widespread, reflecting the room of growth.

These brands have average 20%-50% returning rate.

(theguardian.com)

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.

Our target customers

“ How can we help online shoppers visualize outfit fit and receive personalized recommendations without being in-store, in-person? “

The user flows designed are focused on the onboarding process: accurate avatar building and user fashion style/ need quiz

Feature Set & User Flows

Designing a flow that balances conversational and intelligent adaptability with traditional onboarding process to gather necessary information.

Implementing "skip", "pre-built database", and "save for later" options will help avoid choice overload.

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.

Usability Test

Shoppers needed an even more flexible, shorter, and guided onboarding process

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.

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 more pre-built database & skippable steps

Guided onboarding is favored over intent-driven ones

Iteration

Initially, I thought key questions couldn't be skipped. However, I realized I need to be more empathetic, finding ways to reduce the user's load while still gathering the information.

1. Users need the flexibility to skip or choose from presets

Before

After

Break the AI stylist flow into two separate tasks: 'My Avatar' and 'My Fashion Preferences.' Users can save and edit their information and preferences, allowing them to return anytime to make adjustments for greater flexibility.

2. Break 1 long onboarding process down to 2 shorter tasks

Before

After

3. Change 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.

Before: one open-ended question

After: multiple guided questions

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