Increasing Autonomy and Reducing Interference: How We Created a Whitelabel Design System Serving 3 Different Business Units
My Role
Design Lead
Industry
Home Services
Health
Finance
Main Skills
Design Systems, UX Strategy, Design Ops, Process Optimisation, Cross-functional Collaboration, Component Libraries, SaaS Platform Design, Product Efficiency, Stakeholder Alignment, Scalable Design Practices
The Basics
Getting to know the company
Escale Digital is a B2B2C company responsible for acquiring and converting leads into sales across three different business units: Health, Home Services, and Finance. Within these verticals, the company runs a range of products to ensure an omnichannel and phygital conversion journey.
At the time this project began, the company’s main focus was acquisition, later shifting towards optimising all funnel products. To ensure the acquisition strategy worked, the Growth team had to coordinate more than 10 campaigns per week per vertical, with different landing pages and attraction models.
The Initial Challenge
Many requests and a heavy Roadmap
When we decided to start a project to design our Design System, our Design team was overwhelmed with requests from their own Squad as well as those coming from the Growth team connected to that Squad.
Our company had three business units and, at minimum, three products and squads per unit (some had more). In such a large structure, it was clear that our product lacked consistency, and even more evident that our team was overworked, having to produce more than 5 landing pages per week for Growth.
The Beginning
Hacking the system
As Design Lead responsible for the Design Ops team, I started by trying to gain enough executive support to form a team that, even part-time, could meet Growth’s needs and create an autonomous Design System that would increase team productivity and the efficiency and consistency of our conversion journey.
However, full support did not come due to the number of ongoing projects and the belief that other priorities were more important. So, with the backing of a Group Product Manager and a Tech Lead, we decided to begin with an experiment: creating a functional MVP to prove the value and necessity of a Design System to the company.
The Prototype
Starting on the right foot
To convince the company and the executives that this was an important initiative at the time, we needed to map out and define our first area of action, and when we would present our solution.
We mapped all company touchpoints and “formalised” our product into a single vision to clarify our first value deliveries. Once this vision was finalised for the team, we had a deliverable that materialised how our tool worked.
With this ecosystem view, we could understand how to build our solution in a way that won over the maximum number of people and allies for this new phase.
First Delivery
CMS Components for Growth
We decided to start by solving one of the biggest pain points for Product, Design and Engineering: the continuous creation of Landing Pages that dominated our Roadmaps.
To do this, we used a CMS that already had budget approval within the company (but was not being used properly) and built ready-to-use components so that Growth only needed to change content.
The first step was identifying which components were most common for Growth at the time: form, product card, header, etc. From this, we created a vision of what we would deliver.
From there, I officially created whitelabel components, designed to serve all client brands without requiring intervention from Design or Development—thus giving rise to the whitelabel components.
At the end of this process, we had whitelabel components in the CMS, allowing Growth to create a landing page in just 5 minutes by selecting a component, customising colour, text and image.
First Approval
Design System in Beta
At this stage, our deliverable could not yet be considered a full Design System, but it was our most sustainable way to gain first approval and executive sponsorship.
We gathered marketing directors from all Growth areas and a C-Level representative, with the aim of evolving the project into a Beta. We presented the CMS solution and how it would accelerate and optimise Growth’s work, thereby increasing the number of potential leads acquired.
The success was so strong that we proved our point for creating a Design System and secured approval for a three-month Beta phase.
Research
Mapping Journeys
To begin building the Design System, I mapped the existing journeys in the three business units, based on interviews and previously created design materials stored in the public knowledge library.
From this, I created an intersection of journeys that, regardless of the business unit, were similar and shared the same product strategy.
Research
Mapping Components
With a clear view of the intersections within our journeys, I began mapping which components were used, providing a clear vision of the Design System’s Roadmap. I started by listing the main components across the journeys.
Delivery
Visual Design System
The first results involved only the Design team and the componentisation of all visual elements within the main user journey, which was also the intersection across all business units.
The main goal of this first official Design System deliverable was to prove how much we could optimise our work, showcase the first CMS results with Marketing, and gain further support to evolve into a full Design System.
Official Presentation
Company buy-in and formalising the team
To evolve the Design System, we needed wider buy-in and a dedicated squad to develop it as a living organism.
We presented the initial material and CMS results for Growth during one of the company’s monthly “Town Hall” meetings, where the most important projects were showcased to all employees. This was how we secured approval for a small official team to begin working on the Design System part-time.
Design System
Design System as a Product
After this process, our Design System was born as an internal product, with the goal of optimising acquisition and lead conversion processes while reducing scope and workload across teams.
Named Delta, it became a product involving Product Managers, Designers, and Developers in a single squad, organised under two main pillars: visual and code.
Visual organisation: components could be reused in Figma, facilitating new layout and product creation.
Code organisation: developers reduced workload by using predefined parameters and existing assets.
Product organisation: the Design System was documented with use cases, application guidelines, and explanations of components—becoming a living, easy-to-use library for Development.
Results
100% of Landing Pages developed via CMS
From the start of the Design System project, after the first delivery, 100% of landing page creation required for Growth strategies was carried out entirely via the new CMS—without involvement from Design or Technology.
Results
34% increase in Squad efficiency
By tracking ticket scoring and completion times for Delivery (Development and Design), we saw a 34% optimisation in Squad efficiency.
Results
57% reduction in launch time
All Squads tracked a common metric called Time to say Hello World (TTSHW), monitored by leadership and Ops. Following the Design System’s officialisation and optimisation as a product, Squads achieved a 57% reduction in TTSHW.
Next Project
Profit Increase and Cost Reduction: Creating an Internal Lead Qualification and Conversion Platform for Health Insurance
How I created a lead qualification and conversion platform for health insurance that resulted in a 25% reduction in CAC and a 15% increase in the sales efficiency of the vertical.
Let's work together?
Let’s build, learn, and create something meaningful together