Problem
Twilio’s web ecosystem spanned five differently branded sites. Disconnected style guides and fragmented assets across sites slowed production, increased redundant work, and created inconsistency across the customer experience.
Solution
I collaborated with a cross-functional team (UX, brand, and engineering) to define and deliver Twilio’s first marketing design system, created to streamline production workflows and improve consistency across web properties. We approached the initiative through the following steps:
- Audited the existing design landscape across Twilio sites to identify patterns, variations, and inconsistencies.
- Grounded decisions in WCAG accessibility standards and industry best practices.
- Designed and documented design tokens, components, and patterns in Figma with clear usage guidelines.
- Followed atomic design principles to set up a logical system.
- Conducted usability testing on key components, such as form fields.
- Partnered closely with brand to strategically align component branding to set the foundation for a future web consolidation.
- Collaborated with engineers to build and ship components in React, adding them to Storybook and the design system site.
Results
- 50% faster page creation for designers thanks to a centralized, reusable system.
- Delivered 45+ components and patterns within the first 6 months prioritized by business impact and adoption potential.
- Established a scalable foundation used for future design system iterations, including 2 rebrands, a site migration to Adobe Experience Manager, and a consolidation of websites.
Reflection
This project taught me that design systems are living products, not static deliverables. They require ongoing governance, consistent maintenance, clear ownership, and alignment to the tools designers and engineers actually use. Over time, our system required multiple iterations. Each revamp surfaced new gaps in contribution workflows, documentation, and adoption, but each iteration also made the system more resilient and better aligned to real-world usage.
