Diligent Design System
Challenge
Corporate Board Management software company Diligent faced the challenge of incorporating acquired competitors’ products into their portfolio while reaching towards a refreshed, elevated digital experience across all of their executive audience products. They sought the foundations for a unified Design System that their in-house designers could leverage to establish a higher quality visual experience and streamline internal software development.
design director: Christian Linsey,
senior digital designerS: William conklin & Sarah Knotz
Foundational work
This inventory was one of the ways we worked to ensure that the new design system
would meet functional needs across all products. Clearly visualizing the scope
and variety of the accumulated design inventory also helped solidify buy-in and
enthusiasm for the design system project across the company.
We started by completing a broad inventory of the different frameworks, interface elements, and assets across both the current product and new acquisitions in order to better understand the breadth of the ecosystem.
Next, as a step towards gaining alignment on terminology and brand expression before diving
into digital design, we conducted a product experience voting activity with stakeholders, resulting in 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.
Product design
Leveraging the ‘Seamless’ visual direction to visually refresh key product screens, our team extracted and concentrated the design choices into the foundations of a design system of Principles, Guidelines, and Components for the Diligent design team to expand upon and make their own.
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.
In addition to reusable branded components, we created a section of more general guidelines to enable future designers to have a standardized framework and defined elements from which to create new components.
Our system also extended out into more granular, fun details like sticky notes and content annotation tools.
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.
As a finishing touch, we facilitated a naming workshop with key stakeholders. The team chose the name Atlas, inspired by the Greek myth of a mortal tasked with holding up the whole world.
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
Within four months of launch, Seven Diligent products had implemented the design system, and plans for new products using the system were in the works.