Surfe - My Framer Site

Back

Surfe

Design System

Scaled the Browser Extension experience for Surfe, a B2B SaaS product that helps sales teams seamlessly connect their CRM with LinkedIn. As the product scaled, I shaped the evolution of the Browser App and extented the Design System.

Problem

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.

The legacy Leadjet interface before its evolution and rebrand into Surfe

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.

Translating the new brand identity into scalable visual foundations for the Wave Design System

Core components and design tokens within the Wave Design System, detailing scalable color palettes alongside exhaustive button and tag variants

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.

A comprehensive icon library categorised by use case, alongside scalable component variants

A set of AI-generated user avatars, created to differentiate our mockups and maintain a distinct, cohesive visual identity across the product

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.

Standardised modal components featuring brand's colours, designed to create a clear visual distinction between the Extension and the native LinkedIn interface

An overview of the Wave Design System architecture

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.