Background

In the summer of 2019, Reforge expanded its team from 6 to 10 members. As the demand for premier courses grew, the need to scale the team and course offerings became evident. The existing content library, consisting of Keynote files in a Dropbox folder, was no longer sufficient for the desired scalability.

Identifying Key Needs

To effectively scale the visual creation process, I embarked on a refinement process to identify key requirements for the new system. Countless notion documents and iterations led to a list of needs, including a tool for building images, collaboration capabilities between design and strategy, easy access to design assets from a library, the ability to edit visuals for associated courses, data visualization options, slide presentation features, and recording functionality.

Choosing the Right Tool: Figma

After evaluating numerous tools, Figma emerged as the optimal choice. Although not specifically designed for Reforge's use case, Figma's library, design tools, collaboration features, and user-friendly interface made it the winner. The decision proved to be highly satisfactory.

Figma might seem like the obvious choice today, but in 2019 it was still in its infancy and many other options were fighting to be the market leader.

Building the Design System

With Figma selected, the process of constructing the design system commenced. Two key realizations shaped the system's development:

1. Building a Product: The design system would have users, necessitating regular feedback and iterative improvements.

2. Tailored for Slide Presentations: Unlike traditional product design systems, the focus was on visuals presented as slides, requiring a different set of components and considerations.

The design system followed an atomic design system approach and comprised three levels of fidelity: Elements, Components, and Templates.

• Elements: Foundational design pieces encompassing fonts, colors, icons, styles, logos, and photography style.

• Components: Reusable patterns combining elements to create components such as diagrams, cards, callouts, tables, flowchart pieces, and screenshot containers. Components could be used independently or within pre-set templates.

• Templates: Full slide layouts utilized to build out course visuals, including blank layouts, core concepts, and occasional example layouts.

Additionally, the design system was aligned with the ongoing development of a consistent visual brand identity, collaborating closely with the Head of Design to select fonts, colors, and icons that conveyed the desired user experience.