Sonatype

Dashboard Design

Designing a Risk Management Product's UI

Sonatype Visual Design

Sonatype creates products that help IT companies manage their open source components by reporting on their quality, security and licensing status. I was instrumental in designing the user experience for Sonatype’s CLM, or Component Lifecycle Management, which offered a new way to ID, manage, and monitor component dependencies.

CLM had no predecessor; designs were created from scratch through an iterative process with Sonatype.

  • Client:

    Sonatype

  • Agency:

    EightShapes

  • Skills:
    • Visual Design
    • Art Direction
    • Dashboard Design
    • User Experience Design
UI sketches from our design studio.

Capturing Input

The kickoff meeting with Sonatype went really well. We sketched user interfaces as a group and learned a lot about what project stakeholders wanted. A competitive analysis increased our awareness of what kind of data visualizations we might build and how an interface should support those visuals.

Perhaps one of the best pieces of insight was that CLM would rarely have good news for its users. That creates a necessity for an inviting, friendly but authoritative experience.

Presenting Style Directions

I like to get a general direction for visual design as soon as I can. Using style tiles to do this made a lot of sense. The process is so quick I was able to create four directions in a day, three being what they expected and one that was very much unexpected.

The four style tiles were named after Marvel superheroes; a nod to the group’s appreciation for comic books and a great way to increase style recognition.

  • Captain America; flat, squared corners, a fair amount of visual contrast
  • Incredible Hulk; assertive and divided, textured, lots of contrast
  • Nightcrawler; the assumption buster, dark palette that supports vivid secondary colors
  • Mister Fantastic; low saturation, rounded corners, spacious typography, the friendliest of the four

Content shapes a visual design system. Each tile displayed two UI patterns that were taken from the group sketches; identical content but styled differently based on emerging designs. These represent a start to a visual design system. Moving forward meant picking a direction and then evolving it over time based on what kind of content we threw at it.

Designing the Interface

As visual design was moving along, a responsive prototype was in the works. I pivoted between the HTML prototype for holistic input and Photoshop mockups for provisional component design. The prototype was great for testing different screens on several device widths.

Overview Screens
The Overview screen rendered on small, medium, and large breakpoints.