Design System Development & Implementation
restaurant discovery and booking platform
- role /
- design library architect
- team /
-
- project manager
- product manager
- design lead
- research lead
- frontend dev librarian
- designops consultant
- tools /
-
- figma
- miro
- notion
- storybook
- timeline /
-
- 4 months
- Sep-Dec 2022
Overview
The client aimed to unify and scale their design system to simplify processes, maintain consistency, and accelerate feature development across global teams. I was responsible for leading the design system architecture, collaborating with developers and stakeholders, and ensuring the system met real user needs.
My Role
As the Design Library Architect, I redesigned the existing system with a flexible architecture, consistent components, detailed documentation, and tokenised styles. I defined component page structure, ensured visual and functional consistency, and created clear usage guidelines. Collaborating closely with engineering and management helped align the system with the needs of all stakeholders.
Workshops
Interviews
I started by interviewing team members across roles and regions to identify pain points, expectations, and requirements for the new design system.
Offline workshop
In an intensive Paris workshop with employees from different platforms, streams, and roles, we:
- Clarified definitions and vision for DesignOps and the design system.
- Ran a POINT brainstorm (Problems, Opportunities, Insights, Needs, Tasks).
- Mapped roles, responsibilities, and governance.
- Reviewed tools and identified quick wins.
Other workshops
Throughout the project, I held structured workshops to present major updates to the customer team. These sessions included a presentation, documentation walkthrough, real-time demo, and Q&A. Team leads from different departments participated, ensuring shared understanding and consistent adoption of evolving design system practices.
Design System Architecture
Challenge
The design library was shared across teams, platforms, and products, but it was hard to access, overloaded with unnecessary elements and duplicates, and lacked clarity and scalability.
Solution
I introduced a modular structure:
- Projects are divided by stream
- Files are split by platform
- Each team uses only one relevant library
All libraries are linked to a shared base file to ensure consistency. This approach made the system flexible, easier to navigate, and more maintainable across the organisation.
Components
Challenge
Inconsistent component documentation created confusion and slowed down implementation.
Solution
I created a unified template that includes:
- Overview and visual anatomy
- All variants and states
- Accessibility requirements
- “Do and Don’t” examples
- Design history and usage guidelines
This documentation improved cross-team collaboration and helped designers and developers use components correctly and efficiently.
Design Tokens
Challenge
Tokens were limited to colors, lacked structure, and were underutilised by designers.
Solution
I implemented a three-tier token structure (raw, core, semantic) and transitioned to Token Studio in Figma for better sync with development tools. This enabled:
- Consistent visual language across all platforms and products
- Faster development cycles with automated token syncing
- Flexible theming support for different brand variations
- Better collaboration between design and engineering teams
- Scalable maintenance of design decisions across the entire system
Other Deliverables
Slot system
The slot system is a design approach that uses placeholder elements within components to support flexible, changeable content. This method enables the use of complex components — such as modal windows — without detaching them from the master component. It maintains structure while supporting dynamic content insertion, improving both design efficiency and consistency.
Layout system
Instead of applying a rigid grid, we introduced a flexible layout system to support the different needs of B2B and B2C products. B2B interfaces often require dense information displays, while B2C interfaces benefit from a lighter, more spacious layout. Our system supports both use cases through modular structures applied to major interface areas — like side menus, cards, and content maps.
Reflection
This project was a transformative experience that allowed me to contribute to the design system at both strategic and executional levels.
I’m especially proud of:
- Setting up token foundations
- Building shared documentation
- Introducing scalable layout and slot systems
It also reinforced my belief that successful design systems aren’t just about components — they’re about people, collaboration, and continuous evolution.