Case Study - Award-Winning Football Club Skin Refresh

The Challenge

Kaizen Ticketing, a leading SaaS provider for football club ticketing platforms, needed a refreshed visual identity that transcended the standard Bootstrap design. The company serves over 80 football clubs, providing a white-label solution layered on a Bootstrap-based system.

Key challenges included:

• The need for a modernised UI that visually distanced itself from Bootstrap’s default look while maintaining existing structure and performance.
• Upgrading to Bootstrap 5.3 while ensuring backward compatibility and seamless migration of 80+ existing club-specific themes.
• Enabling greater flexibility in skin creation and support for dark mode using browser-based CSS variables.
• Minimising markup changes to avoid disruptions to the engineering team’s ongoing development work.

With a strict timeline to launch before the start of the new football season, incremental delivery was crucial to mitigate risks and ensure a smooth transition.

Our Approach

We adopted a systematic approach to achieve the project’s goals while ensuring minimal disruption to Kaizen Ticketing’s existing platform and users:

• Design-Led Development: We created a comprehensive design system in Figma to standardise UI components across all club themes.
• Incremental Migration to Bootstrap 5.3: We tackled the migration in stages, focusing first on core components before expanding to the full theming system.
• Minimal Markup Changes: By leveraging CSS custom properties and SCSS enhancements, we maintained compatibility with Kaizen Ticketing’s existing hybrid React/ASP.NET MVC architecture.
• Enhanced Skin Management: We restructured the skin pipeline, enabling more flexible, browser-based variable management to support dark mode and future styling updates.

The Solution

Key Features & Innovations:

• Kaizen Design System: A structured Figma-based system ensuring design consistency across all club implementations.
• Modern Bootstrap 5.3 Theming: Custom CSS variables and SCSS enhancements delivered a refined, scalable, and visually distinct UI.
• Dark Mode Support: Implemented entirely through browser-based variables, allowing seamless toggling between light and dark themes.
• Incremental Rollout Strategy: Delivered updates in phases to ensure stability and allow for client feedback before full deployment.

Tech Stack

Key Outcomes:

• Design System Implementation: Delivered a reusable, scalable design framework for all club themes.
• Bootstrap 5.3 Migration: Successfully upgraded the front-end build process without breaking existing structures.
• Improved Skin Customisation: Enabled more flexible creation and modification of club themes with browser-based variables.
• Optimised User Experience: Maintained the existing user flow while modernising the interface to improve usability and engagement.
• Award Winning: Contributed to Kaizen Ticketing winning Best Match Day Technology at the 2025 Sports Technology Awards.

What We Learned

This project reinforced the importance of:

• Incremental Delivery: Phased rollouts ensured stability and client alignment throughout development.
• Flexible Theming Approaches: Leveraging CSS variables instead of rigid SCSS structures future-proofed the platform for easier updates.
• Client Collaboration: Close coordination with Kaizen Ticketing’s engineering team helped avoid scope creep and ensured technical feasibility.

The Kaizen Ticketing Visual Refresh is now a benchmark for modernising white-label SaaS platforms without disrupting existing infrastructure, setting the stage for future innovation in fan-facing ticketing experiences..