Fivetran Design System

Design system spanning brand, product, and web for Fivetran, the leader in modern data integration.

 
PROBLEM

There were many visual discrepancies across a user’s journey with Fivetran’s brand, web, and product design experience. Internally, those discrepancies made the team’s work less efficient because we were reinventing the wheel each time leading to lengthy review processes.

SOLUTION

Brand (myself), web (my teammate, Kyle) and product (my teammates, Rich and Jeff) came together to build a design system program that codified decisions into reusable styles and components so that the full design team would be empowered to move faster, ship higher quality customer experiences and implement consistency at scale.

We kicked off with a workshop to look at where we’ve been and where we wanted to go. Next, during weekly working sessions, we established which elements would be part of the overall design system: color, typography, shapes, iconography, shadows. All elements touched brand, web, and product in various ways, though how those elements manifested in each system was uniquely considered.

As the brand system lead, key outputs of the project included: a refined color palette and an illustration toolkit. I built the refined color palette on the existing Fivetran palette to include higher contrasting colors and ensure accessibility. I designed the toolkit in Figma to serve as storage for commonly reused elementsset as components in Figma. The toolkit also exists as a Figma style library of colors organized as primary and secondary colors with usage ratios. Lastly, the toolkit exists as a reference to use when applying foundations to thematic illustrations.

The results included much better consistency, efficiency, and effectiveness across the team’s designs, a better design process eliminating lengthy reviews and circling questions, and a unified design presence ensuring a consistent end-to-end experience for customers as they move through their user journey with Fivetran.

 

Team
Jeff RussellSr. Product Designer
Kyle PalermoSr. Web Designer
Rich BachmanSr. Design Technologist
Morgan RollinsonSr. Brand Designer

Company
Fivetran

Industry
Data technology