Everfi Forge

Forge is the primary tool used by Everfi's implementation team, who translate course designs into interactive e-learning products.

It's a Git-connected Electron app that provides an interface for course creation using the Everfi SDK and component library (aka Furnace).

Forge, however, started out as a JSON content editing tool with a minimal interface. But the launch of Furnace in early 2020 hastened adoption by the product team, and requests for more powerful WYSIWYG-like features quickly outpaced design and engineering capacity.

This pace of iteration left the app without polish and well-considered UX, and its rough edges began to show. It needed a refresh with strong foundations, taking cues from our other design system initiatives.

Color

In lieu of shadows, increasing lightness can visually communicate a surface as elevated. This is especially important in Forge, given the hierarchical parent-child nature of its editor views.

Just one problem: Forge's styles included only five neutrals whose lightness topped out too quickly, making text virtually illegible after a few child views.

Additional variables that fell outside the color scale were also added over the years, leading to oddities like $interactive-955.

The new color scale includes values ranging from 100 to 900, plus white and black. Each value falls within a similar lightness range as its siblings, so we can apply colors from different palettes in a more predictable and accessible manner.

Applied to typography and surfaces, the new color palettes fully resolved any contrast concerns:

The expanded color system also allowed more nuanced styling: consistent states, additional variants, and a more distinct difference between color modes.

Density

New type scale, with variable names shifted from HTML references to semantics

Dense spacing and type applied to input fields

A crucial aspect of Forge's utility derives from having its edit views auto-generated by page and component schema. But organization that makes sense in code doesn't always make sense in a UI.

Edit forms unrelated to content now overtakes the preview. There, you're editing the course itself — not the page you're looking at — free real estate that reinforces the idea of editing a higher-level view.

This also benefitted performance and usability, since the old edit UI always opened another panel adjacent to the navigation, causing the live preview to resize and force a refresh, losing context.

Page actions move from a hidden context menu on list items to a dedicated dropdown on the parent view. No longer split between nav levels, all editing moves to the same pane.