Avalara Design System

At first, I was the only UX designer dedicated to Skylab, the Avalara design system. During this time, I was responsible for the project strategy, research, and design deliverables. I worked closely with my UX manager, other UX designers, other project managers, and my engineering teammates to review my ideas and deliverables.

The Avalara ecosystem is made up of many different digital experiences maintained by independent teams across the globe. This resulted in numerous redundant efforts, and inconsistent solutions. This was a highly inefficient use of valuable company resources for a rapidly growing public technology company striving to achieve profitability.

The goal of the design system was to enable Avalara teams to easily maintain consistency across their deliverables, thus minimizing redundant expenditure of resources on redundant problem solving.

My plan for the Avalara design system included a few key concepts:

1. Provide thoughtful and flexible design and development solutions that fulfill common needs across Avalara teams and users.
2. Prioritize common needs over unique needs to deliver as much value possible to the broadest range of Avalara teams and users possible.
3. Thoroughly research solutions to ensure they reflect UX best practices and improve Avalara experiences.
4. Provide fully responsive solutions that display optimally in diverse device and browser environments.
5. Ensure all solutions are compliant with WCAG Level AA accessibility guidelines to optimize usability across diverse user types.
6. Publish solutions and usage guidelines on a public website to make them easy to find.
7. Create a dedicated Slack channel for all of Avalara to discuss the design system.

Theprocess for the Avalara design system evolved frequently as the team grew, but several key steps remained essential from the beginning.

I met regularly with a broad range of stakeholders across Avalara to understand what components and patterns appeared most frequently and in the highest demand across the Avalara ecosystem. I prioritized common needs to ensure the design system delivered the most value possible to the broadest audience possible.

Before designing, I researched each topic thoroughly. This helped ensure that Skylab solutions were as effective as possible. Common research steps included:
‍
1. Collecting and analyzing existing solutions from within Avalara and from external design systems. 
2. Gathering publicly available UX research and UX best practices from trusted UX research institutions.
3. Meeting with internal UX Researchers and other subject matter experts to learn about existing Avalara patterns and user pain points.

During the design phase, I incorporated my research findings into my design explorations and proposal presentations. I used foundational styles and components consistently, provided responsive and accessible solutions, and authored usage guidelines and visual examples for all design system content.

Before publishing, I scheduled meetings with relevant UX, product, and engineering stakeholders to review design system proposals. Review meetings, ensure that design system proposals met Avalara business and user needs, and that they were feasible to develop. Often times feedback would lead to further iteration, which we would review again as needed.

Once reviewed and approved, I then published new design system solutions to a variety of platforms, including:

1. The internal design system library in Figma, which included vector assets and variants to meed the needs of Avalara UX designers.
2. The design system website, skylab.avalara.com, which included inspectable component specs, visual examples, and usage guidelines.

I would then notify Avalara about the new content to generate excitement, point teams to the assets and documentation, and encourage design system users to report bugs and share feedback.

I worked closely with my engineering teammates at all times to stay updated on the status of design and development tasks. After new design content was published, I would help work through any questions that came up during development, and review solutions for quality assurance before they were merged to the SDK.

Together, my engineering teammates and I would monitor our community feedback channels to address questions on newly released content, and triage new requests.

Some early highlights included:
‍
• Created a Figma library with over 25 components, hundreds of sub-components, and thousands of individual assets.
• Created skylab.avalara.com with over 50 pages of documentation, including inspectable specs, usage guidelines and visual examples.
• Created a Skylab Slack channel with over 250 active members.
• Implemented Skylab in multiple wholistic product redesigns.

Over time, the value of Skylab grew, and the Design System Team was formed, adding additional UX designers, engineers, writers, and managers to the project. More recent Design System team highlights include:
‍
• Adoption of Skylab by over 15 internal teams.
• Publication of over 50 Skylab components, hundreds of sub-components, and thousand of individual assets.
• Publication of over 100 pages of documentation on skylab.avalara.com, accumulating thousands of unique views.