Design leadership
Design systems
FoodTech
Component library
Collaboration
Fragmented teams, patterns, and code across a product ecosystem
Key problems areas
Components were poorly constructed.
Maintain the ezCater brand across all experiences.
Consolidate all navigation into a single left-hand menu using tabs.
Limited collaboration between design and engineering with no ownership.
I defined clear design goals to guide decision-making and shape product direction and priorities
Accessibility compliant
Accessibility needs to be baked into each component.
Flexibility for all
Components need to be easy to interchange and manage.
Minimize variants
Streamline components into variant states (success, error, etc).
Improve collaboration
Create a system that engineers could implement reliably and designers could apply confidently.
Full token library
Identify primitives and tokens as a foundation.
Governance
Enable safe evolution through versioning and governance practices.
To understand existing pain points, I conducted an audit, research and interviews with teams across the design and technology organization.
Audit of existing UIs across products.
Interviews with designers and engineers to identify friction in handoff and implementation.
Pattern analysis to catalog variance in spacing, typography, states, and behaviors.
Here is what I gathered
Teams duplicated similar components with slight variations, leading to divergence over time.
Engineers implemented UI patterns inconsistently due to ambiguous or missing specs.
Lack of shared tokens led to visual drift and unpredictable behavior.
These insights shaped the foundational system architecture and informed prioritization.
I built a framework around these three pillars
Foundational reset
Consolidate Figma libraries into a single source of truth.
Rebuild components using modern Figma capabilities to reduce redundancy and enable scalability across themes and variants.
Establish a dedicated design system team.
Collaborate with engineering leadership to assign a front-end technical leader to pave the way for engineering.
Appoint designers and engineers to design and build the system.
Define a new codebase that allows for flexibility and a modern, scalable approach.
Establish a component library in code with shared tokens and semantic variables.
Documentation as a First-Class Product
Create centralized, searchable documentation regularly updated to reflect patterns, status, and usage guidance.
Surface principles, accessibility guidelines, and contextual examples to help teams make informed design decisions.
Turning 3 themed products into one unified brand
I led the consolidation of three independently themed products into a single, unified branded design system, creating a consistent visual and interaction language across the platform. This unification reduced fragmentation, strengthened brand recognition, and gave teams a shared foundation to build faster and more confidently.
By aligning design and engineering around one system, we improved scalability, reduced design debt, and ensured future products could launch with clarity and cohesion from day one.
Turning 20 variants into one flexible component using properties
I consolidated our library of variants into single flexible components using Figma’s properties, dramatically simplifying the system. This allowed designers to create wireframes and prototypes faster than ever by reducing setup time, improving consistency, and making exploration effortless.
Explored and refined file organization using Motiff
While building our design system, I experimented with Motiff, an AI-powered platform, to accelerate component creation, documentation, and the creation of visual guardrails. I evaluated its ability to generate tokens, propose patterns, and automate documentation against our brand and UI needs. Though early-stage, Motiff revealed automation opportunities and governance considerations for sustainable design system maintenance.
Driving adoption through shared ownership
Delivering Ingredients required regular alignment with designers and engineers:
Design syncs to ensure patterns evolve with product needs.
Engineering reviews to validate feasibility.
Documentation updates to keep the system trustworthy and discoverable.
I also facilitated workshops on adopting Ingredients, improving onboarding for new designers, and reducing friction in handoffs. Regular contribution rhythms ensured the system stayed current with product evolution.
Execution highlights
Figma foundations
I consolidated our design assets into a smaller set of well-organized libraries. Components were rewritten from scratch to exploit smart properties and variants, ensuring designers could build screens faster with fewer errors.
Design tokens & theming
My team defined and implemented design tokens representing the core design language (color, typography, spacing, patterns) with semantic naming to enable consistent theming and easier translation into code.
Cross-team collaboration
I created an open Slack channel and regular syncs where designers and engineers could discuss patterns, raise questions, and resolve inconsistencies publicly, cultivating shared ownership of the system.
Documenation
A dedicated site (Tapas) became the authoritative reference for standards and best practices, covering not just components but also accessibility guidance, decision logic, and when to use each pattern.
Wins and outcomes
We began design research and exploration in April, gradually assembling cross-functional teams. Since the design system wasn’t anyone’s primary focus, progress was steady but slower than anticipated. By June, we had an MVP for the design team, followed by engineering component development. In September 2025, we launched Ingredients with approximately 90% of components complete.
The impact was immediate. Every designer adopted Ingredients, eliminating the need to break components. Our property-based approach made creating product components 40% faster. Engineering development time dropped nearly 50% based on Jira tickets, as engineers no longer rebuilt components for each iteration.
In July, the company initiated a rebrand. Our unified system enabled seamless updates across logos, colors, and components, something that would have been significantly more challenging previously. In October, I established processes for component updates and creation, then transitioned design system leadership to a senior designer.
Design system work is strategic, not tactical
Rebuilding ezCater’s design system was not a one-off project; it was a strategic investment in organizational leverage. By treating the system as a real product with metrics, principles, and cross-disciplinary ownership, we unlocked clarity and efficiency across the product organization.
Key lessons from Ingredients include:
Start with tokens; they are the backbone of scalable systems.
Documentation is not optional; it enables trust and adoption.
Cross-team momentum matters; systems succeed when the organization participates.