ASOS Shopping App Redesign

ASOS | ECOMMERCE | AWARD-WINNING

The challenge

• The ASOS app at the time was a “transcoded” version of the website, and was starting to cause issues with user interaction and reliability
• ASOS senior management had a desire to refresh the app to be more in line with the forward-thinking, fashionable ASOS brand and to future-proof it as much as possible.

Discovery

The current ASOS app at the time, circa 2014, was not easy to navigate. Users were often complaining about having to scroll through a long list of links to get to categories they liked.

The mobile app shared the structure provided by the website. This was a legacy structure that was never designed as mobile-first.

You can see in this diagram that the navigation was deep and narrow and this is not an ideal structure. When creating a website, you’d normally aim for broad and shallow. This pattern makes it easier to understand the structure of the site and the key categories being presented. Shop by Edit meant nothing to most users, as you might expect.

Defining user types

In the discovery phase, I led a group exercise to assess the user behaviour and attitudes and grouped users accordingly to create personas. I used a combination of analytics, data science outputs and attitudinal consumer insights that had been provided by the marketing team to create four distinct personas to embody the following behavioural archetypes:

• Clothes Conscious, Male
• Fashion Forward / Influencer, Female
• Fashion Aspirational, Female
• Fashion Aspirational, Male

I also created experience maps for each persona. I used a simple approach to highlight the current journey, pain points and feelings, and these were based on the most common journeys we observed via analytics.

Experience map

Visual artefact used in ideation sessions to define opportunities

User personas

Used throughout the project to inform feature priorities and navigation journeys

Defining design challenges

We boiled down the design challenges into distinct sections:

• Search and navigation
• Viewing products
• Saving and re-finding
• Buying and delivery

In this case study we’ll be focusing on the first two design challenges related to Navigation and viewing products.

Search and navigation

Key issues here were around getting an initial understanding of the range of products without being overwhelmed, and easily being able to tap and navigate on a mobile device. Part of the challenge highlighted here was the dislike for the long list of categories being complex looking and hard to read. We needed a different approach.

Finding the navigation menu was the first challenge we needed to define. A hamburger type menu was used in the current app and this was not ideal for tap zones where key controls are better placed at the bottom of the screen. There was also a separation between search and category navigation which likely didn’t make sense to users. Apps like Instagram and Airbnb had merged these functions which seemed to fit a clear mental model of “finding” whether that was via a typed search or tapping navigational links.

Visual navigation is usually reserved for in-page navigation, however we felt that the main navigation would benefit from a visual treatment. In the screen map below, you can see the entire product navigation journey (without errors and edge cases which were documented separately). Visual navigation was intended to be the key starting point for users with 10 of the most popular/best selling categories highlighted, while the full (and long) navigation list provided by the website API was provided as a secondary function.

Key hypothesis for navigation:
We believe that visual categories will make it easier for customers to browse to specific category without showing signs of fatigue or being overwhelmed

We also looked at a number of challenges and opportunities related to search, such as visual search and popular searches, however these were not the core focus for this sprint and were broadened out into a plan for the search product team to cover over the following year.

Viewing products

When viewing a list of products, sorting and filtering was an important topic for us to cover. The current filtering mechanism had a number of usability issues that we were keen to rectify. 

Regarding filtering, we wanted to gather user feedback on two separate points:

• Filter information architecture / categorisation: Were the filters organised in a manner that users found helpful?
• Filter interaction design: Was filtering performed in a manner that users expected and found easy to use?

When viewing products, we were keen to explore a number of aspects:

• Would a cleaner, more focused product view make products appear more attractive without detracting from navigation to other products?
• Would we need to show “sticky” buttons on the product view or could we expect users to scroll to find key controls?
• Would additional product information and videos add significant positive feedback for users?

Key hypotheses for viewing products:

• Filtering: We believe a single “Apply” button would be easily understood and will not cause confusion when navigating between levels of filtering
• Viewing products: We believe a clean product page which promotes save for later and sharing will receive positive feedback from users and would encourage more save for later interactions

We had a number of sub-hypotheses to test alongside these primary hypotheses, but these were they key elements to understand.

Design

I created wireframes for a number of different scenarios including different categories, different interaction patterns for refinement, and a number of layouts from the product detail view that promoted different elements, or had slightly different interactions for adding to bag.

User testing

I created the user testing protocols, interactive clickable prototypes and performed the user testing via Usertesting.com as unmoderated tests. I found that users were more apt to give critical and honest feedback in unmoderated testing vs moderated testing. 

Navigation

Navigation patterns from the current app at the time were tested and compared against visual category navigation. Neither was labelled as “Old” or “New” and the order was randomised.

User test 1, n=10, UK and USA

8 out of 10 participants preferred the visual navigation compared to the long list view presented in the control, however there were usability challenges highlighted with finding the “All Categories” button which sat below the visual categories.

User test 2, n-10, UK and USA

“All Categories” button placed near the top below WOMEN/MEN segment control. 7 out of 10 participants preferred the revised layout due to ease of finding specific categories. 2 participants undecided and 1 participant preferred the older version. Task completion metrics were much better in the iteration with less time spent finding a specific category.

Product details

As the new product details page took a completely different approach to the current app, a side-by-side comparison was not deemed feasible. Instead, we user tested various layouts for the new design, with the various page controls being placed in different positions. We were also keen to understand whether a “grow” animation would influence users in encouraging a “swipe down to dismiss” behaviour. Popular apps at the time like Instagram had started to introduce this pattern, yet it was not a standard on either iOS or Android which relied on tap gestures (on a back arrow or X) to dismiss screens. We felt that a simple swipe down gesture would make browsing much more fluid.

User test 1, n=10, UK and USA

Participants responded well to this layout mentioning the Save and Share function without any prompting. This met the initial hypothesis we were looking to test. However, the swipe view for images caused some confusion, with some participants not understanding how to find other images.

User test 2, n=10, UK and USA

No key difference highlighted in comprehension or usability, but some participants commented that Variant A (left image) looked cleaner. For variant A, “Save” was again mentioned un-prompted which meant the hypothesis was proven to our satisfaction and this became the product page design going forward. The key difference in user testing between test 1 and 2 was that participants instinctively understood the image swipe due to the visual indicator pips and how to activate the video in Variant A. Note: Product videos were a very popular feature, and somewhat of a USP for ASOS at the time. Bear in mind, this was 2015.

Results

Improved user satisfaction with core app journey, with improved navigation, better filtering and cleaner, more attractive and useful product detail views

The app benefitted from an +0.8ppt increase on purchases YOY from 1.9% to 2.7% purchases per unique visitor/per month generating £84million incremental sales. Save for later interactions increased by 75%, with less needless add to bag interactions due to the design decisions we made. These changes allowed more stock to be available for shoppers while still allowing them to save and track items they’re interested in. This had a remarkable net positive effect on shoppers, with complaints about stock availability also decreasing.

We were absolutely delighted with the results and the app was awarded Best Use of Mobile at the BT Retail Week Tech & Ecomm Awards Winners 2015