Moody Rooster Design

AppOptics: Navigation

Product Design, UI/UX
AppOptics: Navigation

AppOptics: Navigation

AppOptics is a brand new SaaS product that helps Devops teams effectively monitor their infrastructure and applications.

The AppOptics navigation was released in an MVP state and lacked some usability and design polish. I was tasked with updating the existing UI and menu hierarchy to help facilitate a more logical navigational structure and interactive behavior.

The goal was to add usability and features that enhanced customization of the dashboard without becoming overbearing or redundant since it's the primary element of navigating around the product. 

The Research

The Research

The legacy sidebar navigation wasn't very robust. It worked for the product in it's introductory state but wasn't extremely future-proof or friendly to new users. 

Reviewing session replays would reveal an incredible amount of visits to the navigation to re-learn what was available in the product. Since 100% of users were new to this product, putting the best features of it inside a permanently collapsed sidebar was not helping the customer become more acclimated.

Besides user research insight, there were a few subjective improvements from a grid-based layout perspective of dashboard design that became apparent during initial prototyping. 

The Solution

The Solution

By relocating the branding to the top left corner instead of inline with the menu bar it allowed us to immediately solve a bunch of issues:

1. Content on the page would become left justified from the H1 all the way down the page. This was doubly helpful when breadcrumbs with longs strings came into play and even more helpful visually when subhead navigation is visible. 

2. Moving the logo to the corner would allow us the opportunity to present the user with the AppOptics logotype when expanded. This would be very helpful from a branding perspective because without the logotype many new users would infer this was the parent company's product.

The Result

The Result

At this current point in time this feature has not been built so I haven't had the opportunity to evaluate and iterate on this feature. 

Though the opportunity to gain insight from users hasn't been possible, a couple key improvements are inherently more usable.

1. By allowing the user to manually keep the navigation open, they would gain much quicker acclimation to the dashboard and available features in a new product. Once acclimated they could choose to close the navigation to gain more real estate.

2. The legacy navigation hides content on the page each time a user has a navigation enquiry. Though in most cases a user is going to hover the navigation with the intent to move to a different area, having the navigation only expand singular icons on hover gives the user more observability of their dashboard more often. 

3. The updated hierarchy of navigation items in the sidebar will help new users not have to hunt the product as much. We were hiding certain UI behind a single list item and not giving users good visual cues to expand. Collapsible subhead interactions will also help to future proof additional items that get added.