case study
Redesigning the navigation, improving visual hierarchy and user experience
Intro
The existing navigation was visually overwhelming, consumed a large amount of space and the user flow was confusing. Multiple enterprise clients and prospects had complained about the navigation, so this was a key focus for the on-going product modernisation.
Task
Redesign the navigation to improve the UX and reduce wasted space. To be done in two phases - first using the existing framework, and later as part of the whole product modernisation.
Results
MVP successfully implemented. Navigation height reduced by half in final designs, and positive feedback from internal teams and clients on the new approach for change of top navigation interactions.
Role
Lead designer, collaborating with the 'centre of excellence' team.
01
Analysing the existing navigation
Before imagining what the navigation could look like, I marked up the existing navigation to highlight any areas of improvement and researched other product navigations to compare against.
Navigation analysis
Key things I wanted to improve included accessibility (changing page tabs from all caps to title case), introducing more consistent and suitable iconography (through the introduction of Lucide icons) and reducing the amount of top navigation items that we visible at once.
02
Identifying the UX problem
In the existing navigation, when a user selected a top navigation item, they would be brought to the main page, underneath the page tabs, and the welcome tab would be active. This caused confusion about which page the user was on, and made navigating away from the top navigation items more confusing.
Solving this issue would be part of the complete redesign of the navigation, however this was not a focus for the MVP.
'Change Password' selected from top navigation appears below page tabs
03
Creating suitable 'groups'
To reduce the visual overwhelm, I proposed reducing top navigation items to icons, with tooltip hover states to communicate functions, and group similar actions.
I colour-coded items to visualise the similar groups, for example red for user-focussed actions, purple for support actions and yellow for branding, then mocked up options for new navigation styles.
Final re-mapped navigation
04
MVP implementation
Using the existing structure of the product, we were able to create an MVP solution for clients to take advantage of immediately, where top navigation items were condensed. At this point, the main page tabs were aligned to the left and changed to title case, but the behaviour when interacting with the 'top navigation' items were not affected.
MVP navigation designs
05
Solving the UX problem
By introducing overlays for notifications and contact/FAQ pages, and modals for user menu actions, the 'full' design clarified page context and improved navigational flow. This work supported the long-term redesign vision but was not included in the MVP scope due to technical limitations.
Notifications
User menu items
06
Full implementation
This is an ongoing project as part of the entire product modernisation, and the more advanced updates have not yet been pushed to clients.