Unified Design Language

Background

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.

The question "What does an Everfi button look like?" has a different answer depending on which of its products you're using.

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.

Multiply this kind of variation across multiple style guides and component sets, sprinkle in course theming, platform branding, and customer whitelabeling, and it was inevtiable that we'd find ourselves with disjointed experiences.

Some of the many ways courses are displayed across products

Discovery

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.

A snippet of our UI audit & the system health report

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.

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.

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

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.

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

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.