Avalara Design System
My role
I was hired at Avalara to lead the creation of their company-wide design system from the ground up. Over seven years, I managed and scaled the initiative from inception to widespread adoption. I was responsible for the project strategy and design deliverables. I worked closely with stakeholders from product, design, and engineering to align roadmaps and review solutions.
The challenge
Avalara had a wide range of products accumulated over time, built on different platforms, and maintained by seperate teams around the world. This fragmentation led to inconsistent user experiences and redundant design and engineering efforts. Avalara needed to streamline the efficiency of it's design and development teams and bring consistency to it's growing suite of products. The creation and implementation of a design system was the proposed solution.
Goals
My goal was to build a custom, first-class design system tailored specifically to Avalara’s needs. The system would enable teams to deliver value more efficiently and introduce consistency across Avalara products. The business goals of the design system were to:
- Define best practices for product design and development
- Increase design and development efficiency and velocity
- Improve consistency, accessibility, and user satisfaction across products
- Reduce company costs
Process highlights
I placed collaboration at the heart of the design system to ensure deliverables always provided optimal value for design system users. I adapted and introduced new strategies as the system matured, but many processes I established early on became essential to the success of the project:
- Created a design system project in Jira to triage requests, maintain a backlog of tasks, track progress, share status, and coordinate engineering handoff
- Cultivated trust across product, design, and engineering leads, meeting regularly to align priorities and review proposals for feedback and iteration
- Delivered thoroughly researched design solutions backed by best practices, including responsive behaviors and WCAG 2.1 Level AA accessibility standards
- Partnered with UX researchers to test design system solutions with Avalara users and gather user insights
- Led design system training for all UX hires, onboarded new team members, and mentored colleagues on design system usage and best practices
Deliverables
- Created foundational design system principles, processes, and foundations, including color palette, typography, iconography, responsive page layout grids, contribution methods, and more
- Built a comprehensive Figma library featuring over 65 core components, hundreds of variants and subcomponents, and thousands of individual design assets
- Authored over 100 pages of detailed, public documentation at skylab.avalara.com, including usage guidelines, visual examples, and development specifications
- Led design system adoption across over 15 internal teams
Results
The Avalara design system is now an essential resource used daily by product and engineering teams to deliver consistent, accessible solutions with significantly increased efficiency and velocity. Key results included:
- Increased design and development velocity by 25 to 35%
- Added over 17 weeks of annual efficiency gains
- Generated $12M to $20M in annual cost savings
- Improved internal design system satisfaction scores by 69%
- Achieved 100% daily usage across core product and engineering teams
- Inspired a new policy requiring 100% of all new projects to use the design system
- Reduced negative product feedback from customers by 15%
- Earned WCAG 2.1 Level AA compliance certification
- Nominated for Avalara’s Excellence in Product Delivery award
Tools
- Design asset library: Figma, Sketch
- Design documentation: Zeroheight, Chat GPT
- UX research: Maze, Dovetail, Fullstory
- Development: Stencil, custom web elements, HTML, CSS, Javascript XML, React
- Code repository: Custom SDK
- Supported frameworks: Angular, Ember, Javascript, React, Vue
- Development documentation: Custom website
- Prototyping: Webflow, HTML, CSS
- Project management: Jira, Confluence
- Communication and collaboration: Slack, Zoom, Miro
