Rebranding a Developer-Friendly Design System
InfluxData went through a rebrand to modernize the look and feel of marketing materials. How might we incorporate updated brand colors in our product design system while maintaining a developer-focused dark theme and meeting WCAG standards? I led the color and style choices during a design system update.
I focused on checking colors against WCAG standards, researching other dark-mode design systems, design iteration, and tracking progress and impact to existing design components.
I collaborated with one other Product Designer, who focused on component consolidation and hierarchy, and a Design Engineer.
The New Brand Color Palette
The Marketing team worked with an external agency to choose new brand colors and then presented the updates to the Product Design team. This meant our team needed to figure out how to incorporate colors that were chosen for a light mode marketing site into a dark mode, highly technical application while meeting WCAG (Web Content Accessibility Guidelines).
How might we incorporate InfluxData’s updated brand colors in our product design system while maintaining a developer-focused dark theme and meeting WCAG standards?
We had three main project goals:
Incorporate the new brand colors into the product design system
Meet WCAG standards and reduce eyestrain
Simplify the design system by reducing the number of colors, creating a minimal UI with a unified visual style, and detailing out consistent usage patterns for components
Research & Discovery
One of the first things I tested out was placing the marketing colors on our dark application background color to see what would fall within WCAG standards. It was obvious that we wouldn’t be able to use some of the colors chosen by Marketing, but with some modifications we’d be able to incorporate enough colors to make it look consistent with the brand.At the opposite end of the spectrum - too much contrast can lead to an effect called “halation”. For example, when you have pure white text on a pure black background, the words can start to blur together. It especially affects users with astigmatism.
Since there are several examples of how other companies handle colors in dark-mode, I drew inspiration from applications like Apple Fitness for their stylistic choices and looked at popular VS Code themes to see how they reduced eyestrain for developers.
Along the way I iterated on the color palette, trying to find the right balance of enough contrast to meet WCAG, but not too much contrast to cause eyestrain. I applied several color palettes to a few of our pages, from our simple sign up page to our highly detailed Script Editor, to see what the colors would look like in context.
I partnered with another designer on the team to create a spreadsheet listing each design library component, a link to the new component mock-up in Figma, a link to the engineering ticket to update the component, and any notes we had about the component that we would need to revisit in the future. This allowed us to be thorough in our audit and make sure everything was detailed out for the engineers.
The New Color Palette
After several iterations and reviews with the design team, we finally landed on a color palette we felt was in-line with the new brand colors, but could still work for our dark-mode application.
Old vs. New Design System
Once implemented, InfluxDB will have a design system that meets meets brand guidelines, WCAG, and a better user experience
New colors and style choices provide a consistent look with the marketing website, creating better brand recognition and trust.
Better visual hierarchy will make it easier for users to process information and understand the primary calls to action
The consistency between the Figma components and InfluxData’s component library will allow for efficient hand-off between design and engineering
Connect with Marketing more frequently to make sure the platform and marketing assets are consistent
Bring engineering into the process earlier and confirm that we have enough resources to implement the new design system
Set up bi-weekly meetings to review design system updates and needs with engineers, even after this project is completed
