Design System
The development of a design system was introduced to address inconsistencies in product design and enhance efficiency, consistency, and brand trust. The goal was to streamline design processes, improve user experience, and reduce time-to-market.
The Design System evolved over two years, moving from the nascent stage to the basic stage in the first year, and advancing to the integrated stage by the second year.
Due to rapid growth, we faced challenges with inconsistent product design, poor design quality, slow delivery, and limited design resources. These issues led to fragmented user experiences across platforms.
We developed a design system composed of reusable components and a unified visual style. This system allowed teams to create and replicate design work efficiently, resulting in faster market delivery, improved design consistency, and reduced technical debt.
Goals
- Deliver products to market faster
- Establish better design standards and improve quality
- Create consistent, high-quality user experiences
- Reduce cost and technical debt through reuse of validated components
We used the company rebrand and subsequent acquisition as catalysts to introduce and scale the design system. Starting with a pilot program, we identified common components and patterns by evaluating technical feasibility and product impact. The pilot enabled us to build and refine reusable components while securing buy-in from stakeholders.
We collaborated with frontend engineers and product champions to integrate the design system across different product teams. Our incremental approach focused on creating a library of components like buttons, forms, and layouts, while ensuring accessibility and mobile responsiveness.
Team Building and Research
We fostered a collaborative environment through weekly discussions with interested designers, sharing insights from published design systems and brainstorming how to update our outdated designs. We audited existing design elements and aimed to enhance button sizes, colors, layouts, and forms using modern design principles such as the Z and F patterns.
Key Design Elements
- Color palette, typography, and iconography
- Consistent grids and spacing
- Voice and tone for the brand
- A comprehensive inventory of UI elements like buttons, forms, icons, and navigation menus
Execution, Results and Governance
Through incremental development, we built a scalable design system that addressed key pain points. Each component was reviewed by designers and tested for usability, with a focus on responsive, mobile-first design. We launched the new visual style alongside the company’s rebranding, tightly integrating the design system with the overall brand strategy.
I find the governance and contribution schedule described in Design That Scales highly practical, especially compared to a previously considered governance process (Dan Mall, p. 97).
The design system became a cornerstone for improving product efficiency, reducing inconsistencies, and ensuring a unified user experience across all products. By linking the design system to ongoing product work, we fostered long-term sustainability and design quality within Litmos’ development ecosystem.
