The team at JupiterOne was well underway building version 2.0 of our Compliance App when I joined the company in July 2021. The primary motivation for the work on 2.0 was to refine its performance and scalability as the company continued to grow. Revisiting the Compliance App allowed the team the opportunity to look more closely at its usability and aesthetics. Upon review, three main design objectives stood out:

Let’s walk through a few examples of how these objectives surfaced in the updated designs.

To improve wayfinding, we simplified the app navigation panel. Instead of doing double duty managing the user’s collection of Compliance Frameworks, it now serves solely as the main navigation for the Compliance environment . The Framework management functionality has been promoted to its own dedicated page and nav group alongside other top level items such as Controls and Risks.

Both the app navigation panel and the page header are visually distinguished using color to separate the content into more scannable sections.

To help create a consistent anchor for taking action from anywhere within the app, we consolidated the main available actions of any page into a single, minimal bar attached to the page header. To limit collision with our action status colors (where green means ‘good’ in most instances), we updated the primary color theme to use JupiterOne brand indigo rather than green. Because of this change, when something requires the user's attention it will be more apparent.

One example of standardization focused on modal dialogs. While there are different uses of a modal dialog, in the Compliance app we want to align on patterns that will help maintain the user’s sense of place while navigating up and down the layers of their Frameworks. Rather than continuing to display the Framework Requirement as a full-screen modal, we transitioned it to display in the main view area of the app, allowing the standard navigation and breadcrumbs to continue to set the context for the active Requirement.

The main body area of each page is updated to a flat white background, increasing the contrast of text in the UI and improving the app’s overall legibility and accessibility.