GSG

Case Studies

Role

Lead Product / Systems Designer

Contribution

Visual direction, UX, content & product strategy, design system, user research and testing

Tooling

Figma

Duration

12 Months

Overview

The Global Savings Group (GSG) manages a vast network of 85 white-label platforms. These platforms are customised to reflect the branding of different partner companies while delivering consistent user experiences across markets. A critical challenge was to create a scalable, reusable design system that could meet the diverse requirements of all stakeholders, improve efficiency, and maintain high usability standards. This case study outlines the UX process, including design research, user testing, design tokens, and scalability considerations.

Challenge

Complexity:Accommodating unique branding needs for 85 white-label platforms without fragmenting the design system.
Scalability: Building components that could grow with additional features or platforms.
Consistency vs. Customisation: Balancing uniformity for efficiency with the flexibility for brand-specific adaptations.
Efficiency: Accelerating time-to-market and reducing developer workload.

Process

Research and Discovery

Stakeholder Workshops: Conducted workshops with internal teams (product managers, developers) and external partners to understand branding needs and platform goals.

User Research: Collected qualitative and quantitative data from end-users of various platforms through surveys, interviews, and heatmap analysis.

Competitor Benchmarking: Analysed competitors with multiple white-label offerings to identify best practices and gaps.

Key Insights:

Users demanded consistent navigation and features across platforms.
Partners prioritised branding flexibility without compromising performance.
Developers needed a component library that was lightweight and adaptable.

Defining Goals

Unified Design Language: Establish a shared vocabulary of styles, components, and interactions.

Scalable Architecture: Ensure components could be adapted to new use cases with minimal overhead.

Performance Optimisation: Create lightweight components optimised for various devices and connection speeds.

Design System Development

Design Tokens: Introduced design tokens to centralise styles such as colour, typography, and spacing. Tokens allowed for quick branding updates by swapping values while maintaining structural integrity.

Modular Components: Built a library of modular, responsive UI components using tools like Figma and Storybook. Components supported multiple configurations (e.g., card layouts, grids) for partner-specific requirements.

Brand Kits: Created pre-defined brand kits for partners, mapping brand assets (colors, logos, fonts) to the design system.

User Testing

A/B Testing: Tested variations of key components like buttons, banners, and search bars to measure engagement.

Prototype Testing: Conducted usability tests with prototypes on 10+ platforms to validate adaptability and performance.

Feedback Loops: Implemented an iterative testing cycle, incorporating feedback from both users and partners.

User Testing

Collaboration with Developers: Used a shared Git repository for design tokens, ensuring seamless integration with front-end frameworks (e.g., React, Angular).

Global Overrides: Built override mechanisms for platform-specific branding while preserving system-wide consistency.

Documentation and Training: Created comprehensive guidelines for using the design system and trained partners and internal teams.

Results

0 %

Reduced design and development time through reusable components and tokens.

0 %

Accelerated platform launches by, enabling GSG to onboard new partners faster.

0 +

Successfully scaled the system to platforms, with the ability to support additional partners seamlessly.

0 %

Improved user satisfaction metrics by due to a more consistent experience across platforms.

0 %

Delivered a flexible framework that met of partners’ branding requirements without custom development.

Key Takeaways

Design Tokens are Game-Changers: Centralising styles allows easy scalability and customisation for white-label platforms.
Research is Non-Negotiable: Partner and user insights were crucial in striking the right balance between consistency and customisation.
Collaboration is Key: Close alignment between designers, developers, and stakeholders ensures smooth implementation and adoption.