Building a Design System
Head of Product Design · Alef Education · 2019
From scratch, without allocated resources — a bottom-up initiative that became the foundation for consistent, scalable product design across the organisation.
In 2019, I led a guild team to build the very first design system for Alef Education from scratch. The importance of a design system was not yet fully understood by the organisation, and no resources were allocated for the initiative. The process represents an exploration of a bottom-up, volunteer-driven approach to establishing design infrastructure.
- Build a design system from zero — no existing component library, no documentation, no shared language between design and engineering
- Secure buy-in without formal resourcing or executive mandate
- Coordinate across multiple product teams with different priorities and codebases
- Establish governance that balances quality control with broad adoption
The first step was understanding the current state. I conducted research on best practices and processes for building design systems, then started a comprehensive UI review across all products. Working with the design team, we catalogued every existing component, pattern, and inconsistency — creating a UI inventory that revealed how much duplication and divergence had accumulated across 35 unique colours and 238 font size declarations.
With no dedicated resources, I chose a grassroots approach: organising presentations that invited all front-end developers to see the value of a shared design system, then calling for volunteers. This created Alef Education's first-ever guild team — a cross-functional group of designers and developers contributing alongside their regular work, united by a shared belief in better tooling.
With PM support and guild team members, we identified the first page to build as our MVP. Following Atomic Design methodology, designers created components at the atomic level while developers implemented them in parallel. Each component was reviewed and approved before being composed into larger molecules, organisms, and finally full page templates — all documented in a living Storybook.
Every component shipped with thorough documentation: usage guidelines, interaction states, accessibility requirements, and when-to-use / when-not-to-use guidance. This ensured teams could adopt components confidently without needing to consult the guild team for every decision.
We established a unified type scale, colour tokens, and a pixel-perfect icon system. Icons were optimised for legibility alongside the default web browser font size of 16 pixels, using a 16-pixel grid to ensure visual consistency across all sizes.
Through team discussion, we established a hybrid governance model. A core group of developers and designers owned quality review, while every product team was expected to both contribute to and consume the design system. This balanced central control with distributed ownership — preventing bottlenecks while maintaining consistency.
Core contributors organised hands-on training sessions for each product team, building buy-in through demonstration rather than mandate. Sessions were recorded for onboarding new joiners, creating a self-serve knowledge base that scaled beyond the guild team's capacity.
- First design system established at Alef Education, creating a shared language between design and engineering
- Guild team model proved that bottom-up initiatives can succeed without formal resourcing — through clear communication and demonstrated value
- Reduced inconsistency across products as teams adopted shared components and patterns
- Faster delivery as developers and designers reused vetted components instead of rebuilding from scratch
- Scalable onboarding through recorded training sessions and living documentation
