Wave Design System,
Wave Design System,
Surfe
Surfe
SERIES A, 5M RAISED
SALES TECH, CRM AUTOMATION
Overview
Moving from Leadjet to Surfe was not just a name change; it was a complete visual and structural reinvention required to elevate the product from a simple utility to an enterprise-grade sales tool. This was a high-stakes, high-speed project where we had to change the car’s engine whilst it was doing 100mph. I collaborated closely with a fellow designer during an intensive sprint to establish the new premium, reliable visual identity. Following that initial rebranding phase, I took full ownership of architecting and managing the Wave Design System — translating our new identity into a scalable, cross-platform UI infrastructure capable of supporting deep CRM integrations.
Research
Before scaling the new brand into a comprehensive system, I treated the UI architecture as a structural product challenge.
I initiated a thorough audit of the legacy Leadjet interface, mapping out existing interaction patterns, component states, and technical inconsistencies. Instead of merely applying the new visual style, I collaborated deeply with engineers to understand their workflow and identify where technical debt was accumulating. This process revealed that engineers were rebuilding similar components from scratch, meaning the new design system needed to actively solve operational bottlenecks alongside updating the aesthetics.
Challenges
The technical constraints of applying this new system were highly complex because it had to be deployed rapidly across two drastically different environments. The components needed to be lightweight and adaptable enough to be injected directly into LinkedIn’s interface via the Browser App, without conflicting with LinkedIn's native code or bloating the DOM. Simultaneously, the exact same system had to support the data-heavy, full-screen architecture of our new stand-alone Web App. Balancing this required establishing a highly flexible token system and ensuring that every component was rigorously stress-tested for varied spatial constraints and performance requirements.
Key Solutions
To bridge these two environments, I built the Wave Design System around a modular, token-based architecture.
I established a foundational library of highly reusable, accessible components. Beyond simply creating the UI kit, I focussed heavily on ongoing governance and documentation, establishing clear guidelines for how components should behave in different contexts. Managing this shared language empowered the wider product team to seamlessly plug complex new workflows directly into the architecture, ensuring that anyone contributing to the product was building with the exact same standard of quality.
Sneak peek to the Storybook.
Impact
The implementation and ongoing management of Wave fundamentally changed how the product team operated. By eliminating the need to design and code from scratch, we drastically reduced our UI-related technical debt and accelerated our feature delivery cycles. The shared component library proved its value immediately, enabling other designers to rapidly prototype and launch sophisticated tools without fragmenting the user journey. Ultimately, this system successfully unified Surfe’s cross-platform experience, providing a robust foundation that actively supported the company's aggressive market expansion.
Wave Design System,
Wave Design System,
Surfe
Surfe
SERIES A, 5M RAISED
SALES TECH, CRM AUTOMATION
Overview
Moving from Leadjet to Surfe was not just a name change; it was a complete visual and structural reinvention required to elevate the product from a simple utility to an enterprise-grade sales tool. This was a high-stakes, high-speed project where we had to change the car’s engine whilst it was doing 100mph. I collaborated closely with a fellow designer during an intensive sprint to establish the new premium, reliable visual identity. Following that initial rebranding phase, I took full ownership of architecting and managing the Wave Design System — translating our new identity into a scalable, cross-platform UI infrastructure capable of supporting deep CRM integrations.
Research
Before scaling the new brand into a comprehensive system, I treated the UI architecture as a structural product challenge.
I initiated a thorough audit of the legacy Leadjet interface, mapping out existing interaction patterns, component states, and technical inconsistencies. Instead of merely applying the new visual style, I collaborated deeply with engineers to understand their workflow and identify where technical debt was accumulating. This process revealed that engineers were rebuilding similar components from scratch, meaning the new design system needed to actively solve operational bottlenecks alongside updating the aesthetics.
Challenges
The technical constraints of applying this new system were highly complex because it had to be deployed rapidly across two drastically different environments. The components needed to be lightweight and adaptable enough to be injected directly into LinkedIn’s interface via the Browser App, without conflicting with LinkedIn's native code or bloating the DOM. Simultaneously, the exact same system had to support the data-heavy, full-screen architecture of our new stand-alone Web App. Balancing this required establishing a highly flexible token system and ensuring that every component was rigorously stress-tested for varied spatial constraints and performance requirements.
Key Solutions
To bridge these two environments, I built the Wave Design System around a modular, token-based architecture.
I established a foundational library of highly reusable, accessible components. Beyond simply creating the UI kit, I focussed heavily on ongoing governance and documentation, establishing clear guidelines for how components should behave in different contexts. Managing this shared language empowered the wider product team to seamlessly plug complex new workflows directly into the architecture, ensuring that anyone contributing to the product was building with the exact same standard of quality.
Sneak peek to the Storybook.
Impact
The implementation and ongoing management of Wave fundamentally changed how the product team operated. By eliminating the need to design and code from scratch, we drastically reduced our UI-related technical debt and accelerated our feature delivery cycles. The shared component library proved its value immediately, enabling other designers to rapidly prototype and launch sophisticated tools without fragmenting the user journey. Ultimately, this system successfully unified Surfe’s cross-platform experience, providing a robust foundation that actively supported the company's aggressive market expansion.