SpheraCloud: Navigation Redesign

Putting configuration power into the hands of end users

Problem

Sphera’s enterprise software was designed to be extremely configurable to meet their customer’s needs. However, they rely on internal professional services to configure the system for companies. This is time and labor intensive. With SpheraCloud, the goal was to empower SaaS end-users to configure their own systems, offloading work from company professional services who could then focus on thick client configurations.

Challenges

Sphera was in the process of bringing another application in line visually with the SpheraCloud project. However, the overall navigation of the new application needed to be vastly improved before it could be placed in the hands of end users.

This is a sample of what a member of Sphera’s professional services team member would see when trying to configure the SpheraCloud system for a new client:

There were 35 modules and up to 5 levels of navigation hierarchy all represented in the left hand navigation. We needed to find a way to re-envision the navigation to be easier for consumers to understand the categories at a glance and be able to predict what configuration settings they would find under any given section.

The first thing I did was lay out all of the working components. We wanted to organize the configuration module for end users so that’s where we started.

I created very light wireframes in Balsamiq to initially to discuss how we could restructure the navigation to make it clearer.

Design Iterations

I refined the wireframes and moved them into Sketch based on feedback from the product manager for a second iteration.

Iteration 1: Collapsed Sidebar navigation with an option to pin the main nav in a more open state that displayed the section titles.

Iteration 2: A fixed side navigation that allowed module selection from a dropdown list.

Iteration 3: A combination of left hand navigation with sub nav displayed at the top.

Refining the design further

Iteration 1 was chosen to expand upon further as the 2nd iteration was felt to be too limiting for the viewer (they weren’t able to peek into the sub menu before selecting the module). Iteration 3 was also not chosen because, while the more subtle navigation was praised, the distributed navigation (main nav and sub nav in two different places) was felt to be too confusing for the viewer. We decided to refine iteration 1 to collapse further. In addition, I created a refined version of the list view that would be able to filter inline on the list and let users find their desired choice.