Scalable White Label Design System
A flexible, reusable system designed to support multiple brands.
Lead Product Designer
July 2023 – Aug 2024
Figma
2 Designers (1 iOS/1 Android)
4 Developers (2 iOS/2 Android)
1 Product Manager
3 Product Owners
1 Architecture Engineer
1 Scrum Master
QA Team
Goal
Create a modular design system that could be rebranded across multiple client apps. It needed to:
Support iOS & Android
Maintain brand uniqueness
Reduce client release cycles
The Challenge
The legacy design system struggled with modern scalability and brand flexibility.
Why it wasn’t working:
Fragmented brand identity across apps
Development inefficiencies with redundant builds
Limited payment options → checkout friction
No adaptability for new OS features (dark mode, biometrics)
Outdated flat design → accessibility issues
Weak brand presence compared with competitors
Research & Insights
We gathered client and user input through:
User Interviews: Frustrated by inconsistent experiences
Data Analysis: Usage patterns highlighted slow payments & low loyalty use
Competitive Analysis: Benchmarked modern loyalty/fuel apps
Client Reviews (QBR): Prioritized brand differentiation + faster go-to-market
Key Learnings:
Speed matters → Fast checkout is critical
Loyalty drives retention → Seamless integration & instant rewards
Payment flexibility → Beyond cards: ACH, PayPal, Venmo
Station Finder expected → Real-time, accurate, filter-driven
Brand uniqueness → Clients want white label + strong identity
Design System Approach
We built a scalable, modular white-label UI system with:
Multi-brand support: Color, typography, iconography configurable at the component level
Feature configurability: Toggle features on/off or reorder home elements per client
Cross-platform consistency: Human Interface Guidelines (iOS) + Material Design 3 (Android)
Design Process
Wireframes & Flows: Simplified navigation, mapped new loyalty tiers & wallet flows
Prototypes: Interactive Figma prototypes showcased configurability + loyalty programs
User Testing: Validated flow simplicity, map filters, default payment updates
Iteration: Refined wallet & station locator after user feedback
Core Feature Enhancements:
Dynamic password settings (per client security needs)
Loyalty tiers with customizable redemption
Default payment selection for faster checkout
Enhanced station locator (map filters + availability)
In-app surveys for quality feedback
Hero image module to personalize brand presence
Development Handoff
All designs delivered in Figma + Dev Mode
Auto-layout and component libraries for efficiency
Regular dev/design syncs + ongoing UI/UX QA
Ensured cross-platform fidelity (iOS & Android)
Product Launch
The new design system powered client rebrands, allowing each app to look unique while sharing the same foundation.
Hero image & welcome message: customizable per client
Feature modules enabled/disabled per brand
Consistent navigation + branding flexibility
Impact Metrics
+40%
Pay transactions (in-store & pump) within 6 months
+55%
user retention with streamlined loyalty use
-60%
dev cycles (12–16 weeks → 7 weeks)
75%
component reuse across brands
Results & Learnings
This project proved the impact of a scalable modular design system in a white-label environment.
Key Takeaways:
Scalable Design: Reusable system reduced dev time & increased brand flexibility
Consistency Across Platforms: Achieved iOS + Android parity with HIG/Material 3
Customizable for Clients: Loyalty tiers, branding, password rules, and feature toggles
User Engagement: Improved usability with faster payment, loyalty integration, and enhanced navigation
Reflection:
As Lead Designer, I grew in system thinking and client collaboration—balancing efficiency and configurability while ensuring a great end-user experience.