AT A GLANCE
ROLE: Lead product designer at Redgate Software
WORKING WITH: Product designers | Product managers | Product marketing | Engineers
DURATION: 1 month
ACTIVITIES: Expert review | User testing | Card sorting | UI design | Design reviews
As the lead product designer for SQL Monitor, a database monitoring tool I led a redesign of the navigation to improve the user experience. The goal was to make the information available to users more discoverable, easier to navigate and to make it easier for users to navigate their database servers and databases.
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.
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. This helped stakeholders and sponsors to see for themselves why navigation within the product was a significant pain point for users.
To assess how other database monitoring tools allow users to navigate I carried out a 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.
Identifying critical paths
I ran a workshop with a mixture of designers, product managers and domain experts to identify critical paths within SQL Monitor. This was important to be able to identify key scenarios for evaluating the current product navigation, along with key user journeys the navigation should support.
Critical paths (sometimes called red routes) are the critical and frequent paths that users take to complete key tasks. An example for SQL Monitor is diagnosing database related issues, something that is fundamental to the core value of the product. Workshop participants were asked to first create a list of product features in the form of jobs-to-be-done. For example, keeping track of what is in a database estate. Participants were then asked to collectively rank features on a simple 2×2 matrix (see below) by how frequently they are used, and how many users use them.
In order to identify the most pressing navigation pains to address I carried out a short round of usability testing with 5 x DBAs (database administrators). I recruited DBAs who are not currently using SQL Monitor, or had been using the product for a short period of time. Testing was carried out remotely using Zoom.
Users were asked to carry out some of the key scenarios that had been identified by the critical paths workshop. For example, reviewing alerts generated by SQL Monitor and reviewing the status of the database servers being monitored. The usability testing highlighted a number of key usability issues, such as the difficulty of selecting the desired database server(s) when presented in dropdowns and lists (see example below) and the fact that users struggled to find the desired information about a database server, or indeed work out the information that Monitor can provide.
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.
Informing the information architecture
The usability testing had highlighted that the information architecture (IA) of the product could be confusing for users, especially the IA used for configuration options. To help better categorise configuration options I ran an open card sort (i.e. users were asked to create their own categories) using OptimalSort, an online card sorting tool. This highlighted common categories and helped inform a redesign of the settings page (see below) using clearer and more intuitive categories.
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 regularly review and iterate designs. This was through a combination of dedicated review sessions, and asynchronous comments within Figma.
A story mapping approach
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. Following an agreed storymap I worked with the team to build a backlog for each release.
I’ve included mock-ups for designs showing the key navigation improvements:
- Adding a consistent left-hand navigation area, with tabs to allow quick links to favourites and recently viewed items.
- Allowing users to quickly search for a database server or database by name, or by tag.
- Providing quick links for saved dashboards to allow users to quickly apply saved filters.
- Providing links for associated actions on a page, such as configuration.
- Hiding less frequently used filters to maximise the dashboard size.
- Allowing users to browse monitored database servers in the form of a tree.
- Allowing users to easily browse databases for a database server.
- Presenting information available for a database server as secondary tabs (rather than a very large, unstructured page).
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.