AVIA Connect Design System
How can you increase efficiency for design teams as well as engineering to bring features to market faster? The answer is more often than not using a design system. The AVIA Connect product team had been working without any type of component-based system for several years and it was up to me to make the case that this was not a sustainable way of working.
Client: AVIA
Role: Product Design Director
Skills: Product Design, Information Architecture, Visual Design, Team Leadership, DesignOps
Team: Product Design Director (me), Product Designer, Front-end engineer
Timeframe: 6 months
AVIA Connect is a social media platform for health tech professionals to connect with peers and engage in industry discussions. The base components needed to accommodate all the basic UI required for a typical SaaS-based experience plus social media-specific cards and patterns.
AVIA Connect also supported groups, where users could share private files and discussions with select individuals.
The AVIA Connect platform supports a fully responsive web application experience.
We chose Google Material design as the basis to start with to gain a general framework out of the box that was highly supported and easy to theme.
Material design was a great starting point, but the complexity of the app required custom components. Using Figma was the perfect choice, utilizing its powerful variants features.
An important part of any design system project was coming up with the basic organization. We landed on Core Components, Patterns, Brand & Styles, Helpers, and Icons as the top-levels.
As the project came to a hand-off point, we began to work with a front-end engineer who replicated the system in Storybook for maximum reuse in the platform.
Process
Before we were able to even start putting pen to paper, I had the task of building the business case for a design system to the SVP of Product. The argument of efficiencies over time was enough to give me the green light to pursue this major body of work that would put new feature development on hold for several months. Below are the steps I took as I led the team through the project.
Planning
We took careful steps in planning to make sure we didn’t have to rework the organization down the road. Through careful understanding of the Material design system and an audit of the current set of custom features we were able to land on a framework that was the basis of our new design system.
Design
The next step of process was to start building out all the theming, base components, and custom components in Figma. This was a long process that required an eye for consistency and attention for detail. The outcome had to support the platform universally and be flexible enough to work with complex data inputs. We relied heavily on Figma’s variant and style features.
Build
The last phase of the project was centered around working closely with engineering to build out the system in Storybook. This was an iterative process that required a pixel-perfect eye for detail that also needed to flexible enough to expand in the future. Once complete I took on the final steps of change management with the broader team.
Results
The end result was a great success for the team who rallied behind the new structure and process. The benefits of code reuse and design consistency not only brought new features to market at a much faster rate, it upped the design quality of the app through a consistent visual and interactive experience.
<1%
Less than 1% component detaches from the team in last year.
100%
Over 100% increase in speed to market by creating greater efficiencies between design and engineering.
2.2k
2.2k total components created throughout the design system.