Diligent Unified Design System & Refresh
Left: Original Product Screen Example | Right: Refreshed Product Screen Example
Challenge
Corporate Board Management SaaS company Diligent needed to incorporate newly acquired competitors’ products into their portfolio.
They sought the foundations for a unified Design System that would refresh the brand experience of their existing products while streamlining internal software development as they folded new products in.
Process
A broad inventory of the different interface elements, assets, and frameworks across the current products and new acquisitions helped better understand the breadth of the existing ecosystem.
A product experience voting activity with stakeholders united the team around foundational experience attributes that would inform our visual style studies in the design phase.
These experience attributes translated into three style directions expressing potential variations of the desired Diligent brand.
The team united around the Seamless visual direction. From here, the core work of building the design system files could progress with a cohesive visual language.
Key product screen: Dashboard
Key product screen: Reader
Key product screen: Book Builder
After applying the ‘Seamless’ visual direction to key product screens, we extracted and concentrated the design choices into the foundations of a design system for the Diligent design team to expand upon and make their own.
Design System
Named Atlas, as a nod to the Greek myth of a mortal tasked with holding up the whole world, the design system was organized into three sections:
Principles– high level strategic direction
Guidelines– defined elements from which to create new components
Components– universally defined but updatable pieces to place in screen flows
As Diligent intended the new Design System components to be adaptable to different Brands under the Diligent name, certain key components were delivered with a formula to ensure components could be updated for future Brands.
For core product screens, we created components in three brand options: The original Diligent Brand, the secondary Board Effect Brand (Diligent’s mass market offering), and a white label version for companies that opted to personalize the software with their own colors and logos.
We considered elements such as a unified navigation pattern with multiple states.
Our system also extended out into more granular, fun details like sticky notes and content annotation tools.
Evangelization and impact
Along with principles, components, and guidelines, we also delivered a full-day workshop to immerse design teams in the new design system and encourage adoption.
“It’s working. The project did what we hoped it would do—set us on a path with a good foundation. Product teams are really happy. Dev teams are excited.”
-Diligent Design Operations Manager