Introduction
Consistently is the Design System that the Fastly Marketing organization relies on for developing on the Website. Consistently also pulls its primitive color values and key assets from Fastly’s brand guidelines, Summit.
We rebuilt the design system from the ground up to support the latest Brand Refresh and Website Rebuild. Some of our accomplishments were:
- We established a scalable design token framework that sped up design times for new, on-brand pages from (2) weeks to a matter of days.
- We simplified our page templating methods—publishing 20 product pages with one template so far, with the ability to scale for more.
- We championed an accessible color relationship framework that ensures all content is at least WCAG AA compliant.
and more! Scroll to read the breakdown.
Easy to use, easy to maintain
Fastly failed to maintain the last iteration of the design system because everything was too custom—components were made very specifically per use case. This included the component library in Figma, so I sought out a better way to flexibly structure our components.
Maintaining consistency through Figma Variables
I heavily relied on Figma’s Variables and modes features to handle theme-able relationships like: color, spacing, and responsive breakpoints.
Accessibility-first foundations
The components we design will always be WCAG AA accessible. Both designers and developers can trust that the end product will work for all users. We have constant accessibility audits at every phase of the design and development process, and continuously revisit existing components just in case.
Design documentation
I set aside time to quality check the way that Figma components have been made to make them more internally friendly and usable without me. I also made sure to properly document the design intent and use cases it should cover.
Reusable patterns
I am having weekly design reviews with the Web Engineering team to ensure that we are properly reusing the patterns we have built out, and to check if there’s a use case for any new patterns we may need to better service our Marketing teams.
