A design system is a set of standards, guidelines, and tools that help teams design and build digital products more efficiently and consistently. It serves as a single source of truth for the visual and interactive elements of a product, including typography, color, layout, and functionality.
<aside> ℹ️ The federal government of Nigeria operates numerous websites and digital applications, each with its own design language and user experience. This results in the lack of consistency which confuses citizens trying to access government services online. The Druids Alpha team was tasked with creating a design system that provides a shared set of reusable visual design principles, styles, UI components, and patterns for use across all federal government digital products.
</aside>
Note: This was a collaborative team project conducted by the Druids Alpha team. The team consisted of a product manager, brand designers, product designers, UX writers, and illustrators.
Before the design system
After the design system
.png)
We conducted user research to understand the common pain points and needs across our products. We also surveyed the design teams to gather their input and perspectives.
We defined the scope of our design system as follows:
<aside> ℹ️ Actionable insights from research
We began by creating and defining the foundation for the overall look and feel of our design system, which includes colors, typography, grid and space, and icons.
The Foundation: Grid & Spacing, Iconography, Typography, Color.