Surfe
Web App
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
Surfe had successfully proven its core value as a powerful CRM synchronisation tool, but the product needed to evolve from a lightweight browser extension into a comprehensive revenue workspace. As Lead Product Designer, my role was to guide this transition by scaling the platform’s capabilities while maintaining the seamless, low-friction experience that sales teams originally loved. I owned the end-to-end product design strategy across both the browser extension and the new stand-alone web application, ensuring they functioned together as a cohesive, enterprise-ready ecosystem.
Surfe had successfully proven its core value as a powerful CRM synchronisation tool, but the product needed to evolve from a lightweight browser extension into a comprehensive revenue workspace. As Lead Product Designer, my role was to guide this transition by scaling the platform’s capabilities while maintaining the seamless, low-friction experience that sales teams originally loved. I owned the end-to-end product design strategy across both the browser extension and the new stand-alone web application, ensuring they functioned together as a cohesive, enterprise-ready ecosystem.
Legacy design with limited options
Research
To ensure our expansion didn’t disrupt the core user workflow, I initiated deep discovery sessions focussing on how revenue teams context-switch between LinkedIn, their CRM, and their inbox. Instead of simply collecting feature requests, I mapped the entire sales lifecycle to identify exactly where users were losing time to manual data entry and cognitive load. This process revealed a critical insight: our users didn't want another heavy destination platform to manage; they needed our stand-alone web app to feel like a natural, almost invisible extension of the tools they already lived in every day, effortlessly accommodating their existing behaviours.
To ensure our expansion didn’t disrupt the core user workflow, I initiated deep discovery sessions focussing on how revenue teams context-switch between LinkedIn, their CRM, and their inbox. Instead of simply collecting feature requests, I mapped the entire sales lifecycle to identify exactly where users were losing time to manual data entry and cognitive load. This process revealed a critical insight: our users didn't want another heavy destination platform to manage; they needed our stand-alone web app to feel like a natural, almost invisible extension of the tools they already lived in every day, effortlessly accommodating their existing behaviours.
A dedicated dashboard enables sales reps to seamlessly view, add, and manage their lead entries
Behind the scenes / Workshop
Challenges
The structural constraints of this project were uniquely demanding because we were designing for two drastically different environments simultaneously. On one side, the browser extension had to inject complex CRM functionalities directly into LinkedIn’s interface without cluttering the user's view. On the other side, the new stand-alone web application needed to handle massive datasets and advanced team configurations. We also had to ensure the foundational architecture could support heavy, data-dense features being developed in parallel by the wider product team—such as a new prospecting engine that required managing API rate limits, complex filtering, and bulk data operations. Bridging these distinct form factors whilst maintaining a unified, seamless user experience required rigorous architectural planning and close alignment with engineering.
The structural constraints of this project were uniquely demanding because we were designing for two drastically different environments simultaneously. On one side, the browser extension had to inject complex CRM functionalities directly into LinkedIn’s interface without cluttering the user's view. On the other side, the new stand-alone web application needed to handle massive datasets and advanced team configurations. We also had to ensure the foundational architecture could support heavy, data-dense features being developed in parallel by the wider product team—such as a new prospecting engine that required managing API rate limits, complex filtering, and bulk data operations. Bridging these distinct form factors whilst maintaining a unified, seamless user experience required rigorous architectural planning and close alignment with engineering.
Meanwhile, sales reps can also leverage AI-curated prospect lists, instantly surfacing highly qualified leads primed for outreach
Making it easier to enrich a prospect list: a more powerful enrichment component featuring improved relevance sorting, faster enrichment times, bulk-add capabilities, and an efficient workflow to pull in leads
Key Solutions
Rather than treating the web platform and the extension as separate tools, I designed them as a highly synchronised ecosystem. For the extension, I introduced contextual, non-intrusive UI patterns that surfaced CRM data at the exact moment a sales representative needed it. For the web application, I architected a high-performance workspace optimised for data density. By establishing a scalable design system, I created a shared language of standard components — such as compact data tables and flexible-width columns. This foundation empowered other designers on the team to seamlessly plug high-friction workflows, like the Ideal Customer Profile Finder, directly into the overarching platform architecture, allowing them to release quickly without fragmenting the user journey.
Rather than treating the web platform and the extension as separate tools, I designed them as a highly synchronised ecosystem. For the extension, I introduced contextual, non-intrusive UI patterns that surfaced CRM data at the exact moment a sales representative needed it. For the web application, I architected a high-performance workspace optimised for data density. By establishing a scalable design system, I created a shared language of standard components — such as compact data tables and flexible-width columns. This foundation empowered other designers on the team to seamlessly plug high-friction workflows, like the Ideal Customer Profile Finder, directly into the overarching platform architecture, allowing them to release quickly without fragmenting the user journey.
List details can be pinned for quick access across all key user flows
In-App video guidance to ensure the app is intuitive
Impact
My role was to set the trajectory. This platform-wide evolution successfully transitioned Surfe from a single-purpose utility into a mature, sticky revenue workspace. By providing a robust and scalable foundation, the product team was able to launch new premium features that actively enhanced our highest pricing plan and drove upsell opportunities. The unified ecosystem not only accelerated our feature delivery but also proved its value in user engagement, with newly integrated tools seeing incredible metrics — such as 92% same-week return rates and an 11% referral rate. Ultimately, it positioned Surfe to handle enterprise-grade complexity, aligning perfectly with the company's broader growth strategy.
My role was to set the trajectory. This platform-wide evolution successfully transitioned Surfe from a single-purpose utility into a mature, sticky revenue workspace. By providing a robust and scalable foundation, the product team was able to launch new premium features that actively enhanced our highest pricing plan and drove upsell opportunities. The unified ecosystem not only accelerated our feature delivery but also proved its value in user engagement, with newly integrated tools seeing incredible metrics — such as 92% same-week return rates and an 11% referral rate. Ultimately, it positioned Surfe to handle enterprise-grade complexity, aligning perfectly with the company's broader growth strategy.