About The Project
Project Overview
Role: Senior Manager, UX Design at Syndigo — Nov 2023 to Present (10+ years of UX experience)
Solution: A single, consolidated, code-connected design system spanning Syndigo's product suite …. replacing fragmented, duplicated component libraries with one governed source of truth wired directly into Storybook, GitHub, and the company's AI prototyping tools.
Objective: Give designers, front-end engineers, and product managers one consistent system to build from eliminating drift, closing the gap between design and code, and letting the whole organization move faster without sacrificing consistency or accessibility.
I joined Syndigo … a B2B product-data platform spanning MDM, PXM, and syndication products … as Senior Manager of UX Design. My responsibility was threefold:
Lead end-to-end product design across core products, including the Nutrition Analysis platform and the Syndication Tracker, while supervising the designer working alongside me on them.
Take ownership of a fragmented, ungoverned design system and rebuild it into a single, consistent, code-connected source of truth.
Manage and grow a team of 8+ product designers while reporting to the VP of Design and partnering with the Director of Design and front-end engineering.
Design Process
I approached the rebuild in clear stages, each grounded in the audit.
Audit: I inventoried every component across the products, mapped Figma against production, and flagged every duplicate and inconsistency.
Consolidation: I reduced each set of duplicates to a single canonical component, documented each with its anatomy, variants, and version history, and introduced a clear workflow — ideation, in progress, completed — with tickets attached to design frames.
Code Connect & Storybook: For all 70+ components, I authored the Code Connect and component code files and set up Storybook to show the design and live coded form side by side.
GitHub Integration: With no UX rep in the repo, engineering granted me access and I committed the component and Code Connect files directly to GitHub, closing the design-to-code loop.
AI-Powered Prototyping: I was the first in the company to use Figma MCP to turn designs into coded, clickable prototypes for testing before development, then locked Lovable and Claude Design to the system's components so teams could only generate on-system work.
Accessibility: I built and verified every component to meet WCAG AAA standards.
Accessibility
The system was built to meet WCAG AAA standards. Components were designed for screen readers — with semantic structure, ARIA roles, and clear labels — and tested directly with screen-reader software. Colour was handled for multiple forms of colour blindness, so no information ever relied on colour alone. Conformance was checked with automated accessibility tooling and captured in written guidelines, so every team could build and contribute to the system accessibly.
Impact Metrics
70+ components consolidated into a single, code-connected source of truth.
Syndigo's first design-to-engineering pipeline, validating designs with coded prototypes before build.
Company-wide on-system prototyping adopted across product and design teams via Lovable and Claude Design.
Reduced design-to-development cycle time through consistent, code-connected components.
Context & Problem Statement
The design system had no structure and little governance. The same component often existed in several inconsistent versions across products, and nothing connected design to shipped code: no Storybook, no code-connected components, and no UX presence in GitHub.
The result was drift. Designers, engineers, and product managers each interpreted the system differently, slowing delivery and forcing engineers to rebuild UI from inconsistent specs.
Stakeholder Analysis
Front-End Engineers: Needed components that matched design intent and dropped straight into production, instead of rebuilding from inconsistent specs.
Product Designers: My team needed one governed component kit so they could focus on solving problems rather than recreating UI.
Product Managers: Needed to prototype and test ideas quickly without drifting from the real product.
System Audit
Before changing anything, I audited how the system was actually used, so the rebuild was grounded in evidence.
Component Inventory: Catalogued every component in use and identified the duplicates.
Figma-to-Production Mapping: Compared design libraries against shipped UI to locate drift.
Team Interviews: Spoke with designers and engineers about where the system helped and where they worked around it.
UI Relay Plugin: Built a custom Figma plugin to run the system — mapping components to code, tracking coverage and code health, generating and syncing component code, managing tokens and templates, and flagging gaps to fix — turning governance and design-to-code into a continuous workflow rather than a one-time cleanup.
Challenges and Solutions
The core challenge was the missing link between design and code. With no UX presence in the repo, I secured GitHub access and took ownership of the Code Connect and component files myself, so design decisions reached production faithfully instead of being reinterpreted.
Fragmentation was the second. Rather than police consistency by hand, I consolidated duplicates into canonical components and built the UI Relay plugin to stop the system drifting back.
Adoption was the third. By wiring the system into the tools teams already wanted — coded prototypes, Lovable, and Claude Design — I made building on-system the path of least resistance.
