Sonatype / Product Design Setting the Right Tone for Risk Management

Project
Visual Design Direction
sonatype.com
Services
Product Design
Year & Duration
2013, 3 months
Share This

Sonatype creates apps to help IT organizations manage open source software in their infrastructure. CLM is their product that helps teams monitor quality, security, and licensing issues. EightShapes engaged with Sonatype to design the next iteration of CLM.

Stakeholder Input

Before diving into visual explorations, the team learned a lot about what is most important to the project stakeholders and their customers through a sketching studio.

Stack of sketches representing design concepts
Sketches from our design studio.

Insights

Convey Confidence

One key conclusion: “Everything going haywire” may be true, but “We got this” is the right message to convey.

Emphasize Key Numbers

Specific numbers -- risk location and severity -- are essential data. Don’t conceal them, but instead display them plainly.

Prioritize Action to Build Confidence

Sketches from the product team prioritized action, pairing data with an invitation to deal with risk right away.

Convey Context

The product team resisted ideas to streamline if it meant losing context. IT engineers should always know what problem they’re working on.

Anticipate Varied Volume

Sometimes the system finds many problems, other times only a few. The UI had to handle both extremes gracefully.

Immediate understanding

Whatever the system finds, however, users need to understand the problem immediately, even if knowing “why” requires further analysis.

Competitive Review

To understand what users might be used to, we looked at competitive products. This review revealed conventions, helped us understand boundaries users were used to, and exposed opportunities for us to push against them.

Screenshot from New Relic, a competitive product
Screenshot from New Relic

UI Recedes to Make Room for Content

Data-heavy applications tone down branding, cautious about their character interfering with the data. To avoid competing with the content, UIs relied on vanilla constructs.

Screenshot from Boundary, a competitive product
Screenshot from Boundary

Competitors Tone Down Color

At the same time, competitors avoid ascribing specific meanings to specific colors. They use color to differentiate data, but don’t align colors to distinct messages.

Screenshot from Sonar, a competitive product
Screenshot from Sonar

Iconography for Common Features

The review showed conventional use of icons. Competitive UIs relied on common icons with limited labeling. While this preserved screen real estate, it also made every competitor look the same.

Visual Design Requirements

Together with Sonatype, we established clear requirements for the visual design.

  • Legibility and Contrast

    The style is branded without sacrificing legibility, using brightness and value to achieve clarity.

  • Supporting Data

    Since not all app data indicates severity, secondary neutral colors contrast supporting information.

  • Flat Design

    Flat design was appropriate for the dashboard, to emphasize the data.

  • Risk Severity

    Since severity aids assessing risk, the UI highlighted it with reserved colors.

alt_value
Sonatype CLM

Challenging Assumptions Through Explorations

With documented requireme nts, we created style tiles to exhibit core styles – color, type, icons, and more – without digging too far into UI specifics. Through style tiles, we could experiment with representing Sonatype’s personality. Four distinct tiles conveyed different approaches, adhering to the requirements, but challenging some of them, too.

We gave the style tiles superhero names, because we could.

Screenshot: Captain America
Captain America

flat design, stark contrasts, squared corners

Screenshot: Incredible Hulk
Incredible Hulk

assertive borders, gradients, and textures

Screenshot: Nightcrawler
Nightcrawler

challenging assumptions, darker palette

Screenshot: Mr. Fantastic
Mr. Fantastic

less saturation, rounded corners, lighter type

Though the tile established an aesthetic direction, it didn’t complete the definition of the visual language. We applied the style across a range of screen designs – dashboard, component list, risk detail – to refine and validate how to express the style throughout the app.

Defining the UI

In parallel with the style design, EightShapes and Sonatype also sought to design new screens for CLM. EightShapes built a responsive prototype showing four important screens for different aspects of IT infrastructure – overview, violation list, violation details, and search. The prototype demonstrated the interface’s adaptability across smartphones, tablets, and desktop screens.

alt_value

Situation Analysis

CLM is a product used by IT teams at Sonatype’s customer organizations. The dashboard provides an at-a-glance view of the IT infrastructure, highlighting new risks, changes, and types of violations.

Excerpt from CLM home page highlighting new violations
Excerpt from home page

Multiple Perspectives

Different roles in an IT group look at risk differently. CLM provides multiple perspectives, allowing users to look at affected applications or risk assessment policies rather than the problematic software components.

iPhone with design concept for a list of policies within CLM
Handset view of policy list

Digging into Details

Since users move between violations, dealing with several in parallel, the list of components is always present. When they click into a component, they get details what policies it violates and where it’s being used.

Excerpt from component detail screen highlighting violations triggered by component
Excerpt from component detail screen