Browns
Top Navigation Redesign
2021
As the lead designer on this project, I redesigned the navigation to introduce new categories (Homewear and Kidswear) and I used this opportunity to address known pain points for our customers. It resulted in a 20% increase in CTR and in positive qualitative feedback from user testing.
Discover
Data Analysis
Usability Testing
Competitors Analysis
Define
Internal Workshops
Features Prioritisation
Information Architecture
Design
Sketching
Wireframing
Prototyping
User Testing
Deliver
Refinement
Handover
Results
Next Steps
Tools
Figma
Figjam
Miro
Confluence
Discover
I first wanted to understand how the current navigation was performing, to outline any areas of opportunity, user needs, usability issues or pain points.
DATA ANALYSIS
With the support of the data team, I started by analysing the interactions with our current nav, looking at events triggered in the last 6 months (e.g. CTR, Conversion Rate, and Revenue).
We discovered that:
- 80% of total navigation’s clicks were concentrated in 5 categories.
- Over 100 categories had no CTR and drove 0% revenue
- The majority of images had low CTR and generated 0% of revenue
This confirmed our previous assumption that the current navigation was too cluttered, and also raised questions about the necessity of having imagery within the navigation.
COMPETITORS ANALYSIS
I then performed a competitors analysis to review how other multibrand retailers presented different departments, as well as to identify common patterns in navigation on both web and app.
USABILITY TESTING
In order to understand how our customers were using the navigation, and uncover any pain points, usability issues, and user needs, I facilitated usability tests to assess the current designs.
The main findings were that:
- Users expected some product categories to be genderless, such as accessories and homewear
- Users often accidentally browsed within the wrong gender
- Users had difficulty finding certain categories of products, such as homewear
- Users were overwhelmed by the number of links in the navigation
This was in line with our data analysis findings and further confirmed our previous assumption that the current navigation was too cluttered. It also highlighted how the current interactions on the navigation could lead to user errors (e.g. browsing the wrong gender).
Define
Next, I summarised the findings and aligned internally with key stakeholders on the main goals and success metrics of the project.
WORKSHOPS
I facilitated internal workshops to align with the key stakeholders on next steps, agree on timeline and milestones, and outline any limitations we might have from both a resource and a technical perspective.
We also used this opportunity to confirm the success metrics of this project (CTR), as well as the monitoring metrics (CVR, Pages per session, Search interactions).
HYPOTHESIS
From those insights and internal alignments, we defined our main hypothesis:
We believe that by reducing the amount of links and imagery in the navigation this will result in an increase in users' attention to the categories.
As measured by an increase in category clicks across the whole navigation.
Design
Having aligned on the main goals and defined the hypothesis, we moved on to the design phase.
INITIAL DESIGNS
I started sketching some first designs, focusing on the layout of the top level navigation (the main departments). For web, we also looked at how it would impact other elements in the header such as search, wishlist, bag and the account icon. When designing, the main goals were to:
- Declutter the navigation and remove unnecessary links (reduce cognitive load)
- Provide a genderless experience for certain categories, such as homeware
- Reduce imagery (as it needed internal resources to update weekly and didn’t generate many clicks)
Throughout wireframing, I had regular catch-ups with both the PMs and the engineers, to ensure that the solutions were feasible and in scope. We also held regular meetings with key stakeholders to provide visibility on the project’s progress.
PROTOTYPING & USER TESTING
Once we had aligned on mid-fidelity wireframes, I built prototypes for each channel (desktop, mobile, and app) to assess the designs and check that they were in line with thhe user needs and problems we had uncovered.
The overall results from the usability tests were positive and confirmed that with the new designs:
- Users easily used the navigation dropdown and completed tasks
- Users easily found the search bar, as well as all the relevant icons in the header
- Users rated the experience as 5 (Very Easy)
Deliver
With the designs tested and finalised, we were able to deliver the final solution.
Desktop
mWeb
iOS App
REFINEMENT & HANDOVER
From the usability testing, we iterated on the designs, until the final handover with the engineers. We launched the revised navigation in July 2021, to coincide with the launch of our Kidswear category.
The main changes we made were:
- Removed over 100 low click/redundant links to reduce cognitive load and ensure only relevant links were added in the navigation
- Added the new product category "Kids" to the 1st level of the navigation, as well as "Home" (which users expected to see as a genderless section)
- Reduced imagery by half to 1 image per 2nd level (e.g. one image for clothing)
RESULTS
After launch, we have witnessed positive qualitative feedback from usability tests and saw encouraging results with an average increase of 20% in CTR, as well as a decrease in search use across all channels.