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.
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.
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.
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.
Whatever the system finds, however, users need to understand the problem immediately, even if knowing “why” requires further analysis.
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.
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.
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.
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.
Since not all app data indicates severity, secondary neutral colors contrast supporting information.
Flat design was appropriate for the dashboard, to emphasize the data.
Since severity aids assessing risk, the UI highlighted it with reserved colors.
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.
flat design, stark contrasts, squared corners
assertive borders, gradients, and textures
challenging assumptions, darker palette
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.
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.
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.
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.