ASOS
ASOS
ASOS
ASOS
An AI feature added to ASOS aims to elevate the shopping experience by introducing a virtual shopping assistant.
An AI feature added to ASOS aims to elevate the shopping experience by introducing a virtual shopping assistant.
An AI feature added to ASOS aims to elevate the shopping experience by introducing a virtual shopping assistant.
An AI feature added to ASOS aims to elevate the shopping experience by introducing a virtual shopping assistant.
Scope
Scope
Scope
User research, User Interviews, Data Synthesis, Information architecture, Usability testing, Prototyping,
User research, User Interviews, Data Synthesis, Information architecture, Usability testing, Prototyping,
Tools
Tools
Tools
Figma, Figjam, Notion
Figma, Figjam, Notion
Role
Role
Role
UX Researcher & Product Designer
UX Researcher & Product Designer
Background
Background
Background
A recent survey revealed that 22% of online customers expressed dissatisfaction with the website's complex navigation, indicating a strong need for a more streamlined browsing experience to help them find what they're looking for with ease.
A recent survey revealed that 22% of online customers expressed dissatisfaction with the website's complex navigation, indicating a strong need for a more streamlined browsing experience to help them find what they're looking for with ease.
A recent survey revealed that 22% of online customers expressed dissatisfaction with the website's complex navigation, indicating a strong need for a more streamlined browsing experience to help them find what they're looking for with ease.
The Problem
The Problem
The Problem
Users face difficulties navigating the ASOS website, particularly due to the complexity of the inventory structure, making it challenging to find desired items easily. We are going to explore if an AI tool such as Chat GPT is a possible solution.
Users face difficulties navigating the ASOS website, particularly due to the complexity of the inventory structure, making it challenging to find desired items easily. We are going to explore if an AI tool such as Chat GPT is a possible solution.
Users face difficulties navigating the ASOS website, particularly due to the complexity of the inventory structure, making it challenging to find desired items easily. We are going to explore if an AI tool such as Chat GPT is a possible solution.
The Solution
The Solution
The Solution
Introduce a virtual assistant like ChatGPT to aid users in navigating ASOS, finding items efficiently, offering personalized suggestions, and simplifying the shopping process. Incorporating natural language capabilities ensures interactions are tailored to individual needs and interests.
Introduce a virtual assistant like ChatGPT to aid users in navigating ASOS, finding items efficiently, offering personalized suggestions, and simplifying the shopping process. Incorporating natural language capabilities ensures interactions are tailored to individual needs and interests.
Introduce a virtual assistant like ChatGPT to aid users in navigating ASOS, finding items efficiently, offering personalized suggestions, and simplifying the shopping process. Incorporating natural language capabilities ensures interactions are tailored to individual needs and interests.
Sizing Questionnaire
Sizing Questionnaire
Sizing Questionnaire
Unlock personalized recommendations with the sizing questionnaire. Answer a few questions to get tailored shopping suggestions based on your style and fit preferences. Experience hassle-free shopping curated just for you.
Unlock personalized recommendations with the sizing questionnaire. Answer a few questions to get tailored shopping suggestions based on your style and fit preferences. Experience hassle-free shopping curated just for you.
Prompts for Outfit Discovery
Prompts for Outfit Discovery
Prompts for Outfit Discovery
Discover your perfect outfit effortlessly with AI-guided recommendation prompts. Explore personalized styles tailored to your taste, saving time. Seamlessly navigate to checkout for a smooth shopping experience.
Discover your perfect outfit effortlessly with AI-guided recommendation prompts. Explore personalized styles tailored to your taste, saving time. Seamlessly navigate to checkout for a smooth shopping experience.
Review History & Explore Customer Reviews
Review History & Explore Customer Reviews
Review History & Explore Customer Reviews
Rediscover past prompts and conversations effortlessly with intuitive history features. Dive into product discovery through positive customer reviews and personalized recommendations.
Rediscover past prompts and conversations effortlessly with intuitive history features. Dive into product discovery through positive customer reviews and personalized recommendations.
Research
To refine the shopping experience, I engaged in user interviews to uncover their needs and pain points. Simultaneously, I delved into market research, exploring the implementation of an AI tool—an innovative concept that remains relatively unexplored in the industry.
To refine the shopping experience, I engaged in user interviews to uncover their needs and pain points. Simultaneously, I delved into market research, exploring the implementation of an AI tool—an innovative concept that remains relatively unexplored in the industry.
Interview Overview
Demographic
Females aged between 22 to 35
Females aged between 22 to 35
Interview Method
30 Minute google meet calls & Phone calls
30 Minute google meet calls & Phone calls
Number of Participants
5
5
Target Audience
Frequent and Occasional Shoppers of ASOS
Frequent and Occasional Shoppers of ASOS
Interview Insights
Karen
Intentional Shopper
“It’s so overwhelming even when you try to apply so many filters theirs so much stuff.
Karen
Intentional Shopper
“It’s so overwhelming even when you try to apply so many filters theirs so much stuff.
Karen
Intentional Shopper
“It’s so overwhelming even when you try to apply so many filters theirs so much stuff.
Amanda
Size Specific Shopper
“ I need very particular sizes that are hard to find in store so I don’t have a lot of options”
Amanda
Size Specific Shopper
“ I need very particular sizes that are hard to find in store so I don’t have a lot of options”
Amanda
Size Specific Shopper
“ I need very particular sizes that are hard to find in store so I don’t have a lot of options”
Sabrina
Occasional Shopper
“sometimes even when I’m very specific with my filters they include random items that are clearly supposed to be there”
Sabrina
Occasional Shopper
“sometimes even when I’m very specific with my filters they include random items that are clearly supposed to be there”
Sabrina
Occasional Shopper
“sometimes even when I’m very specific with my filters they include random items that are clearly supposed to be there”
Shea
Frequent Shopper
“There’s a big incentive to use AI to make your work more streamline and easier”
Shea
Frequent Shopper
“There’s a big incentive to use AI to make your work more streamline and easier”
Shea
Frequent Shopper
“There’s a big incentive to use AI to make your work more streamline and easier”
Affinity Mapping
Upon completing user interviews, I compiled the gathered insights and was able to see recurring patterns.
Upon completing user interviews, I compiled the gathered insights and was able to see recurring patterns.
Key Findings
01
01
ASOS's extensive catalog overwhelms users, desiring simplified browsing and better organization.
ASOS's extensive catalog overwhelms users, desiring simplified browsing and better organization.
02
02
Limited size availability in physical stores leads users to rely heavily on online platforms like ASOS.
Limited size availability in physical stores leads users to rely heavily on online platforms like ASOS.
03
03
Users appreciate personalized recommendations, curated browsing, and finding flattering clothing.
Users appreciate personalized recommendations, curated browsing, and finding flattering clothing.
04
04
Users are open to exploring AI applications like chatbots, styling, and virtual try-on.
Users are open to exploring AI applications like chatbots, styling, and virtual try-on.
Market Research- Competitve Analysis
All these competitors embraced AI technology; however, the novelty of this technology makes it less widespread in the fashion e-commerce sector, posing challenges of limited access to information.
All these competitors embraced AI technology; however, the novelty of this technology makes it less widespread in the fashion e-commerce sector, posing challenges of limited access to information.
All these competitors embraced AI technology; however, the novelty of this technology makes it less widespread in the fashion e-commerce sector, posing challenges of limited access to information.
To understand how an AI chatbot could be incorporated, I examined three competitors currently using AI technology. This helped identify potential features and gain insights.
To understand how an AI chatbot could be incorporated, I examined three competitors currently using AI technology. This helped identify potential features and gain insights.
The Good
One of the few fashion e-commerce stores with integrated ChatGPT.
One of the few fashion e-commerce stores with integrated ChatGPT.
Gives examples of what type of prompts to use
Gives examples of what type of prompts to use
Well-designed interface, user-friendly categories enhance the browsing experience.
Well-designed interface, user-friendly categories enhance the browsing experience.
The Bad
Platform doesn't auto-filter gender; users have to manually apply filters to search results.
Platform doesn't auto-filter gender; users have to manually apply filters to search results.
Platform lacks explanations for item selection after entering a prompt.
Platform lacks explanations for item selection after entering a prompt.
The Good
Provides examples of the types of prompts that can be utilized.
Provides examples of the types of prompts that can be utilized.
Tutorial demonstrates clean, straightforward use, making comprehension easy for users.
Tutorial demonstrates clean, straightforward use, making comprehension easy for users.
It remembers preferences, constantly curating the best products for you.
It remembers preferences, constantly curating the best products for you.
The Bad
It is still in beta
It is still in beta
No e-commerce websites currently implement this feature as of now.
No e-commerce websites currently implement this feature as of now.
No demo available, preventing personal testing opportunity for me.
No demo available, preventing personal testing opportunity for me.
The Good
Uses Chat GPT as an AI-powered shopping assistant.
Uses Chat GPT as an AI-powered shopping assistant.
Offers a recommended option with detailed reasoning when presented a question.
Offers a recommended option with detailed reasoning when presented a question.
Displays UI card with clickable button linking to associated product.
Displays UI card with clickable button linking to associated product.
The Bad
Couldn't find feature on KNXT site; hard to find, had to Google search.
Couldn't find feature on KNXT site; hard to find, had to Google search.
Presents a single option when requesting an outfit.
Presents a single option when requesting an outfit.
This feature is exclusively available to cryptocurrency users.
This feature is exclusively available to cryptocurrency users.
Define
After completing research via user interviews, synthesizing insights, and compiling a competitive analysis, a clear understanding of user needs emerged, allowing me to define the associated problems.
After completing research via user interviews, synthesizing insights, and compiling a competitive analysis, a clear understanding of user needs emerged, allowing me to define the associated problems.
User Persona
For the Style Conscious shopper and Efficient Fashion Seeker
For the Style Conscious shopper and Efficient Fashion Seeker
For the Style Conscious shopper and Efficient Fashion Seeker
After conducting the interviews, I documented numerous goals, preferences, behaviors, and pain points, which I categorized into two distinct personas that I believed most accurately represented the users' insights. These personas continued to guide my decision-making process as I progressed with the product.
After conducting the interviews, I documented numerous goals, preferences, behaviors, and pain points, which I categorized into two distinct personas that I believed most accurately represented the users' insights. These personas continued to guide my decision-making process as I progressed with the product.
Defining The Problems
How might we leverage technology for an efficient, personalized shopping experience, optimizing item discovery and saving time through filtering and recommendations?
How might we leverage technology for an efficient, personalized shopping experience, optimizing item discovery and saving time through filtering and recommendations?
How might we leverage technology for an efficient, personalized shopping experience, optimizing item discovery and saving time through filtering and recommendations?
Understanding Olivia and Emily’s needs and insights, my aim was to explore more deeply to discern the most critical problem to solve. By formulating (POV) statements, I crafted questions that facilitated the determination of the most effective solution.
Understanding Olivia and Emily’s needs and insights, my aim was to explore more deeply to discern the most critical problem to solve. By formulating (POV) statements, I crafted questions that facilitated the determination of the most effective solution.
Design
With the problem outlined, I delved into creating user flows and task flows to establish efficient navigation and encourage specific user actions. I started with sketches to determine the layout of essential information, which evolved into high-fidelity designs with a few iterations along the way.
With the problem outlined, I delved into creating user flows and task flows to establish efficient navigation and encourage specific user actions. I started with sketches to determine the layout of essential information, which evolved into high-fidelity designs with a few iterations along the way.
Sizing Questionnaire
1.Sizing Questionnaire
To deliver a personalized shopping experience with filtered recommendations, I initiated the process by introducing a sizing questionnaire for new users to complete.
To deliver a personalized shopping experience with filtered recommendations, I initiated the process by introducing a sizing questionnaire for new users to complete.
To deliver a personalized shopping experience with filtered recommendations, I initiated the process by introducing a sizing questionnaire for new users to complete.
I began by crafting a user flow, aiming to comprehend the essential needs of both new and existing users, ensuring a straightforward navigation experience within the feature.
I began by crafting a user flow, aiming to comprehend the essential needs of both new and existing users, ensuring a straightforward navigation experience within the feature.
With the established user flow, I proceeded to develop a task flow for the questionnaire, emphasizing essential questions to inform size recommendations based on the ASOS sizing guide.
With the established user flow, I proceeded to develop a task flow for the questionnaire, emphasizing essential questions to inform size recommendations based on the ASOS sizing guide.
Lo-fidelity key screens: Sizing Questionnaire
Lo-fidelity key screens: Sizing Questionnaire
Hi-fidelity key screens: Sizing Questionnaire
Hi-fidelity key screens: Sizing Questionnaire
1
Problem:
Radio buttons confine users to a single choice, and there is no progress bar indicator for the onboarding process.
1
Problem:
Radio buttons confine users to a single choice, and there is no progress bar indicator for the onboarding process.
1
Problem:
Radio buttons confine users to a single choice, and there is no progress bar indicator for the onboarding process.
1
Problem:
Radio buttons confine users to a single choice, and there is no progress bar indicator for the onboarding process.
2
Solution:
Added a progress bar and changed the question to be more Inclusive
2
Solution:
Added a progress bar and changed the question to be more Inclusive
2
Solution:
Added a progress bar and changed the question to be more Inclusive
2
Solution:
Added a progress bar and changed the question to be more Inclusive
3
Solution:
Introduced an additional question to refine and enhance the recommendation filtering process.
3
Solution:
Introduced an additional question to refine and enhance the recommendation filtering process.
3
Solution:
Introduced an additional question to refine and enhance the recommendation filtering process.
3
Solution:
Introduced an additional question to refine and enhance the recommendation filtering process.
Test Users..
Test Users..
Test Users..
📝 Test users on the clarity of the instructions and ease of interaction with the sizing style questionnaire provided valuable insights into the user experience.
📝 Test users on the clarity of the instructions and ease of interaction with the sizing style questionnaire provided valuable insights into the user experience.
New User Access: Explore AI Feature & Find an Outfit
2.New User Access: Explore AI Feature & Find an Outfit
To optimize item discovery and save time, I created a prompt to find outfits, showcasing AI capabilities and guiding users to swiftly reach the checkout page.
To optimize item discovery and save time, I created a prompt to find outfits, showcasing AI capabilities and guiding users to swiftly reach the checkout page.
To optimize item discovery and save time, I created a prompt to find outfits, showcasing AI capabilities and guiding users to swiftly reach the checkout page.
I drew inspiration from AI chat design patterns to create a task flow that feels familiar to experienced users and ensures easy navigation for newcomers.
I drew inspiration from AI chat design patterns to create a task flow that feels familiar to experienced users and ensures easy navigation for newcomers.
Lo-fidelity key screens: Explore AI Feature & Find an Outfit
Lo-fidelity key screens: Explore AI Feature & Find an Outfit
Hi-fidelity key screens: Explore AI Feature & Find an Outfit
Hi-fidelity key screens: Explore AI Feature & Find an Outfit
1
Problem:
Providing numerous options at a glance can overwhelm users, undermining the goal of optimizing item discovery.
1
Problem:
Providing numerous options at a glance can overwhelm users, undermining the goal of optimizing item discovery.
1
Problem:
Providing numerous options at a glance can overwhelm users, undermining the goal of optimizing item discovery.
1
Problem:
Providing numerous options at a glance can overwhelm users, undermining the goal of optimizing item discovery.
2
Problem:
Limiting the 'Add to Bag' button to the UI card click disrupts the chat interaction flow and misses the opportunity to deliver a swift and seamless shopping experience.
2
Problem:
Limiting the 'Add to Bag' button to the UI card click disrupts the chat interaction flow and misses the opportunity to deliver a swift and seamless shopping experience.
2
Problem:
Limiting the 'Add to Bag' button to the UI card click disrupts the chat interaction flow and misses the opportunity to deliver a swift and seamless shopping experience.
2
Problem:
Limiting the 'Add to Bag' button to the UI card click disrupts the chat interaction flow and misses the opportunity to deliver a swift and seamless shopping experience.
3
Solution:
Display one card with the option to regenerate the answer
3
Solution:
Display one card with the option to regenerate the answer
3
Solution:
Display one card with the option to regenerate the answer
3
Solution:
Display one card with the option to regenerate the answer
4
Solution:
Included the “Add to Bag” button directly in the chat box
4
Solution:
Included the “Add to Bag” button directly in the chat box
4
Solution:
Included the “Add to Bag” button directly in the chat box
4
Solution:
Included the “Add to Bag” button directly in the chat box
Test Users..
Test Users..
Test Users..
📝 Test users' comprehension of prompts and the checkout process for adding items to the bag, evaluating their ability to seamlessly navigate and complete the desired actions.
📝 Test users' comprehension of prompts and the checkout process for adding items to the bag, evaluating their ability to seamlessly navigate and complete the desired actions.
Existing User Access: Review history and get recommendations from customer reviews
3.Existing User Access: Review history and get recommendations from customer reviews
To recall past prompts or continue conversations, users can access their history and for product discovery based on positive reviews and recommendations, they can explore the customer reviews section.
To recall past prompts or continue conversations, users can access their history and for product discovery based on positive reviews and recommendations, they can explore the customer reviews section.
To recall past prompts or continue conversations, users can access their history and for product discovery based on positive reviews and recommendations, they can explore the customer reviews section.
I drew inspiration from AI chat design patterns to create a task flow that feels familiar to experienced users and ensures easy navigation for newcomers.
I drew inspiration from AI chat design patterns to create a task flow that feels familiar to experienced users and ensures easy navigation for newcomers.
The task flow for accessing the chat feature and making a request mirrors the process for new users, with the only difference being that existing users land on the AI homepage, distinct from the new user AI homepage.
The task flow for accessing the chat feature and making a request mirrors the process for new users, with the only difference being that existing users land on the AI homepage, distinct from the new user AI homepage.
Lo-fidelity key screens: Review history and recommendations
Lo-fidelity key screens: Review history and recommendations
Hi-fidelity key screens: Review history and recommendations
Hi-fidelity key screens: Review history and recommendations
1
Problem:
Displaying all the reviews in the conversation could create excessive cognitive load.
1
Problem:
Displaying all the reviews in the conversation could create excessive cognitive load.
1
Problem:
Displaying all the reviews in the conversation could create excessive cognitive load.
1
Problem:
Displaying all the reviews in the conversation could create excessive cognitive load.
2
Solution:
Display a single review with the option to click on the card for additional reviews.
2
Solution:
Display a single review with the option to click on the card for additional reviews.
2
Solution:
Display a single review with the option to click on the card for additional reviews.
2
Solution:
Display a single review with the option to click on the card for additional reviews.
Test Users..
Test Users..
Test Users..
📝 Test to see if user’s can easily navigate to the AI screen homepage as an existing user and evaluate if users can complete the task of asking for recommendations.
📝 Test to see if user’s can easily navigate to the AI screen homepage as an existing user and evaluate if users can complete the task of asking for recommendations.
Testing
After completing the hi-fi wireframes, I conducted moderated usability testing with 5 participants aged between 22 and 35. Following the insights gathered, a few adjustments were implemented.
After completing the hi-fi wireframes, I conducted moderated usability testing with 5 participants aged between 22 and 35. Following the insights gathered, a few adjustments were implemented.
Usability Objectives
01
📝 Test users on the clarity of the instructions and ease of interaction with the sizing style questionnaire provided valuable insights into the user experience.
01
📝 Test users on the clarity of the instructions and ease of interaction with the sizing style questionnaire provided valuable insights into the user experience.
01
📝 Test users on the clarity of the instructions and ease of interaction with the sizing style questionnaire provided valuable insights into the user experience.
01
📝 Test users on the clarity of the instructions and ease of interaction with the sizing style questionnaire provided valuable insights into the user experience.
02
📝 Test users' comprehension of prompts and the checkout process for adding items to the bag, evaluating their ability to seamlessly navigate and complete the desired actions.
02
📝 Test users' comprehension of prompts and the checkout process for adding items to the bag, evaluating their ability to seamlessly navigate and complete the desired actions.
02
📝 Test users' comprehension of prompts and the checkout process for adding items to the bag, evaluating their ability to seamlessly navigate and complete the desired actions.
02
📝 Test users' comprehension of prompts and the checkout process for adding items to the bag, evaluating their ability to seamlessly navigate and complete the desired actions.
03
📝 Test to see if user’s can easily navigate to the AI screen homepage as an existing user
03
📝 Test to see if user’s can easily navigate to the AI screen homepage as an existing user
03
📝 Test to see if user’s can easily navigate to the AI screen homepage as an existing user
03
📝 Test to see if user’s can easily navigate to the AI screen homepage as an existing user
04
📝 Evaluate if users can complete the task of asking for recommendations.
04
📝 Evaluate if users can complete the task of asking for recommendations.
04
📝 Evaluate if users can complete the task of asking for recommendations.
04
📝 Evaluate if users can complete the task of asking for recommendations.
Key Results
Task Completion Rate for task #1❗
Were able to complete the task #2 without any concerns❗
Were able to complete the task #3 without any concerns
Task Completion Rate for task #4
Feedback Grid
After completing usability testing with all users, I compiled their feedback into a structured grid. This allowed me to analyze and categorize the feedback, helping me identify the revisions that needed prioritization.
After completing usability testing with all users, I compiled their feedback into a structured grid. This allowed me to analyze and categorize the feedback, helping me identify the revisions that needed prioritization.
Iteration
Priority Revisions
Priority Revisions
Priority Revisions
After conducting user interviews and taking what I learned from the feedback grid, I began to make iterations.
After conducting user interviews and taking what I learned from the feedback grid, I began to make iterations.
Home Page: Improve Visibility of AI Icon
Home Page: Improve Visibility of AI Icon
Home Page: Improve Visibility of AI Icon
Sizing Questionnaire Page: Clarifying Style Size Quiz and Improving Guidance
Sizing Questionnaire Page: Clarifying Style Size Quiz and Improving Guidance
Sizing Questionnaire Page: Clarifying Style Size Quiz and Improving Guidance
Sizing Questionnaire Page: Addressing Issues with Size Chart Visibility
Sizing Questionnaire Page: Addressing Issues with Size Chart Visibility
Sizing Questionnaire Page: Addressing Issues with Size Chart Visibility
Conversation Interface Page: Clarity & Functionality Issues
Conversation Interface Page: Clarity & Functionality Issues
Results
My takeaways
What challenged me?
What challenged me?
What challenged me?
Given that AI is still a relatively new technology, particularly in the realm of e-commerce, navigating uncharted territory presented its challenges. It brought forth a unique set of hurdles and uncertainties, with fewer established best practices to rely on. Designing AI features to seamlessly integrate into the e-commerce landscape demanded innovative thinking and careful consideration of user needs while maintaining ASOS’s brand identity. Despite these challenges, it offered an opportunity to explore new approaches and contribute to the evolution of AI.
Given that AI is still a relatively new technology, particularly in the realm of e-commerce, navigating uncharted territory presented its challenges. It brought forth a unique set of hurdles and uncertainties, with fewer established best practices to rely on. Designing AI features to seamlessly integrate into the e-commerce landscape demanded innovative thinking and careful consideration of user needs while maintaining ASOS’s brand identity. Despite these challenges, it offered an opportunity to explore new approaches and contribute to the evolution of AI.
Next Steps
Re-Test
Re-Test
Re-Test
With the latest revisions, I intend to conduct another round of moderated testing to ensure the usability of the design.
With the latest revisions, I intend to conduct another round of moderated testing to ensure the usability of the design.
Explore My Other Work
