Problem
The Twilio website team had multiple style guides and component libraries kept in a variety of places. When a designer was working on a new page they needed to track down the right style guide for that page type before starting, making page designs a long process. The lack of consolidation also led to problems with consistency, resulting in tech debt. The team needed a consolidated design system to act as a single source of truth.
Solution
I worked with 2 designers and 2 developers to create Twilio's first design system. For this project I worked on both the design and development.
We prefaced the creation of each token, component, and pattern with an audit of the site to see what already existed and key context regarding current usage and variation. We then researched WCAG accessibility guidelines and best practices. Finally we set it up in Figma as a component and added documentation for using it. At this point we moved on to the development stage where components were engineered using React and added to Storybook and the design system website.
Results
The design system sped up the page creation process by 50% and the team achieved the OKR of developing 45 components and patterns within the first 6 months.
The design system also set the foundation for future iterations of the marketing design system which include SendGrid and Segment, as well as set the team up for success during a migration of the website to Adobe Experience Manager.
