ASOS
The Future e-Fashion Shopping Experience.
_.png)
The Problem
A lot of people struggle in picking up correct sizes and assessing the product's quality while shopping online.
Online shopping has been a big trend and is still growing. The COVID-19 situation has pushed it forward faster than ever.
While our users love to shop online, they often have experiences that taint their views on e-fashion. This includes difficulty in picking the right size and assessing the product’s quality. This in turn means the need to return the item, which causes inconvenience.
My Role
Role
Interviews | User Research | Usability testing | Feature ideation | User flows | Presentation
Methods
Competitive Analysis, Affinity Mapping, Ideation Workshop, Survey, Card Sorting, Interview with an SME
Team Members
Jasmine Bilham | Cassandra Nie
Time
2.5 Weeks
Tools
Figma, Invision & Miro
Opportunity
61 %
of online shopping in 2020 was in the fashion industry
911 million
online fashion shoppers are expected to hit by 2020
95%
of shopping will be online by 2040
User Research
To get greater insights into our users, we did 15 interviews & surveys (42 Responses) to get an understanding of what problems people face and what are the expectations of the people while shopping online. These interviews and surveys helped us in understanding the users, their interests, and pain points.
Insights from Interviews
Enjoy the convenience of shopping online
- 59% of the users preferred online shopping over in-store shopping
- 10 out of 15 users selected mobile as their online shopping device.
Return items due to wrong sizes
The confusion of sizes always leads to buying clothes with wrong sizes.
Visualize how the
clothes will fit onto their bodies
Users mentioned visualizing the stuff on them. So that they can mismatch different items together.
Reviews on the item before buying
Reviews provide Constructive criticism and
suggestions from other
customers
Insights from Surveys (42 Responses)
Main Reasons for returning items -
1. Incorrect Sizes
2. Product doesn't look as it did online
Importance of reviews -
We asked our users to state how much they value product reviews on a scale of 1 to 5
76 %
of users value product reviews
Three of the most important features on a product's page?
1. Reviews
2. Product Materials
3. Size Guide
This helped us in creating User Persona and User Journey Map, which turned out to be really useful while listing out the features for Minimum Viable Product.
Persona
Passionate Online Browser
Mahima, 25
“If the model is nothing like me - is it actually going to look good on me?”
-
A regular browser, but will buy something when she has her heart set on it
-
Loves the convenience of online shopping
-
Gets easily confused by different size guides
-
Finds it hard to visualize an item on her rather than the model
-
She likes to see reviews and tries to get as much detail about the product as possible
-
Mahima hates going through the return process
User Journey Map - Passionate Online Browser
Solution
Users need a convenient digital platform that provides them with features that are as close to a real-life experience as possible in order to build their trust and make them feel more assured in their purchase.
Features
Review Section
Constructive criticism and
suggestions from other
customers.
Material Specifications
To understand the fabric specifications of the garment.
Fit Assistant
Adding more specs to the existing Fit Assist, which helps in finding the
perfect size at the first go.
Virtual Try On
Helps in visualising the fits of different items on users to provide an in-store experience.
Ideation
Once we better understood our idea and explored our data, we began additional ideation for our vision. We quickly settled on the basic components and layout of our visualisation through several quick rounds of sketches.
Workshop
Our ideation workshop was fun and quite successful. We hosted it via Zoom & used Figma for the ease of collaboration. We asked 5 individuals to ideate on some challenges we were facing, such as:
1. How would they go about fixing sizing problems?
Suggestion: Have specific measurements on the Fit Assist and convert sizes to an understandable and universal measure.
2. What would be the best way to get a sense of material online?
Suggestion: Create samples to send to customers or a swatch book.
3. How would they expect to use a virtual try-on feature?
Suggestion: Link to virtual try on from the product screen around the information page.
Design
Converging Ideas into Design
We tested our 1st iteration prototype with 7 candidates, observed users interacting with them, and listened to their likes and dislikes. Some common feedback arose:
1. Still want to know the specification of the material !?!?!
When a user views a product - we included a feature that picked up on the product’s material. If a user has purchased something of similar material in the past, they will notify you.
We received multiple suggestions from our usability tests saying that they would like to see what the specific material was, e.g. cotton, polyester, etc.
2. Can't find the fit assistant !?!
Feedback from users suggested that the “Fit Assist” icon was far too small. Nearly all of the people we tested brushed past this feature as it was “not noticeable enough”
This led us to the idea of potentially making a pop-up, or larger text.
3. Virtual try seems to be unavailable !?!
In the current ASOS’ current application the ‘Save’ button is in black and the other icons are in grey. We copied this design in our first iteration. However, this did not work for our users. Most identified the grey as being ‘unavailable' and were hesitant to click on the buttons.
So, we decided to make all icons black in our second iteration.
4. "I prefer to search for items!"
In our usability testing, we found that users were looking for a search bar function but we didn't provide that in our flow. We have only allowed them to search through categories and filtering.
We decided it was important to include this in our flow for next time.
Prototype
We used Figma Prototyping tool to create iterations of the app. It was helpful to play with the interactions in the design.
Click on the screen to start the prototype.
Implementation of features
Reviews
Virtual Try On
Material Specification
Fit Assitant
For our final iteration, we did five usability tests at the end and we were able to receive some predominantly positive feedback.
All five users were able to complete the requested task with ease.
Next Steps
- As this is a prototype tested with very few users, we would like to do more usability tests and iterations of our current design.
- We would further like to research the Virtual try on feature we implemented to find out whether it is entirely feasible or not.
- Chat with more SMEs about what they value in an e-fashion experience.