The company’s 2023 strategy was to build a platform for its suite of products. I was tasked by the executives to design the new platform and to ensure all current and future products would have a similar look and feel.

<aside> 🙌 Results

• New brand ready to be applied to all products, on time. </aside>

The WIP version of the design system is available here: https://hopper.workleap.design/

The company had two “hero” products, each with their own mature design system, as well as a newly acquired company that was using an entirely different front-end library.

The solution was to create a core design system with colors, icons, atoms and molecules, and let products maintain their unique components. The scope excluded the marketing website.

I wrote, shared and refined the plan with the design and engineers. The steps were the following:

1. Audit all existing design systems
2. Create an ecosystem of design systems
3. Define a new product look and feel based on the new brand
4. Adapt and design core components and semantic tokens

In terms of timeline, everything went according to plan and the design system was delivered in 5 months, without impacting the product designers’ squad work. This allowed plenty of time for the devs to package the tokens in time for the 2024 rebrand.

Oups, I had not planned for summer vacation!

Design System Architecture

Each product/vertical has their own design system, to ensure Hopper is not a bottleneck to development. Those design systems reference the Hopper styles in order to create a “one-way street” where updates come from Hopper, not the other way around.

The product squads are also encouraged to use local libraries to speed up the creative process.

Tokens

Core tokens store the raw values that build the foundation of the design system. This tier is mostly responsible for the final look of Workleap by defining all the values that can be used. For a colour it might be the hexadecimal value, for a border radius a number value, etc.