Designing the Private label onboarding system

End-to-end system design

Context

Digital insurance broker VIU by HUB’s Private Label Experience embeds the insurance quoting flow into partner brands - Honda, Mazda, and Valon, and others. Each launch was handcrafted, which worked for the first few clients and broke as we scaled.

Problem

Each sales pitch required about a week of speculative design work; Brand-to-token mapping lacked an established method; The unclear rules around scope also caused redundant work on both sides. How do we turn this into a reusable system?

Outcome

I built an end-to-end onboarding system: a componentized design library, a brand-to-token mapping framework, and scope and handoff guidelines used across design, sales, and engineering.
Cutting the launch timelines from months to weeks and driving +$5.3M in annual revenue.

 

*Honda was picked as the work example to run through the case study.

Role

Lead designer

Timeline

3 months

Team

Business, Solutions, Marketing and Tech teams

My Approach

1. Asset and requirement governance

The Excel Workbook

A comprehensive intake form that requires clients to audit and provide brand assets — Logo, favicon, typography, semantic colors, iconography, etc., against our specific technical requirements.

The Customization Guideline PDF

A visual guidance that serves as a comprehensive reference for the client's team.

The Excel Workbook - built for non-technical tasks

  • There is a size and format requirement for Logo and Favicon, and the user needs to provide the PNG/SVG to the design team

  • We ask clients for the font family, font weight, spacing, and line height in the Excel sheet. Each field has a detailed guide and example, customer needs to replace these fields with their own brand value.

  • The image and illustrations appear on the screens, including the address entry, error message, and each screen has its own set of requirements. The user should review the guidance PDF provided by the team and provide the assets in the correct format and dimensions

  • The submission checklist provides a list of final deliverables that user needs to send to the team. For all graphic assets, they will have to combine them into a zip compressed folder.

The visual guidance serves as a comprehensive reference for the client's team. Its purpose is to assist them in preparing the specific information and files required for the Excel workbook.

It includes visual examples and technical specifications for every customization area, such as image dimensions, file formats, and the exact placement of each element within the quoting experience.

The Customization Guideline - Filling a gap for designers

 

2. Semantic token architecture and implementation

I translated the governed client assets into a deterministic design system. By using a multi-layered token architecture, designers can ensure that the transition from "raw data" to "branded UI" is automated, scalable, and error-free..

Start by establishing the Client Property Library to systematically store all private label assets, including logos, favicons, images, illustrations, and icons. Our client, AHIS (American Honda Insurance Solutions), requested a custom icon style to match their brand’s aesthetic and color palette.

 

3. Applying tokens and variables in Figma

To translate client assets into the white-label environment, I transformed hex codes and typography into semantic design tokens. These tokens were then mapped to specific brand variables, allowing for an automated and consistent theme application across the entire product.

 

Color tokens created inside the Global Design System in Figam.

Text tokens created inside the Global Design System in Figam.

 

After publishing the tokens to the design system, they become available in the private label template. By simply switching the token variables in the template, all logo, color, text, and illustration assets will update automatically within the mockup.

 
 

4. The Validation and QA loop

Once tokens are applied, a final review checks the design against industry standards, including WCAG AA accessibility, and designers use the gate to document constraints before handoff. A second QA pass runs in the dev environment to verify cross-browser fidelity. Since the system shipped, review feedback has dropped to near zero.

Before After
Before After
 
 
 

Honda private label live site demo

 
 

Impact & Strategic Outcomes on the Private Label Project

The architecture of the onboarding and variable switching system has noticeably increased efficiency. The whole development of this scalable, client-focused, end-to-end solution that benefits both the VIU design team and clients — delivering a seamless private label experience.

This process reduced the customization lifecycle from months to weeks, scaled client-onboarding capacity by 2–3x without adding headcount, and eliminated costly rework — accelerating delivery and driving revenue growth.

Finally, the Design QA conducted on the dev environment has delivered an incident-free experience for every client. 💖

 

Thanks for reading!