Mulberry Mobile Navigation Redesign

Improving the usability of Mulberry's mobile website through rapid prototyping.

Mobile Navigation Prototype Hero


Since I conducted the UX Audit back in 2016, I've been retained by Mulberry as their sole UX Design Consultant. Over the past few years we've established a UX improvements programme.

The main purpose of the programme is to increase customer satisfaction, brand loyalty and conversion. One key focus is the mobile user experience.

This case study showcases how the mobile navigation has been redesigned with the aim of improving usability, discoverability and conversion.

My Role

Working alongside the design and e-commerce teams, the design process involved the following steps:

  • Gathering insights from Google Analytics and the UX Audit
  • Defining our goals and design hypothesis
  • Wireframes
  • Prototyping

Read more about my services and design tools.

Insights from Google Analytics

Google Analytics can be a veritable goldmine of information. Event tracking, goals and heat maps can be especially helpful when analysing user behaviour. Unfortunately many of these features hadn’t been set up for the mobile navigation. So we were forced to resort to slightly higher-level metrics.

56% of total sessions on mobile in May 2016.
26.4% bounce rate on mobile devices in May 2016
3.78 pages per session on mobile devices in May 2016.
2 mins average session duration on mobile devices in May 2016.
29.1% of all transactions occurred on mobile devices in May 2016.
0.14% conversion rate on mobile devices in May 2016.

Mobile Usage - May 2016

Above is a breakdown of traffic for the month of May 2016. You can see that more than half of all traffic is from mobile devices, although with just a 0.14% conversion rate, this only accounts for 30% of e-commerce revenue.

UX Audit 2016 Front Cover

Insights from the UX Audit

The 2016 UX Audit highlighted an overall score of 68%. This indicated that the existing mobile navigation and search suffered from several problems: 

  • Poor sign-posting and affordances
  • A poor spatial model & affordances to signify hierarchy
  • Poor label legibility (through use of a small font size)
  • Confusing access to the site search



Creating a hypothesis enables you to quantitatively evaluate the success of your design. This enables you to reinforce design decisions with data rather than just preference or expert option.

Using the insights from both the analytics and UX audit we defined our hypothesis as:

By improving mobile navigation, users will be able to find product information more easily. This will result in lowering the bounce rate and increasing the percentage of successful transactions on mobile devices.


  • Bounce rate
  • Conversion rate
  • Successful transactions

Mobile Website Navigation - April 2016

Below are three screen grabs showing the pre-existing Mulberry mobile website.

It had a confusing navigation structure, no affordances to indicate to users that there were sub-navigation options available, and a back button positioned on the wrong side (right hand side).

Mobile navigation showing search form and menu options

Navigation level 1 showing main categories for Women, Men, Collections and My Account.

Secondary level navigation options within the Women's menu category.

Navigation level 2 showing the sub-categories once the user has selected 'Women'.

Tertiary-level navigation showing sub-categories within bags.

Navigation level 3 showing tertiary level options within 'Women's Bags'.

Navigation Redesign

To test our hypothesis I undertook a number of specific design changes. These included:

Adding arrows next to navigation items containing sub-categories. This ensured that users could distinguish between these and normal links and thus improve discovery of the sub-category items.

 Additionally I increased the font size for all links to make the navigation easier to scan and help users locate the option(s) they were looking for more easily.

Redesigned Mobile Navigation Hand Sketch

Low-fidelity sketch of the new mobile website navigation.

Redesigned Mobile Navigation Wireframe

Hi-fidelity wireframe showing level 1 of the navigation.

Existing Mobile Navigation Spatial Model

Animation showing the spatial design for the existing mobile website navigation.

Existing Spatial Model

Well-designed mobile apps use considered movement and spacing between elements to create a spatial model that helps the user orient themselves within the experience.

The existing navigation had a poor spatial design for the different menus within the hierarchy. All elements were stacked on top of each other and just being shown/hidden when the user interacted.

This coupled with a lack of animation, resulted in an abrupt feeling when the user toggled between states.

New Spatial Model

Understanding what's currently in the viewport, what has left the viewport and what can be expected to come into viewport when a user interacts helps the them orient themselves within the experience.

I redesigned the horizontal placement of the menus within the hierarchy and combined this with simple transitions between states. This created an improved spatial model for users and improved usability.

New Mobile Navigation Spatial Model

Animation showing the new spatial design for the mobile website navigation.

Flinto Prototype

I used Flinto For Mac to create a high-fidelity prototype using the static assets that I created in Sketch. The prototype was used to communicate the behaviour of the UI to internal stakeholders within Mulberry. It also acted as a visual reference point for the external development team to develop their codebase.

Flinto Mobile Navigation Prototype

A screen shot of the Flinto For Mac interface showing the main artboards and the connections between them.

Redesigned Search

User’s who know what they are looking for are more likely to use the search, rather than taking time to browse through hierarchical navigation.

Separating search from the navigation options, giving it its own dedicated screen, reduced visual clutter and ensured users could focus on either browsing or searching more effectively.

Mulberry Mobile Search Prototype

Mobile Navigation Prototype

The final mobile navigation prototype developed using Flinto For Mac. This enabled us to preview and test it on a variety of devices.

This has now been developed and is live on the main Mulberry website.

Visit Site

Key Findings

It’s been two years since the mobile navigation has been updated. Comparing the same top-level metrics from May 2018 against May 2018 indicates that, on paper, there redesign was a success.

65.2% of sessions were on mobile in May 2018.
24.6% bounce rate on mobile devices in May 2018.
3.90 pages per session on mobile devices in May 2018.
2.19 mins average session duration on mobile devices in May 2018.
39.7% of transactions were on mobile devices in May 2018.
0.19% conversion rate on mobile devices in May 2018.


Although the data above points to an improvement, there could have been other factors that have influenced the outcome. Unfortunately due to the absence of specific event tracking and goals, we couldn't isolate the mobile navigation metrics as well as I would have liked. This is a key learning for future projects.

Additional Tools

In addition to improving our event tracking and goals in GA, there are some additional tools that I have incorporated into our design process:

UX Tools - Hotjar

We use the heatmap and recordings functionality to measure levels of user engagement.

UX Tools - Google Optimize

We have started testing certain module variations on PDPs to determine which creative execution delivers the highest level of engagement.

UX Tools - Heart Framework

The HEART framework helps provide me with a consistent approach to defining KPIs as part of the early phases of UX strategy.


  • Google Analytics
  • Hotjar
  • Sketching
  • Sketch App
  • Flinto


  • Wireframes
  • Click-though Prototype
  • UI Animation/Prototype


  • E-commerce
  • Responsive website


  • Fashion

Monthly UX Newsletter

Sign up to receive my monthly email newsletter all about UX design, prototyping and design thinking.

Sign Up