Hopper Design System

Before GSoft rebranded as Workleap, it had six products, each with its own identity, design system, and technical stack. The result was fragmentation: every team shipped features differently, and the platform looked more like a collection of unrelated tools than a unified suite.

As Workleap grew, this inconsistency became harder to ignore. The rebrand to Workleap made a unified design language urgent. At the same time, AI features were starting to surface across products. Designers and developers were experimenting in isolation, which led to different patterns for the same interactions and UI choices that felt out of place. Without a design system that could scale across seven products and adapt to emerging AI use cases, the platform risked drifting further apart.

I approached the challenge as both a design and organizational problem. The first step was a round of visual explorations to define the Workleap look and feel. From there, I designed a token architecture and sub-system model that balanced shared consistency with product-level flexibility. A full rebuild would have taken too long, so I decided to retrofit an existing product’s design system as a transitional solution. This gave teams an early entry point into the new visual language while the full system was built in parallel, making the eventual migration smoother.

Collaboration and governance were just as important as craft. I set up design system office hours, recorded weekly video updates for stakeholders, and introduced a contribution process where designers could propose new components when needed. On the development side, we integrated CodeConnect to keep design and code in sync and created a roadmap that gave everyone—from product designers to stakeholders—clear visibility into priorities and progress. Alongside this, I ran interviews with designers to understand their workflows in Figma and structured the system so components were not only robust but also easy to find, document, and use.

The result was the Workleap Design System, known internally as Hopper. It unified seven products under one scalable design language while allowing space for brand-specific needs such as ShareGate. The system was built on a predictable token architecture that could support theming at scale, including dark mode and high-contrast accessibility themes. Its sub-system model layered shared primitives with product-specific components, striking the balance between consistency and flexibility.

A defining aspect of Hopper was its readiness for AI. As teams across Workleap experimented with new AI-powered features, the design system gave us a way to standardize interactions that had previously been approached inconsistently. Instead of each product inventing its own version of prompts, responses, or feedback states, we created reusable patterns for AI interactions that felt native across the platform. This gave the company a common language for designing with AI and made it easier for teams to ship responsibly without reinventing the wheel.

Hopper changed the way Workleap built products. Adoption rose from 25% to 60% in the first wave and continues to grow as new components are released. Designers and developers gained a shared vocabulary, reducing duplication and accelerating delivery. The painful rebrand from Officevibe to Workleap, which had highlighted how fragmented the ecosystem was, became a turning point: the next brand refresh will take a fraction of the time thanks to Hopper’s foundation. Just as importantly, the system elevated the perception of design systems within the company. It was no longer seen as a set of tools, but as a product in its own right, with its own roadmap, contribution cycles, and research.

Building Hopper taught me that flexibility and consistency are not opposites but a spectrum to be managed carefully. Too much rigidity and teams won’t adopt it; too much freedom and the system loses coherence. I also learned that governance and communication are just as critical as component design. Office hours, contribution processes, and transparent updates built trust across the organization. Most of all, I saw how design systems can prepare organizations not just for today’s needs, but for the next wave of challenges. In this case, it meant equipping Workleap to adopt AI responsibly and consistently across its suite of products.

For me, this project was about more than building a design system. It was about shaping a foundation that could evolve with the company—through rebrands, through new products, and into the era of AI.