🟢 Read time: ~30 sec
🎯 Designing for clarity in a data-heavy mobile UI
Strengthening typography, contrast and touch targets to make performance critical information faster to read and safer to act on.
📊 +40% readability · -35% interaction errors · -34% task time · +29% engagement
Executive Snapshot
Problem: Over time, small inconsistencies in typography, spacing and interaction patterns increased friction and hesitation.
Goal: Improve clarity and reduce interaction errors without redesigning the core product experience.
Scope: Typography system · Contrast strategy · Touch targets (44×44) · Safe areas · Feedback patterns.
Impact: Validated through usability testing and behavioural metrics across key interaction flows.
Approach: Audit → define system rules → implement at scale → validate with metrics.
⏱️ 2025, 2 months | 📱Type: Bingo Hybrid & Native App | 🧑🏼💻 Role: Design System Architect, UI/UX Designer | ✏️ Tools: Figma, Adobe XD
🆚 Side-by-Side Comparisons
These comparisons highlight key improvements in readability, contrast, interaction areas, and layout consistency leading to WCAG AA compliance and measurable usability gains. Rather than redesigning the layout, the focus was on systemic clarity improvements.
System-Level Improvements
| System Layer | Before | After |
|---|---|---|
| Typography System | 8–10px text, fragmented hierarchy | Standardised scale, 12px minimum |
| Contrast Strategy | Partial WCAG compliance | 6.4:1+ across core surfaces |
| Interaction Model | <44px tap areas | 44×44px minimum touch standard |
| Layout Structure | 12px margins, inconsistent spacing | 16–20px safe area alignment |
🟡 Read time: ~1 min
📝 Strategic Narrative
This was not a visual redesign - it was a structural intervention.
Over time, new components were added, styles multiplied, and inconsistencies accumulated. Individually harmless, but together they created friction, slowed users down and reduced confidence.
The objective was to strengthen the system foundations to reduce cognitive load and improve decision speed.
Constraints
No full redesign allowed
Existing design system inconsistencies
Cross-platform standards
High-frequency usage
Key Decisions
Standardised typography to improve scanability
Balanced contrast for readability without visual strain
Increased tap targets to 44×44 to reduce errors
Fixed safe area margins for modern devices
Trade-offs
Prioritised high-impact interaction fixes over aesthetic refinements
Focused on scalable system-level improvements rather than isolated UI tweaks
📝 Core UI Foundations
Below is an example of how foundational UI improvements translated into clearer, more usable screens.
Experience the before & after improvements interactively! Use the slider below to compare the original UI with the enhanced, WCAG-compliant version.
🔍 Key Takeaways from the Comparison
The refined UI improves clarity, usability, and accessibility by addressing key pain points from the original design.
Better Readability 📖 – Increased text sizes ensure compliance with WCAG AA and improve legibility.
Higher Contrast 🎨 – Enhanced visibility makes key game elements clearer, reducing reading effort and hesitation.
Optimised Interactions 🎯 – Larger tap targets and better spacing reduce accidental taps and improve interaction confidence.
Structured Layout 🏗 – Consistent margins and spacing create a more stable and predictable interface.
These enhancements make the Bingo app more inclusive and easier to use during fast, repeated interactions.
🔴 Read time: ~8–10 min
🧠 Deep UX Breakdown
The measurable outcomes above were driven by system-level decisions.
Below is a breakdown of the typography, contrast, spacing and interaction rules that enabled those results.
Optional deep dive into the structural changes behind the improvements.
🔠 Typography & Readability Fixes
In a high-frequency mobile interface, inconsistent typography increases cognitive load over time.
A key part of the WCAG audit was ensuring that all typography met accessibility standards. Below is an audit of font styles, highlighting areas that failed WCAG compliance and the fixes implemented:
| Style Name | Font Size (px) | Weight | WCAG Compliance |
|---|---|---|---|
| Subtitle | 10 | Bold | Pass |
| Paragraph | 10 | Bold | Pass with high contrast |
| Label | 9 | Regular | Fail - Increase size or contrast |
| Button / Primary | 10 | Bold | Fail - Increase size or contrast |
| Call | 8 | Regular | Fail - Increase size or contrast |
| Ball Large | 23 | Bold | Pass |
| Ball Small | 11 | Bold | Pass with high contrast |
| Ribbon | 8 | Regular | Fail - Increase size or contrast |
🎨 Contrast Enhancements
Contrast was audited across core surfaces and primary interaction elements.
Several components failed WCAG AA contrast thresholds, affecting readability and interaction clarity.
❌ Before: Issues Identified
Before the contrast refinements, several UI elements failed WCAG AA standards, causing visibility issues and potential eye strain for players. Key areas needing improvement included:
Low contrast text, making content hard to read.
Overly high contrast buttons, creating visual strain.
Inconsistent UI element contrast, reducing clarity and accessibility.
Contrast Enhancements
| UI Element | Before (Contrast Issue) ❌ | After (Fixed Contrast) ✅ | Improvement |
|---|---|---|---|
| Container Text | 6.4:1 (Low Contrast, Hard to Read) | 14.85:1 (High Contrast, WCAG AA) | Easier to read |
| Primary Button Text | 16.2:1 (Too High Contrast, Straining) | 13.37:1 (Balanced Contrast) | Less harsh, more legible |
| Expansion Panel | 5.27:1 (Fails WCAG for small text) | 6.39:1 (Improved Contrast) | More readable for UI elements |
| Feature Bar | 4.88:1 (Low Contrast, Hard to Distinguish) | 11.12:1 (Better Visibility) | More readable |
🟣 Example 1 - Improving Text Contrast on Container
Challenge
The text on container elements had insufficient contrast (6.4:1), making it hard to read. White text (#FFFFFF) on a bright background was too harsh, leading to readability issues.
Solution
✔ Increased contrast to 14.85:1 for better visibility.
✔ Replaced pure white text with a softer bright-gray to reduce eye strain.
✔ Ensured compliance with WCAG AA for both normal and large text.
Impact
✅ Enhanced legibility without excessive contrast strain.
✅ Text is now easier to read, making the interface more accessible.
📌 Visual Comparison
Below you can see before & after images with a slider effect for interactive comparison.
Key Takeaways from the Comparison
| Aspect | Before ❌ | After ✅ |
|---|---|---|
| Contrast | 6.4:1 | 14.85:1 |
| Text Color | White text (#FFFFFF) too harsh | Bright-gray used for better balance |
| Accessibility Compliance | ❌ Fails WCAG AA & AAA | ✅ Passes WCAG AA & AAA |
| Readability & Eye Strain | ❌ Harder to read, more strain | ✅ Easier on the eyes, better usability |
🟡 Example 2 - Fixing Contrast Issues in Buttons for Readability
Challenge:
Buttons and interactive elements had insufficient contrast, especially in gradients. The primary button’s text contrast was too low (4.16:1 and 3.97:1), failing WCAG standards.
Solution:
✔ Adjusted contrast in gradient backgrounds for clearer text.
✔ Ensured primary CTAs met a minimum 4.5:1 contrast ratio.
✔ Increased font size for better readability, following Material Guidelines (Text Button: 14px).
Impact:
✅ Buttons are now more distinguishable and easier to interact with.
✅ Complies with WCAG AA, ensuring usability for all users.
📌 Visual Comparison:
Below you can see before & after images with a slider effect for interactive comparison.
Key Takeaways from the Comparison
| Aspect | Before ❌ | After ✅ |
|---|---|---|
| CTA Button Background | Top and bottom gradient colors did not achieve the recommended 4.5:1 contrast required by accessibility guidelines. | Adjusted gradient for higher readability, meets WCAG AA recommendations. |
| Font Size in Buttons | 12px (too small) | 14px (Matches Material Guidelines) |
| Accessibility Compliance | ❌ Failed WCAG AA for buttons | ✅ Passes WCAG AA, improving usability |
| User Interaction | Buttons were harder to distinguish | Buttons are more visible and easier to tap |
🔍 Checking Primary Button Vs Expansion Panel
Why is this an interesting example?
Here, we compare gradient vs. gradient, and the best approach is to check the contrast colours of the top and bottom hex codes separately.
This example also highlights a key principle: UI elements and text have different contrast success criteria.
✅ For UI elements (like buttons):
Minimum contrast: 3:1
Recommended for important buttons: 4.5:1
✅ For text contrast (readability):
Best range: 7:1 - 15:1
Conclusion: This analysis shows why it's important to treat UI contrast differently from text contrast when ensuring WCAG compliance and readability.
🎯 Tappable Targets & Padding: Enhancing Usability & Compliance
As part of the WCAG audit, I evaluated and refined tappable targets and spacing to improve interaction ease. WCAG requires a minimum touch target size of 44x44 px (✅ meeting AA compliance), while 48x48 px is recommended for AAA compliance to further enhance accessibility.
Some UI elements such as Jackpot and Info Icons in the initial design did not meet these standards, causing usability challenges—especially for people who use touch interfaces with varying levels of precision. By optimizing tap targets and refining padding, I ensured better accessibility, improved usability, and compliance with WCAG & Material Design standards.
✋ Tappable Targets: Improving Interaction & Accessibility
Before & After Comparison:
Tappable Targets Enhancements
| Aspect | Before (Issues) ❌ | After (Fixes) ✅ |
|---|---|---|
| Tap Target Size | Icons & buttons were smaller than 44x44px, making them difficult to press. | All interactive elements increased to 44x44px, ensuring easier and more accurate tapping. |
| Interaction Ease | Users with varying touch precision struggled to tap small elements accurately. | Improved tap target size prevents misclicks and accidental taps, creating a smoother interaction. |
| Padding & Spacing | Minimal padding around icons led to cluttered interactions and difficult navigation. | Invisible Padding enhancements ensure extra spacing around buttons and icons, allowing for easier selection and better usability. |
| WCAG Compliance | Failed WCAG AA standards due to tap target size issues. | Now fully compliant with WCAG AA & Material Design Guidelines. |
🚀 Key Takeaways from the Comparison
✅ Bigger tap targets = better usability!
✅ More padding = cleaner layout & easier navigation!
✅ WCAG compliance = More inclusive experience for all users!
✅ Prevents accidental taps and improves interaction accuracy!
📏 Padding Fixes: Aligning with Material Design Guidelines
Proper spacing is crucial for both readability and interaction comfort. Initially, UI elements had inconsistent padding, leading to alignment and usability issues.
📌 Material Design (Google) sets explicit padding rules to ensure usability and readability across all interactive elements:
✅ Horizontal padding: At least 8–16 dp per side.
✅ Vertical padding: At least 6–10 dp per side.
By refining the horizontal and vertical padding, I ensured that all interactive elements maintain a clean, structured layout while meeting Material Design and accessibility standards.
Before & After Comparison:
Padding Fixes Enhancements
| Aspect | Before (Issues) ❌ | After (Fixes) ✅ |
|---|---|---|
| Horizontal Padding | Only 5px, failing Material Design’s 8-16dp requirement. | Increased to 8dp, aligning with Material Design guidelines. |
| Vertical Padding | Inconsistent (sometimes 6px, sometimes 3px), causing alignment issues. | Standardized to 6px, ensuring consistency across all elements. |
| Spacing & Alignment | Elements felt too tightly packed, leading to a cluttered UI. | Improved spacing creates a balanced and structured layout. |
| Material Design Compliance | Did not follow Google’s Material Design padding standards. | Now fully compliant with Material Design & WCAG guidelines. |
🚀 Key Takeaways from the Comparison
✅ Bigger tap targets = better usability!
✅ More padding = cleaner layout & easier navigation!
✅ WCAG compliance = More inclusive experience for all users!
✅ Prevents accidental taps and improves interaction accuracy!
🔍 Why It Matters
By refining tap targets and padding, I made the interface more structured, accessible, and user-friendly. These optimizations ensure frustration-free gameplay for all users, including those who tap with different levels of precision—whether due to personal preference, mobility, or device limitations.
📐 Safe Area & Layout Margins: Enhancing UI Spacing & Accessibility
🔍 The Issue: Inconsistent Margins & Non-Compliance
Before the update, layout margins were too small (X-axis: 9px, Y-axis: 11px), failing Material Design, Apple HIG, and WCAG guidelines.
Content was too close to the screen edges, impacting readability and usability.
Accidental taps increased, especially on edge-to-edge screens.
Did not meet safe area padding requirements, causing layout inconsistencies across devices.
Safe Area Layout Compliance
| Standard | Required Margin | Before ❌ | Compliance |
|---|---|---|---|
| iPhone (Notched Devices) | 16px - 20px | ❌ 9px | 🚫 Fails |
| Android Edge-to-Edge | ≥ 16px | ❌ 9px | 🚫 Fails |
| Landscape (iOS & Android) | 20px - 24px | ❌ 11px | 🚫 Fails |
📊 Before & After: Safe Area Margins
| Aspect | Before ❌ | After ✅ |
|---|---|---|
| Safe Area Margin (X-axis) | 9px | 16px (Standard) |
| Safe Area Margin (Y-axis) | 11px | 16px (Vertical Compliance) |
| Accidental Taps | High | Reduced |
| UI Alignment Consistency | Poor | Fixed |
| Accessibility Compliance | 🚫 No | ✅ Yes |
✅ The Fix: Standardizing Safe Area Margins
I updated margins to match UX best practices, improving spacing, readability, and touch ergonomics.
✔ Increased margins from 9px → 16px (min. standard)
✔ Adaptive layout adjustments for different screen sizes
✔ Better visual balance & reduced accidental taps
Before & After Comparison:
🚀 Impact
These fixes enhance readability, reduce errors, and ensure WCAG compliance—all while maintaining a cleaner, more structured UI.
🎯 Final Results & UX Impact (OKRs)
🌟 Objective
Enhance the accessibility, usability, and engagement of the Bingo app by implementing WCAG AA improvements, optimizing readability, and refining interactive elements.
📊 Key Results (Measurable Improvements)
✅ Readability Improved by 40%
KR1: Increase font sizes, optimize contrast, and standardize typography to enhance text legibility.
✅ Interaction Errors Reduced by 35%
KR2: Enlarge tappable targets (44x44px), improve spacing, and implement "Invisible Padding" to reduce misclicks and accidental taps.
✅ Increased User Confidence & Satisfaction
KR3: Improve visual feedback with clearer call-to-action buttons, confirmation pop-ups, and better game cues for a more intuitive experience.
✅ Higher User Engagement (+29% Session Duration)
KR4: Optimize the app layout, improve readability, and refine interaction flows to encourage longer and more seamless gameplay sessions.
📊 Measurable UX Impact (Testing & Analytics Process)
To quantify the impact of these accessibility enhancements, I conducted a usability audit and A/B testing before and after implementing WCAG fixes. I used a combination of user testing, heatmaps, and behavior tracking tools to measure improvements.
✔ Baseline Audit (Before Fixes):
Conducted a usability study with 10 users aged 45+ (the primary audience).
Used Google Analytics & Hotjar heatmaps to identify problem areas.
Found that 22% of users struggled with small tap targets, and 18% had difficulty reading text.
✔ WCAG Fixes Implemented:
Increased text sizes & contrast using WCAG Contrast Analyzer & Stark (Figma plugin).
Expanded tap targets and padding based on Android Studio & Xcode tap testing tools.
✔ A/B Testing (Before vs. After Comparison):
Conducted a split test with 20 participants using Maze UX testing.
Measured tap accuracy, readability, and interaction errors before and after fixes.
Key UX Impact Results
| Metric | Before Fixes ❌ | After Fixes ✅ | Improvement 📈 |
|---|---|---|---|
| Readability Score (User comprehension test) | 65% | 91% | +40% |
| Interaction Errors (Misclicks & accidental taps) | 22% | 7% | -35% |
| Time to Complete Actions (e.g., selecting game numbers) | 9.2 sec avg. | 6.1 sec avg. | -34% |
| User Confidence in UI (Survey Rating) | 3.2/5 | 4.6/5 | +43% |
| Session Duration (Time spent engaging with the app) | 2 min 35 sec | 3 min 12 sec | +29% |
🏆 Key Outcomes (Aligned with OKRs)
✔ 📖 Better Readability – Increased font sizes & contrast, ensuring WCAG AA compliance and reducing eye strain.
✔ 🎨 Higher Contrast – Improved text & button contrast (6.4:1 to 14.85:1) enhances visibility for visually impaired users.
✔ 🎯 Optimized Interactions – Enlarged tap targets (44x44px) reduced misclicks and increased selection accuracy.
✔ 🏗 Streamlined Layout – Consistent margins, spacing, and padding provided a structured and clutter-free experience.
✔ 🚀 Increased Engagement – Session durations increased by 29%, confirming users found the app easier to navigate and interact with.
📣 User Feedback & Insights
💬 "The text is much easier to read, and I don’t need to zoom in anymore!"
💬 "Tapping buttons is way easier now—I don’t keep hitting the wrong one by mistake."
💬 "The layout feels cleaner and less cluttered, which makes playing much more enjoyable."
📌 Why It Matters: The combination of usability testing, analytics tracking, and direct user feedback confirms that the WCAG improvements had a major positive impact on accessibility, usability, and engagement.
🔎 Reflection: Key Learnings
This project proved that small changes lead to significant usability gains. Key takeaways:
📖 Text clarity matters – Readability scores improved 40% by following WCAG font size & contrast standards.
🎯 Tap targets are critical – Interaction errors dropped 35% after increasing tap sizes to 44x44px.
🔍 User confidence improved – The survey rating jumped from 3.2 to 4.6/5, confirming a better experience.
📏 Better spacing enhances navigation – "Invisible Padding" helped users interact more smoothly without visual clutter.
🚀 Next Steps: Design System Case Study (Upcoming OKRs)
To expand on the work done for accessibility, the next phase will focus on documenting and sharing the Bingo App Design System in a dedicated case study. This will be structured around the following OKRs:
✅ KR5: Showcase Component Architecture & Naming – Detail the modular setup and scalable structure of core components.
✅ KR6: Highlight Accessibility-First Design – Explain how WCAG AA standards were embedded directly into the system foundations.
✅ KR7: Document Cross-Team Collaboration – Share how design and devs worked together using tools like ZeroHeight and Storybook.
✅ KR9: Publish Figma System Framework – Present the Figma file structure, tokens, versioning, and documentation practices.
🧠 This follow-up will provide a deeper look at how a robust design system can drive accessibility, speed up workflows, and maintain product consistency.
I’ll link the case study here once live — stay tuned! 👀
🎯 Why This OKR-Based Approach Works
✅ Aligns objectives with measurable key results (OKRs) for clear performance tracking.
✅ Links UX improvements to user impact, making the case study more data-driven & structured.
✅ Provides a roadmap for future optimizations, ensuring accessibility enhancements continue.