Lead Web Designer
Design Systems

Consistently Design System

Rebuilding an impactful design system that serves 600+ employees who showcase their content on the Fastly website.
Project Status
Ongoing
Client
Fastly
Ship Date
November 2023
Screenshot of different design system elements overlayed on one another

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:

  1. 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.
  2. We simplified our page templating methods—publishing 20 product pages with one template so far, with the ability to scale for more.
  3. 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.

Component library screenshot of Fastly's form field component
Components handled use case variants with more flexibility and consistency.

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.

A screenshot of Figma's variables feature with Fastly specific information
Variables were used to help components respond better to screen resolution contexts.

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.

Screenshot of design annotations next to a component
Design annotations with notes, videos, and recordings were provided to clarify any design and motion intent.

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.

Next case study

Lead Web Designer
Desktop + Mobile Web Design

Modular CMS Framework

Democratizing the website production process for Fastly’s cross-functional content owners.
Read this case study