Unified Design Language

Consolidating EVERFI's platform and product design systems with a shared design language

Context

In late 2021, it became clear that EVERFI's products lacked a cohesive identity and experience; they looked like (and were) built by different teams.

The journey from website → platform → product ping-ponged users from one interface to another, undermining the experience for admins, teachers, and learners. So we set out to define a singular point of view re: how an Everfi product should look, feel, and behave, and to codify it in a new shared design language.

We kicked it off with our own definition:

A design language consists of an agreed-upon visual and interaction design foundation upheld in both code and design workflows to foster consistency, intentionality, and predictability within and across products.

All the different ways we display course content across products and platforms

Different products rely on different tech stacks, each influencing their respective design direction at inception and ultimately dictating the degree to which they could share with one another.

The question "What does an EVERFI button look like?" has a different answer depending on which product you look at. Multiply this kind of variation across a full library of styles and components per product — fields, cards, headers, footers, surveys, data viz — and layer in intentional theming of courses and platform tailored to content, network, and/or customer branding, and of course we end up with a disjointed experience.

Foundry, the assigned learning platform, is powered by its own React design system, Alloy, which takes cues from Material Design

Homeroom, the K12 platform, uses fully-custom styles that override its underlying legacy Bootstrap components. Its teacher-facing UI was redesigned in 2019, but other parts of the app remain untouched.

EVERFI courses use Furnace, our product design system and SDK, to create custom themes that vary greatly depending on customer, audience, and learning style. The underlying base theme, Core, is a polished (and generic) theme that incorporates some aspects of EVERFI's branding.

How

We began with our North Star not as a design system but a common design language that could guide our products closer together. The idea of sharing styles and components org-wide was unthinkable given the radically different natures of the respective codebases.

Spoiler alert: it became thinkable. Keep reading.

Instead, we set out to establish core design principles that we could weave throughout experiences wherever technically feasible. But, first, we needed to get the lay of the land.

Audit

To assess the existing design languages in use across products, I devised a set of benchmarks we could use to gauge the "system health" of our platforms, comparing their architecture to the more mature system in Furnace.

We then set off on an old-fashioned visual audit cataloguing each step in a potential admin, teacher, or learner journey.

A snippet of our UI audit & the system health report

The Great Everfi Component-Off

The next step was to establish an opinion — to coalesce around a general visual style that reflected our brands, best practices, and, to an extent, our taste as a group of designers.

That spurred the first — and hopefully last — Great EVERFI Component-Off™. We pitted competing components from platforms and products against one another, holding working sessions to dissect their behavior, style, and utility. For each moment of consensus, we laid another brick in our growing foundations.

There can be only one ~~Highlander~~ popover

Proof of Concept

When we'd reached a critical mass of solid decisions, I created a rough set of components to stress-test in various use cases across the organization. The goal was to further refine our approach and develop a proof of concept that we could pitch to leadership.

One sign-in screen to rule them all

Aligning admin and K12 platform login flows

Evaluations in platform and course contexts

Foundations

The proof of concept helped to crystallize our new foundations. Key decisions included:

Aligning on the use of Lato, our brand typeface, across products
Replacing mixed and inconsistent iconography with a single icon library
Shifting from bespoke color palettes per theme to a curated collection of accessible palettes extrapolated from our brand colors
Introducing a layer of density theming, reflected in typography and spacing, to support varied tasks and content types across products and platforms

Implementation

Moving to React

We were given the green light to implement the new design language — and to rebuild Furnace in React, so that it could be integrated with Alloy into a new design system monorepo powering all of Everfi's front end. A tall task but a huge win.

Design ➡️ Code

We continued iterating on our foundations, arriving at a family of comprehensive design tokens that supported all our needs.

Figma token documentation

Some of our base (global) tokens

Semantic color tokens

To ensure that tokens served as a single source of truth, I migrated our Figma styles to use Tokens Studio to enable syncing with GitHub. Once imported, tokens were converted from JSON to TypeScript via Amazon Style Dictionary for consumption by the new React components.

For products that weren't quite ready for React migration (like Homeroom, the K12 platform), we also generated SCSS variables so that we could refresh their styles to match their updated siblings.

Base color palette tokens in Storybook

Semantic color tokens in Storybook

With the help of the EightShapes Specs Figma plugin from Nathan Curtis, I was able to create detailed component specs that included corresponding token and variable data.

Buttons in Figma

Buttons in Storybook