Redesigning Signal Sciences’ navigation system

Signal Sciences is a web security platform that helps teams monitor and defend attack threats. I was brought on to the design team to refresh their Design System. Revisiting the navigation system was a part of this effort. My main goal was to build a scalable user-friendly system that could accommodate future expansion of the product.

Problems with the existing navigation

1. The button to switch Sites wasn’t clear to new users. Also, enterprise clients had over 50 Sites, sometimes with very long Site names. Navigating between Sites in a small dropdown was a clunky experience.

2. Exposing both Corp level and Site level navigation at once was visually overwhelming and isn’t helpful when users needed to focus on a Site level investigation.

3. Site level navigation would eventually run out of real estate if we expanded product offerings.

The design process

Changing the product architecture was out of scope. I had to figure out how to solve these issues without disturbing the existing structure of the platform. I started by iterating ideas in Figma and eventually moved my wireframes to Principle prototypes so I could test different user flows.

The final navigation

I landed on a left rail navigation that not only gives clear distinction between Corp and Site level pages, but provided enough real estate for the product to grow. I also considered ways for users to easily access profile level settings and switch between light and dark mode, a new feature that was a part of the redesign project.

Designing for multiple breakpoints

Although the majority of our users access the platform on large desktop screens, I wanted to cover all our bases and make sure every use case was considered.