NAVIGATION REDESIGN
CONTEXT
ASOS had successfully built up a huge range of products, content, and features with over 90,000 products onsite at any one time. However, navigating such a broad site and large product mix can bring its challenges, in particular on mobile where screen real estate is limited.
​
The navigation had remained relatively unchanged for years, however as the tech stack was being re-platformed there was an opportunity to re-design both the information architecture and the navigation design across all platforms.
BUSINESS PROBLEMS
The previous navigation was inconsistent across platforms due to it using different navigational trees, which meant it was difficult for the trade optimisation team to update and also hard for customers to find what they were looking for when moving from web to app.
The desktop navigation was also not accessible as it could not be accessed via the keyboard and the links did not conform to AA standards as they were too small and hard to select, in particular on tablet.
DESKTOP
CUSTOMER PROBLEMS
I conducted user testing on the existing navigation on both mobile and desktop to identify the current problems and usability issues customers were having when trying to find products.
TOO MANY LINKS
There were a lot of links in the main navigation (over 80) which made it hard for customers to scan and find what they were looking for.
USE OF COLOUR & BOLD TEXT
Categories and propositions were often put in red or bold to help them stand out as there was no dedicated marketing space.
MIXING CATEGORY TYPES
Body shape and propositions were mixed together with product categories making them difficult to discover.
EDITS & ASOS MARKETPLACE
The "Edits" section was generally missed and not understood and customers didn't realise ASOS Marketplace was a separate site.
LOCALISATION
When links were localised e.g. changing jumpers to sweaters in the US, they were not re-organised into alphabetical order making them harder to find.
FLOORS AND HEADINGS
It was unclear on mobile whether the customer was shopping within the Women's or Men's section, additionally headings within the mobile navigation were also not prominent enough.
GOALS
-
Increase awareness of the breadth of product categories ASOS has to offer
-
Increase discoverability and speed at which customers could find what they were looking for
-
Ensure the ASOS navigation is accessible and meets AA standards
-
Improve the workflow of the trade optimisation team
INFORMATION ARCHITECTURE
CARD SORTING
To help define the information architecture I conducted an open card sort where participants were asked to sort the current categories into groups and to name those groups.
On average participants sorted the WW categories into 10 groups
and the MW categories into 8 groups.
TREE TESTING
Using the findings from the card sort we then used these groupings as a basis to redesign the information architecture and went through several iterations where we asked participants to complete a variety of tasks and measured the success rate, time taken and directness. We also compared these results to the original IA.
The new navigational tree improved the overall success rate by 14%
IDEATION
Using the new navigational tree we then explored multiple design options.
USER TESTING
We then went through several rounds of user testing and preference tests to refine the designs and test the discoverability of different categories.
FINAL DESIGNS
LEVEL 1
LEVEL 2
RESPONSIVE
The web navigation was also fully responsive across different breakpoints on mobile, tablet and desktop.
OUTCOMES
The new navigation resulted in an increase in conversion rate of 2.07%.
​
There was a 37% increase in visits to face + body products, a 19% increase in visits to gifts, and a 6% increase in visits to accessories.
​
The NPS score increased by 1.54 points for "easy to find" and it also increased by 3.18 points for "browse and purchase on device".
​
We also conducted a satisfaction survey pre and post launch and customer satisfaction increased by 4.94%.