Building a design system that aligned 2 designers and 8 developers
2025
6 weeks
Project overview
Luzia is a virtual assistant designed to feel as human as possible. As the product expanded from students to a wider audience, the app needed a redesign to reflect the new brand.
Role & scope
I led the definition and build of a scalable Design System in collaboration with Product, Engineering, and Marketing. I initiated the project without a formal brief, identifying the misalignment between design and production as a blocker for the team's velocity.
Problem
Design and development were misaligned: developers often built custom components or duplicated work instead of following the Design System, causing inconsistencies between design and production.
~25% fewer
production inconsistencies
~35% faster
feature delivery
6 weeks
full rebrand coverage
Hypothesis
We believed that creating a new Design System aligned with the new brand, combined with multiple reviews from different teams and constant checks, would allow us to align design and production in a short time.
Define workflow
Following the rebranding, a workflow was defined and agreed on by design and development. This aligned teams, clarified ownership, and accelerated component definition and delivery.
Team analysis
Components were spread across multiple files with no shared structure or clear ownership. The next step was to identify, organize, and consolidate existing components into a shared design library to create a single source of truth.
Example of screen analysis and comparison to identify inconsistencies across existing and custom components.
Roadmap
A six-week roadmap was defined to align design and development on priorities and timing, focusing on core foundations to support the product redesign.
Atomic design
The design system started with an atomic design approach, defining colors, typography, spacing, icons, and tokens to ensure consistency across the product.
Component creation & scaling
Components were built in phases, prioritized with Product and Leadership based on traffic and impact, starting with the home screen, then core tools and chat, and finally deeper areas like settings and pop-ups. I created all components in Figma while Engineering raised tickets for missing pieces, keeping both teams unblocked and moving in parallel.
Overview of design system components and their variants.
Impact
Replaced a fragmented file structure with a single source of truth, giving design and engineering a shared language for the first time
Unblocked parallel work between both teams, eliminating the back and forth on non-tokenized components
Delivered a tokenized system that scaled with the product, covering new features and rebranding needs without starting from scratch
Learnings
Engineering adoption is as important as design quality. A system nobody uses is just a Figma file.
Scalability is an ongoing process. Every new feature exposed gaps in the system and required new components or iterations.
Daily communication beats documentation. What kept design and development aligned was constant conversation, not just handoff notes.