Redesigning navigation to improve the Enterprise UX

Duration: 3 months

Overview

As the lead product designer for Redgate Monitor, an Enterprise database monitoring tool, I led an initiative to improve the user experience by making it easier and quicker to navigate the product. The goals were to make the information available to users more discoverable, to make the tool easier to navigate, to make it easier for users to navigate their database servers and databases and to improve the onboarding experience. I was working with a cross-functional team to deliver the initiative.

Defining the problem

I used a canvas to help frame and build a shared understanding of the project, including the goals, the problem to be solved, the constraints, key stakeholders and any existing resources.

Project brief canvas — I used a canvas to capture and agree key information about the project

In addition to the canvas, I also wanted to create a visual aid to help stakeholders better understand and appreciate the problem. I did this by visually showing the key navigation pain points to be addressed.

Navigation pain point screenshots — I created a visual board to help showcase the key navigation pain points to be addressed

Reviewing key competitors

To assess how other database monitoring tools allow users to navigate I carried out a comprehensive competitor analysis. This not only highlighted some design patterns to explore (such as quick links to recent, and favourite items) but also re-enforced to stakeholders that Monitor was not as easy and quick to navigate as a lot of its competitors.

Competitor analysis for navigation within database monitoring tool — I carried out a competitor analysis to evaluate navigation design patterns used by other database monitoring tools

Identifying critical paths to focus on

Critical paths (sometimes called red routes) are the critical and frequent paths that users take to complete key tasks. An example for Redgate Monitor is diagnosing database related issues, something that is fundamental to the core value of the product. I ran a workshop with a mixture of designers, product managers and domain experts to identify critical paths within SQL Monitor. This highlighted where best to focus the navigation improvements.

2x2 matrix showing features by frequency of use and number of users — I ran a workshop to identify critical paths the navigation should support

Ideation workshop to explore ideas

Armed with critical paths, navigation pains to address and examples from competitors I ran an ideation workshop with the product team to explore ideas for improving navigation. Using the ’How might we’ format participants were asked to sketch lots of different ideas for addressing pains, and for better supporting critical paths. Dot voting was used to identify the most promising ideas to explore further.

Sketches of navigation improvement ideas — I ran an ideation workshop with the product team to generate ideas for improving navigation

Iterating designs

Following the ideation workshop I created high-fidelity designs for the most promising navigation improvements using Figma. I worked closely with other product designers, engineers and product mangers to review and iterate designs. This was through a combination of dedicated review sessions, and asynchronous comments within Figma.

Designs in Figma — I created high-fidelity designs using Figma which went through a number of review iterations

Using lean user testing

In order to evaluate navigation designs I carried out lean user testing with internal users who were not familiar with the product. This identified some usability issues to address, such as as unclear iconography. As part of the user testing I also carried out some open card sorting using OptimalSort to help inform new settings groupings and labelling.

Navigation improvements

Navigation improvements were centred around:

Establishing more a more consistent left-hand navigation pattern.
Providing search and shortcuts to make it easier for users to get to key servers and databases.
Allowing users to save filters and views.
Only showing key filters, with more advanced filters progressively disclosed.
Re-structured settings page to make it easier for users to find the desired setting and to better group settings (e.g. Estate, Alerts).

SQL Monitor global dashboard design — Navigation improvements for the main SQL Monitor dashboard included being able to save dashboards and simplifying filters

SQL Monitor server overview design — Navigation improvements for the server overview included using tabs to break up server information

Navigation improvements for a database overview included allowing users to drill down to specific databases in the left-hand nav panel

Navigation improvements for alerts included showing saved and present filters in the left hand panel

SQL Monitor settings design — Navigation improvements for settings included improved groupings and labels (informed by the online card sorting results)

Delivering navigation improvements

In order to mitigate the risk of a big bang release I worked with the product team to identify smaller release slices for the navigation improvements. This allowed the team to incrementally deliver improvements and reduced the complexity and risk for each release. I led a story mapping workshop with the product team to identify and agree release slices. These were based on key user tasks, such as navigating to database related information.

User story map for navigation improvements — I ran a story mapping workshop with the product team to identify and agree release slices

Results

The first set of navigation improvements have already been delivered, with further updates included in the SQL Monitor roadmap. Navigation changes have been very well received by users and stakeholders alike. Metrics have been added to track the impact improvements make to product usage, with the expectation that better navigation will drive usage through better discoverability, usability and efficiency.

Learnings

Great design ideas don’t just come from designers – Taking a co-design led to a range of innovative solutions that might not have come from designers alone.
Data can help build buy-in – Using data from usability testing, card sorting, and the competitor analysis not only helped to inform design decisions, but also get stakeholder buy-in by outlining the evidence behind proposed changes.
Aim for iterative improvements – Breaking down navigation changes into smaller improvements helped to reduced risk and complexity and supported an iterative approach.
Design for tomorrow, not just today – For any product it’s important to think ahead and design solutions that will not just work well now, but in the future as well.