Global Navigation Overhaul

Redesigning a core navigation system used across web and mobile to improve findability, support future growth and create new commercial opportunities without disrupting familiarity for users.

At a glance

Company
TopCashback
Role
UX/UI Designer
Duration
6 months
Platform
Website & app
Tools
Figma, Miro, Adobe Suite, HTML/CSS, Analytics

Impact

No drop-offin category engagement
Increasedtraffic to promoted product areas
Newcommercial tenancy opportunities

01. Overview

The navigation is one of the most important parts of TopCashback. It is where countless user journeys begin, helping users discover TopCashback's range of retailers, products and services.

As TopCashback categories continued to evolve, the existing navigation had reached its limit. New categories could no longer be added top-level without compromising usability and disrupting the UI.

What initially appeared to be a simple UI update quickly became a improvement to the information architecture. The project required rethinking how content was organised, how members discovered categories, and how we could create a system to solive this whilst remaining familiar to millions of existing users across desktop and mobile.

This case study explores how the redesign evolved into a wider exercise in simplifying usability, and improving flexibility for the business.

02. My Role

I was responsible (along with 2 other UX/UI Designers) for the UX/UI design of the navigation overhaul across desktop and mobile. My responsibilities included:

  • Auditing the existing navigation, categories and subcategories.
  • Defining a clearer information architecture.
  • Using analytics to understand behaviour and navigation usage.
  • Researching large-scale navigation systems.
  • Exploring, prototyping and refining desktop and mobile solutions.
  • Working with stakeholders to technical and commercial requirements.

03. The Problem

The existing navigation was focused on retailer categories and could no longer accommodate the growing range of categories. Adding more top-level would have increased clutter, yet moving familiar options into nested menus risked disrupting established user behaviour.

The challenge was to create a navigation system that could improve findability and perhaps increase the exposure of TopCashback's products without reducing engagement to the categories members relied on.

Old desktop navigation
Old desktop navigation on hover
Figure 1: The old desktop navigation (left) and an example of a category hover state (right).
Old mobile navigation
Figure 1.2: The old navigation on mobile.

The old navigation was heavily category-focused and did not showcase the wider range of products/services available through TopCashback.

04. Discovery

We began by mapping potential solutions, with concerns and constraints. While introducing a dropdown seemed straightforward, it raised several important UX considerations:

  • Long-standing user familiarity with the existing navigation structure.
  • The impact of moving previously top-level items into nested menus.
  • Opportunities to make better use of newly available space.
Initial navigation brainstorm
Figure 2: An initial brainstorm for updating the navigation.

Given the amount of categories on TopCashback, I conducted a full audit of all the categories and their subcategories. I identified duplicates and outdated categories, I mapped hierarchical relationships and I also defined a cleaner, more scalable structure.

These updates were documented and handed over to the relevant teams to ensure the taxonomy remained accurate.

Tree showing navigation categories
Figure 3: A tree showing all categories and their relationships.

Before designing, I explored how other platforms handled large-scale navigation systems, and how to organise dense information without overwhelming users.

Google Analytics showed that just over half of users accessed the site via mobile. Desktop users relied heavily on the navigation bar, this shaped the approach where clarity and efficiency were particularly important on desktop while patterns still needed to adapt appropriately across platforms.

05. Key Findings

The discovery work highlighted priorities for the redesign:

  • The category structure needed to support future growth.
  • Members needed to retain quick access to categories.
  • Opportunity to help members discover other TopCashback products and support new opportunities.

06. Design Exploration

I explored how categories could be consolidated into a structured mega menu. The design needed to make categories easy to scan, maintain a clear hierarchy and remain flexible enough to accommodate future categories.

Navigation iterations
Figure 4: Iterations of navigation.

07. The Solution

The final solution introduced a mega menu-style dropdown on desktop. Users could access top-level categories or drill down into subcategories. I made categories easier to scan while reducing clutter in the main navigation bar.

On mobile, the same structure was adapted, this preserved consistency in how content was organised.

The redesigned navigation made category browsing more intuitive and gave TopCashback space to promote internal products and introduce retailer tenancy placements. Additionally, there was a temproary space for a seasonal item that could be changed i.e. if it is summer and there's an increase in travel bookings, the temporary space could be used for a travel category.

New desktop navigation
New mobile navigation
Figure 5: The new navigation on desktop (left) and mobile (right).

The promotional placements within the dropdown were introduced, allowing retailers to advertise within relevant categories and creating additional revenue opportunities.

TopCashback's key internal products such as Compare, Gift Cards and Refer & Earn were elevated to the top-level navigation, increasing their visibility.

The system also included flexible fallback states for regions where tenancy placements had not been sold or were not required.

Navigation tenancy fallback option
Navigation without tenancy placement
Figure 6: Options for an unsold tenancy area (left) and for markets where no placement is required (right).

08. Collaboration

In this project I was 1 of 3 UX/UI Designers, collaborating closely to create this solution.

This project impacted a lot of teams, I worked closely with them and other stakeholders throughout to ensure the new solution met requirements.

The category audit required input from teams responsible for maintaining the categories, whilst the new promotional areas needed alignment around tenancy requirements and fallback behaviour.

09. Outcome

The updated navigation has been live for several years with strong performance indicators. Despite the structural changes, there was no drop-off in category engagement and no increase in customer service queries related to categories.

Traffic increased to newly promoted product areas, whilst the flexible promotional placements created additional opportunities for retailer visibility and business revenue.

10. Reflection

  • Beyond the UI: What began as a navigation UI update became an information architecture project. Auditing and restructuring the categories was essential before improving the interface.
  • Familiarity: Millions of existing members were familiar with the previous structure. The solution needed to create room for growth without making established journeys feel unfamiliar.
  • User and business: Consolidating the categories improved findability whilst also creating space to promote additional products and introduce flexible commercial placements.