Unified Platform Navigation - Sonatype

As part of an overall initiative to modernize Sonatype's product line and create a holistic, interconnected experience for users, upper management decided to invest in a year-long series of workshops, user testing, and development to create shared navigation between our products, as well as a centralized "atrium" space for users to access information and education about their products.

The three new components that were a product of this initiative: a new side navigation, with multiple customizable icons and list items, the top navigation, with a logo, search bar, and place to place any icons needed, and the Solution Switcher, a dropdown panel allowing users to navigate to their owned solutions, as well as information about other products
The three new components that were a product of this initiative: a new side navigation, with multiple customizable icons and list items, the top navigation, with a logo, search bar, and place to place any icons needed, and the Solution Switcher, a dropdown panel allowing users to navigate to their owned solutions, as well as information about other products
The three new components that were a product of this initiative: a new side navigation, with multiple customizable icons and list items, the top navigation, with a logo, search bar, and place to place any icons needed, and the Solution Switcher, a dropdown panel allowing users to navigate to their owned solutions, as well as information about other products
The three new components that were a product of this initiative: a new side navigation, with multiple customizable icons and list items, the top navigation, with a logo, search bar, and place to place any icons needed, and the Solution Switcher, a dropdown panel allowing users to navigate to their owned solutions, as well as information about other products

Date

H1 2023

Role

Product Designer

Company

Sonatype

In-product shot from Sonatype Lifecycle showing a table of violation data with the data obscured
In-product shot from Sonatype Lifecycle showing a table of violation data with the data obscured
In-product shot from Sonatype Lifecycle showing a table of violation data with the data obscured
In-product shot from Sonatype Lifecycle showing a table of violation data with the data obscured

The Problem

While Sonatype’s applications work best when interconnected, the user experience of each was siloed. Senior leadership decided an increased focus on platform UX was necessary.

Miro activity titled "Desires and Concerns" with sections for representatives from Product Design, Product & Product Marketing, Customer Success, Brand & Communications, Engineering, and Leadership to place stickies
Miro activity titled "Desires and Concerns" with sections for representatives from Product Design, Product & Product Marketing, Customer Success, Brand & Communications, Engineering, and Leadership to place stickies
Miro activity titled "Desires and Concerns" with sections for representatives from Product Design, Product & Product Marketing, Customer Success, Brand & Communications, Engineering, and Leadership to place stickies
Miro activity titled "Desires and Concerns" with sections for representatives from Product Design, Product & Product Marketing, Customer Success, Brand & Communications, Engineering, and Leadership to place stickies

The Objectives & Key Results

This initiative had two main goals:

  • Create a centralized “atrium” space that enables users to access information about their applications, as well as other free and paid Sonatype applications

  • Create a shared navigation component to allow users to move through their applications and instances from within the applications themselves

I was selected to lead the project.

Two shots from a Miro exercise brainstorming user scenarios and flows and then placing those stickies on a Priority v. Frequency matrix
Two shots from a Miro exercise brainstorming user scenarios and flows and then placing those stickies on a Priority v. Frequency matrix
Two shots from a Miro exercise brainstorming user scenarios and flows and then placing those stickies on a Priority v. Frequency matrix
Two shots from a Miro exercise brainstorming user scenarios and flows and then placing those stickies on a Priority v. Frequency matrix

The Process

The success of this initiative would have a wide-ranging impact. As such, the first step would be to conduct a month-long series of brainstorming workshops with stakeholders from segments across the entire organization, ranging from product designers to senior leadership. The results of these sessions would then be tested with XX users via surveys, user interviews, and usability testing.

One of the findings of this discovery process was that the Customer Success organization had built a website at my.sonatype.com for assisting users that contained many of the features now desired by product: links to our community forum, product training and documentation, and a landing page with software downloads, information on products, and blog posts. The team that worked on the site was brought into the Product organization with the goal of adding features such as links to users’ applications, license management, and the shared navigation component, now called the Solution Switcher. 

The first step was to “lift and shift” the existing My Sonatype site from it’s current codebase into React in order to make use of the Kaleido/Tartan Design System. Then, we would update the side and top navigation components to unify the interface across the platform, enabling us to complete the initiative with the Solution Switcher.

The component page in Kaleido titled Navigation Layout Examples, showing different variations of how the navigation components should appear together
The component page in Kaleido titled Navigation Layout Examples, showing different variations of how the navigation components should appear together
The component page in Kaleido titled Navigation Layout Examples, showing different variations of how the navigation components should appear together
The component page in Kaleido titled Navigation Layout Examples, showing different variations of how the navigation components should appear together

The Solution

The top and side navigation was designed over many iterations, stakeholder interviews, and user research. It was fully WCAG compliant, and utilized a stark white background with Active interaction states color-coded to each product's logo. The full shared versions of these components were shortly added to the library and are currently being added to all products.

Part and parcel with the side and top navigation was the Solution Switcher. The end product is a dropdown panel with links to each product, separated into sections according to which a user has purchased and which they haven’t, as well as a link back to My Sonatype from the applications. Some applications may have multiple instances connected to single instances in other applications. A secondary panel was added to allow users to select an instance.

The My Sonatype site itself was updated to use design system components. We also used this as an opportunity to update the styling of some existing components, namely lightening the page background and restyling the cards and tiles to modernize them. 

The final steps of adding license management features and a Solutions page to My Sonatype are planned for 2025.

Maze survey results asking which of multiple icons were preferred to accompany text in a collapse/expand button
Maze survey results asking which of multiple icons were preferred to accompany text in a collapse/expand button
Maze survey results asking which of multiple icons were preferred to accompany text in a collapse/expand button
Maze survey results asking which of multiple icons were preferred to accompany text in a collapse/expand button

The Results

The product was completed on time and was well-received across the organization. There has been a concerted effort among the Product segment to implement the new navigation, despite other pressing priorities and the added effort of rearchitecting the site maps of some products that formerly utilized a shared interface (despite having different SKUs, names, and context). While no validation testing was performed due to a company reorganization, the feedback that sales, customer success, and senior leadership have gotten from customers has been positive.

A shot of My Sonatype, which uses the top and side nav components. Body content includes a search bar, a latest releases section, and an info section on a customer program title Innovate
A shot of My Sonatype, which uses the top and side nav components. Body content includes a search bar, a latest releases section, and an info section on a customer program title Innovate
A shot of My Sonatype, which uses the top and side nav components. Body content includes a search bar, a latest releases section, and an info section on a customer program title Innovate
A shot of My Sonatype, which uses the top and side nav components. Body content includes a search bar, a latest releases section, and an info section on a customer program title Innovate
Next Project
Let's Collaborate

Let's talk about a project,
collaboration or an idea you may have

Hire Me

Let's Collaborate

Let's talk about a project,
collaboration or an idea you may have

Hire Me

Let's Collaborate

Let's talk about a project,
collaboration or an idea you may have

Hire Me

Let's Collaborate

Let's talk about a project,
collaboration or an idea you may have

Hire Me