Where to next?
Working at Killer Visual Strategies, I was tasked with developing a data visualization design system for the world’s leading personal finance software company. Up until now, this client had been cobbling together these graphics from a variety of sources including pulling existing assets, producing them in-house, and outsourcing the production to several different agencies. On top of that, their company was going through a refresh of their visual language, and needed a partner to help explore this new direction and how it can be applied to their data visualization system. Killer Visual Strategies was approached to develop a design system and guide to solve this problem.
Intuit
Design Systems, Data Visualization, Figma
I began with a discovery phase to understand the underlying visual system and the exact specs needed for each template. This required communication with several key stakeholders and designers who had deep insights into the data they needed to portray, how this system would be used, and who the user making use of this system would be. Their team’s designers and production team would be the core users utilizing this system, but they wanted it accessible for anyone on their team to be able to jump in and produce graphics if needed. This core group of users would be familiar with navigating through Figma files and utilizing component libraries, but guardrails were necessary to minimize any accidental changes or alterations that fall outside of the guidelines. From there, I identified exact specs, use cases, edge cases, and design parameters for the project, which allowed me to dive into Figma and begin building out a select few sample templates to nail down the vizual direction, color and type hierarchy, and general workflow which we presented to the client to help further the conversation.
Developing a design system is a challenge within itself. This system used a deep, multi-layered hierarchy of components, so staying organized while creating a template that would be intuitive for the user was a difficult task. On top of that, not only did I need to develop this design system, but the graphs needed to be templatized allowing the user to input and customize the data to their liking while keeping guardrails intact to ensure the graphics maintain a cohesive look. Creating data visualization in Figma can be a convoluted task, often involving multiple software programs or fully building charts from scratch. These approaches wouldn’t be suitable for a template meant to be intuitive and efficient. The solution was in the vast amount of plugins designed to streamline and customize the Figma experience. The Chart Plugin allowed us to create customized templates where their team could plug in sheets of data that would automatically produce graphs that adhere to their team’s design standards. Though this added an extra layer of instructions for the user to learn, overall, it streamlined their workflow and consolidated the necessary software. Below are the step-by-step directions and guidelines on how the design system is to be used, how to use the chart plugin, recommended character counts, color guidelines, and other instructions to make the system as user-friendly as possible.
Color was a particular challenge when creating this system. Since the client was fresh off of a new visual language, much exploring had to be done to determine the best colors to pull from the palette, which colors had the highest contrast with each other, and most importantly, the color order. To make the charts feel cohesive amongst each other, and connect seamlessly to the rest of the brand, the charts needed to have a uniform color ordering system. The primary colors needed to be the first to be used since those would show up the most often, but we couldn't fully front-load all of the primary colors, or else the latter half of the charts would feel disconnected from the rest of the brand. On top of that, accessibility in contrast was important to keep in mind throughout this process.
Green
#0FD46C
AAA 10.65
Dark Green
#0FD46C
AA 4.72
Sky Blue
#07C4D9
AAA 9.91
Light Green
#94F8BA
AAA 16.40
Yellow
#FFDF6E
AAA 16.03
Orange
#FFA640
AAA 10.78
Light Blue
#98E6EF
AAA 14.90
Purple
#A898FF
AAA 8.60
Royal Blue
#0077C5
AA 4.72
Light Purple
#DBD5FF
AAA 14.97
1
2
3
4
5
6
7
8
9
10
White
#FFFFFF
Faint Blue
#F4FAFA
Tofu
#F3F2EF
Midnight
#0D333F
Green
#0FD46C
Pink
#FC625E
"The data viz library is working beautifully. Thank you SO much team for all the work put into this, it really shows...I’m super excited to start using it!"
Embed below is the final Figma file containing 17 chart-type templates, and guidelines on how to use the templates. Zoom in and pan around to check out the final deliverable.
