Fixing the Design System at Educative

Case Study

Role

Product Design

Team

1x Software Developer

3x Designers

Duration

1 month

Intro

As I scaled our team at Educative. The design system was losing adoption due to poorly designed components. I led the month-long effort to fix over 30 components for internal use in Figma.

Planning

I took charge of high-priority components and sought help from other team members in designing a the rest.

Structuring Components

The components were redesigned from scratch. The goal was to keep them scalable and easy to update.

An example of a button component can be seen below, where a core component is wrapped inside a button. With just one click, every button variant is updated

Molecules and Layered Components

Some molecules were complex and were made up of one or more atoms or molecules. For example, the Dropdown and Action components were based on our List component to make them consistent and easily scalable. Every time the List component is changed, the changes would be reflected in derived components.

Future Work

The natural next step for these components was to add Design Tokens. The design system work was taken over by another designer as I shifted to more high-priority projects, however, I have continued to collaborate with the reviews and decisions as more work is being done on it.