Diligent Unified Design System & Refresh
Left: Original Product Screen Example | Right: Refreshed Product Screen Example
CHALLENGE
Diligent, a SaaS company that helps corporate boards run their work, had acquired several competitors and needed to bring their products into its portfolio.
The company set out to build the foundation of a unified design system that would refresh the brand across its existing products and make development more efficient as new products joined the lineup.
PROCESS
An inventory of interface elements, assets, and frameworks across the current products and new acquisitions gave the team a clear picture of the existing ecosystem and where it diverged.
To align on direction, stakeholders voted on the qualities they wanted the product to convey. The results gave the team a shared set of attributes to guide our visual style studies.
These attributes became three style directions, each offering a different take on the Diligent brand.
Stakeholders aligned on the Seamless direction, giving us a cohesive visual language to carry into the design system files.
Key product screen: Dashboard
Key product screen: Reader
Key product screen: Book Builder
We applied Seamless to key product screens, then translated those decisions into a foundational design system for Diligent's in-house team to build on and make their own.
DESIGN SYSTEM
We named the system Atlas, after the Titan of Greek myth who carried the weight of the heavens.
It was organized into three sections:
Principles: The strategic direction behind every decision
Guidelines: The rules and foundations used to create new components
Components: Standardized building blocks, ready to drop into screen flows and update over time
Diligent wanted the system to support multiple brands under its name, so key components were built on design tokens, allowing colors, type, and other brand attributes to be swapped without rebuilding the components.
For core product screens, we created components in three brand options: the original Diligent brand, the secondary BoardEffect brand (Diligent's mass-market offering), and a white-label version for companies that wanted to personalize the software with their own colors and logos.
We designed a unified navigation pattern with multiple states to work consistently across every product.
The system also extended into smaller, more playful details like sticky notes and content annotation tools.
ADOPTION AND IMPACT
Alongside the principles, guidelines, and components, we delivered a full-day workshop to immerse Diligent's design teams in the new 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
Within four months of launch, seven Diligent products had adopted Atlas, with new products already being planned on the system.