Challenge
Iké is a B2B2C insurance platform that white-labels assistance services for financial institutions. When a banking customer opens their "insurance" section, they're using Iké's platform styled to match their bank's brand.
The platform was built backend-first with no design system. They needed to launch v1 in 2 months, then onboard multiple clients. Initial expectation: each client customization would take 2-5 months of designer support.
The real problem: Their business model required rapid client onboarding, but their process would create a permanent designer bottleneck.
My Role
Product Designer (Consultant), RedBox Innovation Worked with Product Owner, Product Manager, 2 Backend Developers
- Designed token-based component system
- Defined configuration strategy (atomic elements only)
- Created documentation and led handoff workshops
- Supported first client implementation
Timeline: v1 in 2 months, v2 (+customization) in 1 additional month
Approach
Reframing the request
The ask was "design custom versions for each client." After talking with the dev team, I understood their real concern was scalability with no frontend expertise. I proposed a configuration system where changing base tokens would automatically cascade styling across the platform, eliminating manual customization.
Key decisions
1. Material Design semantic tokens as foundation
Used proven token structure (primary, secondary, surface, on-surface) instead of inventing a custom system. No time to validate new methodology, and semantic naming enables automatic contrast/relationship handling.
2. Only atomic elements are configurable
Customizable:
- Base color palette
- Fonts
- Typography scale
Fixed:
- All components, layouts, interactions
Why restrict customization? Maximize perceived branding with minimum configuration, reduce error surface for non-frontend team, maintain quality without designer oversight.
Solution
Token system + component library
- Brand color base, semantic color tokens + tonal variations
- Typography styles with size/weight/line-height
- Component library spanning service modules (roadside, medical, pet care, legal)
Developer-focused handoff
- Token naming matched CSS variable conventions
- Two workshops walking through first client implementation
- Documentation with before/after code examples
The development team replicated the process for all subsequent clients without design support.
Impact
5 clients implemented, 1 with my support, 4 independently by dev team
2-5 months → 2-4 weeks implementation time per client
System adopted without modification, team used it as delivered, no iterations needed
Unblocked business development
Original plan assumed designer involvement for each client. After the first implementation, the dev team handled all customizations independently, eliminating the bottleneck and enabling their partnership roadmap.
