Flexera Navigation

Company

Flexera

Year

2021

Type

Interaction Design

Flexera One Global Side Navigation

Side navigation contains actions and functionality that enables the user to navigate through various workflows and information within the software application via a side panel menu.

Flexera delivers SaaS-based IT management solutions that enable enterprises to accelerate and multiply the return on their technology investments. Flexera informs their IT with total visibility into their complex hybrid ecosystems, providing the IT insights that fuel better-informed decisions.

Flexera One is a SaaS-based IT management solution designed with and for organizations with highly complex hybrid environments. With Flexera One, users can visualize the entire estate and make data-driven IT decisions from on-premises to SaaS to the cloud.

Why: In support of the Flexera One Strategic Initiative, Product/UX has been looking to tighten up the way Customers will traverse the platform as well as the overall Flexera “look & feel”.

My role: As part of the UX team, my responsibilities included partnering with UX Researchers and Product Managers to evaluate what problems we need to solve for our users, identifying key focus points for iteration and creating solutions to those problems to deliver an intuitive user experience.

Goal: Establish consistent navigational patterns across the platform that reinforce a clear hierarchy. Enable navigation across the platform without overwhelming the user.

User Story: “As a Flexera customer, I want a navigation that allows me to quickly and easily access all of Flexera One’s applications.”

Vision

Establish consistent navigational patterns across the platform that reinforce a clear hierarchy and pattern.

Navigation should be personalized to provide easy access to frequently used items and surface additional relevant options.

Shortcuts such as history, favorites, and type-ahead search are great alternatives to an exhaustive left-hand tree navigation.

Strive to balance robust functionality with visual simplicity. Balance the navigational features of ServiceNow with the simple, approachable presentation of Snow and Apptio.

Principles and Personas

Personal

Flexera One Navigation incorporates functionality that accommodates the way an individual wants to work by giving them control over how much of the viewport, it consumes, and by providing easy, personalized access to commonly visited locations via “favorites” and “history”.

Organized

Flexera One Navigation makes the information architecture (IA) clear to the user. They are always aware of where they are and way-finding is simple, quick, and intuitive.

Appealing

Flexera One Navigation is frequently used and always visible pattern. As such, it is designed in a way that is not just intuitive or functional, but adds a little flair. It reflects the brand, demonstrates technological prowess, sets the tone for the rest of the product UI, and offers a little bit of delight without distraction.

Accessibility Challenges

The color of the text does not have sufficient contrast with the background, is not accessible.
The icon is too close to the label, visually the label is disconnected from the icon.
Users are struggling to understand the meaning of existing icons for complex controls, actions and particular controls.
Inconsistent icons, the cloud icon is over-used.
Flyout/Secondary navigation – section header default color fill and hover/active states look similar.
Section header default color fill and hover/active states look similar.
Navigation labels in flyout are very crowded.

Accessibility Solution

The search field matches the input field of the design system.
The color of the text meets the AAA accessibility requirements.
Icon and label are more visually connected.
All icons have been redesigned and tested with users to match the significance of the label.
The uppercase section header style with the divider creates more visual separation between sections.
Extra padding between items creates more negative space and improves legibility.

Navigation Icons

Goal: Create purposeful iconography rules, guiding users to read and understand the hierarchy of information.

Solution:

High visual coherence and clarity of messaging that is expressed across the entire set of icons.
Icons are delightful, beautifully crafted symbols for common actions and items.
System icons are simple, modern & friendly. Each icon is reduced to its minimal form, expressing essential characteristics.

Optimize Navigation

Evaluate and update the existing navigational design and structure.

Personalize Navigational Architecture

Analyze existing structure and options within the current navigation to promote better visibility to the options available.
In addition to the “Favorited” navigation feature, personalize the navigation to provide easy access to frequently used and other relevant options. This may include a history or recommended section.