⚛️ Bingo Design System: Case Study
Overview
As part of the Bingo App MVP, we identified the need for a scalable design system that would streamline UI development, enhance consistency, and support future expansions, including the responsive web version. My goal was to create a flexible, accessible, and visually cohesive system that aligns with user needs and business goals.
Design System
⏱️Time: 2023, 5 months
📱Type: Bingo Hybrid & Native App - Design System Development
🧑🏼💻 Role: Design System Architect, UI/UX Designer
✏️Tools: Figma, Adobe XD, ZeroHeight, Storybook
📝 Choosing the Right Design System Methodology
To build a scalable and flexible design system for a multi-platform application (mobile-first, including tablet and desktop), I compared Atomic Design and Functionality-First methodologies.
| Feature | Atomic Design | Functionality-First |
|---|---|---|
| Structure | Hierarchical (atoms → pages) | Purpose-driven, flexible |
| Scalability | Can be rigid at scale | Highly adaptable |
| Tokens | Supports tokens | Token-driven by design |
| Ease of Use | Requires understanding hierarchy | Intuitive for most teams |
| Real-World Fit | Abstract, less practical | Aligned with real-world needs |
💡 Why Functionality-First?
Designed for large, complex systems with diverse use cases.
Prioritises flexibility and real-world practicality.
Optimised for tokens and dynamic theming.
✨ Conclusion
Given the need for a multi-platform, token-driven approach, I chose the Functionality-First Design System for its scalability and adaptability. It is the ideal methodology for large-scale projects where strict hierarchies (like Atomic Design) can overcomplicate workflows.
📝 Choosing the Right Design System Methodology
To build a scalable and flexible design system for a multi-platform application (mobile-first, including tablet and desktop), I compared Atomic Design and Functionality-First methodologies.
| Style Name | Font Size | Weight | Usage |
|---|---|---|---|
| Text / Heading / H1 - Bold | 32 px | Bold | Main screen title (e.g., "Speed Bingo"). |
| Text / Heading / H1 - Regular | 32 px | Regular | Subtle title variations. |
| Text / Heading / H2 - Bold | 24 px | Bold | Section headers (e.g., "Sale Close In"). |
| Text / Heading / H2 - Regular | 24 px | Regular | Subtle section headers. |
| Text / Heading / H3 - Bold | 20 px | Bold | Subsection titles (e.g., "Jackpot Name"). |
| Text / Heading / H3 - Regular | 20 px | Regular | Subtle subsection titles. |
| Text / Body / Primary - Bold | 16 px | Bold | Highlighted body text (e.g., key numbers). |
| Text / Body / Primary - Regular | 16 px | Regular | Normal body text (e.g., timers). |
| Text / Body / Secondary - Bold | 14 px | Bold | Emphasized secondary details. |
💡 Why Functionality-First?
Designed for large, complex systems with diverse use cases.
Prioritises flexibility and real-world practicality.
Optimised for tokens and dynamic theming.
✨ Conclusion
Given the need for a multi-platform, token-driven approach, I chose the Functionality-First Design System for its scalability and adaptability. It is the ideal methodology for large-scale projects where strict hierarchies (like Atomic Design) can overcomplicate workflows.
🔍 Design System Approach
1️⃣ Research & UI Audit
I began with a UI audit of existing screens to identify inconsistencies. This involved:
Mapping out duplicate components and variations
Evaluating typography, colour usage, button styles, and spacing
Checking for accessibility compliance (WCAG standards)
Findings:
Multiple versions of the same components (e.g., buttons with different corner radii and colours)
Many different text styles with no precise need for it
Unclear spacing guidelines, leading to UI clutter
Inconsistent interactive states for buttons and form elements
| Style Name | Font Size (px) | Weight | WCAG Compliance |
|---|---|---|---|
| H1 Bold | 14 | Bold | Pass |
| H2 Bold | 12 | Bold | Pass with high contrast |
| H3 Bold | 10 | Bold | Fail - Increase size or contrast |
| H3 Regular | 10 | Regular | Fail - Increase size or contrast |
| Caption Regular | 9 | Regular | Fail - Increase size or contrast |
| Caption Bold | 9 | Bold | Fail - Increase size or contrast |
| Dynamic Regular | 11 | Regular | Pass with high contrast |
| Body Primary - Regular | 8 | Regular | Fail - Increase size or contrast |
2️⃣ Establishing Foundations
To standardize our UI, I defined the following core elements:
✍️ Typography System
Primary Font: Readable, clean, and friendly for a casual gaming audience
Font Scaling: Defined hierarchy for headings, body text, and captions
Accessibility: Minimum 16px font size for legibility
🎨 Colour Palette
Primary Colors: Inspired by Playtech’s branding, adjusted for digital readability
Dark & Bright Mode: Created a complementary dark theme to enhance accessibility
Success/Error States: High-contrast colors for clarity
📐 Spacing & Layout Grid
8pt spacing system for consistent alignment and responsiveness
Defined breakpoints for mobile, tablet, and desktop
3️⃣ Component Library
I built a scalable UI kit in Figma, ensuring all components were reusable and well-documented. Key components included:
Buttons (Primary, Secondary, Disabled, Hover States)
Forms & Inputs (Dropdowns, Checkboxes, Radio Buttons, Sliders)
Modals & Popups (Confirmations, Alerts, Notifications)
Game Cards & Ticket UI (Ensuring clear visibility of purchased tickets)
Navigation Elements (Tabs, Bottom Navigation, Side Menus)
Each component was designed with:
✅ Auto-layout for flexibility
✅ Defined hover, active, and disabled states
✅ Usage guidelines for consistency
4️⃣ Developer Handoff & Documentation
To ensure smooth adoption, I documented the system in ZeroHeight and collaborated with developers using Storybook for implementation.
Key documentation included:
Component usage guidelines
Design tokens (spacing, colours, typography)
Interaction specs & behaviour
Accessibility recommendations
Impact & Results
🚀 40% faster development time as developers used reusable components
📏 90% reduction in UI inconsistencies, leading to a polished, cohesive experience
🔍 Improved accessibility, ensuring a more inclusive product
💡 Scalable design that supports upcoming responsive web expansion
Challenges & Lessons Learned
🚧 Challenges
Convincing stakeholders to invest time in a design system before MVP launch
Ensuring adoption by designers and developers through proper documentation
Balancing consistency vs. flexibility to allow for branding customization
💡 Learnings & Future Improvements
Establish design system governance early to ensure team-wide adoption
Conduct A/B testing on UI patterns to validate effectiveness
Plan for continuous updates, evolving with user needs and new features
Next Steps
With the MVP launched, we aim to:
✅ Expand the system for responsive web adaptation
✅ Integrate motion principles for enhanced user interactions
✅ Introduce design tokens for brand customization across licensees
The Bingo Hybrid & Native Design System has laid a strong foundation for scalable, user-friendly digital experiences—enhancing both usability and efficiency for future iterations.
🔧 Usability Testing & Iteration
🧪 Conduct Usability Testing:
Tested four intro screens and features with players to ensure they understood how to match numbers and spin the Feature Reel.
Collected feedback on how engaging the Calm Bride Bonus felt, and whether the extra invite mechanic was intuitive.
🔄 Iterate Based on Feedback:
Simplified descriptions of the four features to avoid overwhelming users.
Adjusted the frequency of the Feature Reel to maintain excitement.
Refined the Calm Bride Bonus for clarity, ensuring players understood how guest choices impacted their final rewards.
📊 Results & Metrics
📈 Post-launch Analysis:
Tracked how often players engaged with the Feature Reel and how frequently they triggered the four main features.
Monitored player interaction with the Calm Bride Bonus, particularly how players navigated the guest selection process.
Analyzed purchase behavior for extra invites using A/B testing to optimize frequency and pricing.
🚀 Outcomes:
15% increase in player retention due to simplified bonus mechanics and clearer interaction flows.
25% longer session times due to engagement with bonus features like Wild Hair and Manicure from Hell.
Significant rise in in-app purchases of extra invites, with players extending gameplay for additional rewards.
🚀 Final Design & Launch
🎨 Visual Design Implementation:
Collaborated with visual artists to refine the bride’s Rage Meter and emotional progression (calm to angry).
Finalized designs for Feature Icons and the Feature Reel.
Added humorous pop-up messages, reinforcing the game's fun and chaotic theme.
🔄 Post-launch Updates:
Introduced additional bonus features and refined the frequency of Feature Reel spins based on player feedback and data.
Continued to adjust the user experience through A/B testing of wild symbols and multipliers for maximum engagement.
🎥 Final Design & Prototype Recordings
📱 Mobile Recording:
The Mobile Version of the Bridezilla Keno Game was designed with a focus on touch interactions and simplified navigation to enhance the user experience on smaller screens. Key features include:
Larger buttons and clear call-to-actions to ensure easy access and playability.
Optimized layout for mobile users, providing a smooth and responsive experience for interacting with the Rage Meter, Feature Reel, and bonus features.
Designed to maintain player engagement with seamless transitions between rounds and feature activations..
💻 Desktop/Tablet Recording
The Desktop and Tablet Version of the Bridezilla Keno Game offers a more expansive layout, utilizing the larger screen space for an enhanced visual experience. Key highlights include:
Full-screen visuals that make the Feature Reel and Rage Meter more prominent, allowing for better player focus on the game elements.
Increased clarity for bonus features and interactions, leveraging the additional space to make features more intuitive without sacrificing functionality.
A seamless gameplay experience with all the core mechanics, ensuring consistency across both mobile and desktop.
💭 Closing Thoughts
The Bridezilla Keno Game was an exciting and unique challenge that pushed me to balance engaging gameplay mechanics with a lighthearted, humorous theme. From conceptualizing core features like the Rage Meter and Feature Reel, to crafting seamless player journeys and ensuring responsive design across devices, this project allowed me to apply a wide range of UX skills. The focus on player engagement—through progressive bonuses and emotional triggers—was key to creating a memorable and enjoyable experience for players.
This project not only strengthened my abilities in wireframing, prototyping, and user testing, but also demonstrated the importance of aligning design with theme to create an immersive gaming environment. The game’s dynamic elements, such as the bride’s transformation and bonus features, kept players engaged, while the fluid, responsive interface ensured a consistent experience on both mobile and desktop.
As a result, the Bridezilla Keno Game stands as an excellent example of how humor, tension, and strategic gameplay can come together to deliver a user-centric and fun experience. I’m proud to have contributed to a project that balances entertainment with design efficiency, and I look forward to applying these insights to future UX challenges.