Design System Development & Implementation

restaurant discovery and booking platform

Design system interface showing unified components and documentation
design system
research
workshop & training
design documentation
design system
research
workshop & training
design documentation
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.
Workshop brainstorming session with team members

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.

Component documentation template showing variants and states

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
Design tokens structure showing three-tier organization

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.