top of page

ASOS

The Future e-Fashion Shopping Experience.
iphone-11-pro-screen-mockup-copy@2x (1).

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
Screen Shot 2020-07-27 at 10.57.32 pm.pn
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
Screen Shot 2020-07-27 at 10.57.38 pm.pn
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
sonnie-hiles-pU4J5VFnqCQ-unsplash.jpg
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

Frame 10.png

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

Untitled_Artwork 7.jpg
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.

Ana.png
Elaine.png
Yin.png
Elaine1.png

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 !?!?!
Twitter Post - 1.png

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 !?!
Twitter Post - 2.png

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 !?!
Twitter Post - 3.png

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!"
Twitter Post - 4.png

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.
simple-iphone-x-mockup-for-dribbble@2x.p

Implementation of features

Reviews
X - 73.png
Virtual Try On
Try On - 2.3.png
Material Specification
Material Specifications - 2.jpg
Fit Assitant
Sizing - 1.jpg

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.

bottom of page