The Problem with Manual Everything
Strike is a scoreboard booking platform for sports facilities. When this project began, every single scoreboard activation required a staff member at the court. No automation. No real-time sync. Customer usually make sure on the spot and asking about scoreboard activation after booking on app and a lot of human error.
The core gap: users could book a court but had no seamless way to get the scoreboard activated — the two systems were completely disconnected. The result was delays, conflicts, and frustrated players who'd paid for a smooth experience.
This was a real project from a real company — not a concept exercise. Every design decision balanced actual operational constraints, business goals, and user needs simultaneously.
The Pain
- High staff dependency for every scoreboard activation
- No real-time sync between court booking and scoreboard slots
- Payment failures forced users to restart the entire booking journey
The Vision
- Smart Scheduling — slots auto-locked to court availability
- QR Activation — one scan replaces manual staff validation
- Resilient Payments — failed state with quick Retry, no full restart
Listening Before Designing
Before wireframes, the team spoke with 6 participants through online questionnaires and in-depth interviews. The goal wasn't just to catalogue complaints — it was to understand why users kept returning despite the friction.
Four Pain Points That Shaped the Design
- Booking Conflicts — arriving at the court only to find it taken despite a confirmed booking
- Hidden Information — no way to see slot status or pricing until deep in the flow
- Score Disputes — manual tracking during games led to arguments and frustration
- Payment Loops — a failed payment meant restarting the whole journey from scratch
User Personas
"I just want to play smoothly without worrying about booking or forgetting the score."
"If booking and scoring can be automated, I can focus purely on the game."
Scoping with MoSCoW
With two weeks and a real product roadmap, scope discipline was non-negotiable. I facilitated a MoSCoW exercise to align the team on what was essential versus aspirational — before any pixels were placed.
- Scoreboard booking integrated with court scheduling
- Secure payment with clear failure recovery
- Real-time slot availability sync
- Flexible slot extensions mid-game
- Push notifications for upcoming play sessions
- Step-by-step guided booking flow (date → field → time)
- Instant QR activation to bypass staff validation
- Automated booking receipt and confirmation
- Complex group coordination and community features
The Game Layout
I mapped out the Information Architecture to ensure every key action — from discovery to payment — was never more than two taps away. The goal was to eliminate the "where am I?" feeling common in multi-venue apps.
Key IA decision: Two parallel entry points — scan-first (for users already on-site) and browse-first (for advance planning) — gave both user types an efficient path without forcing unnecessary steps on either.
QR Path — On-Site
- Scan QR scoreboard at venue → Check schedule → Book & pay → Scan to activate → Confirmed
Venue Path — Remote Planning
- List venues → Select → Check availability → Book & pay → Scan to activate at arrival
From Skeleton to System
Wireframes were deliberately low-fidelity to keep focus on flow logic — not aesthetics. The visual design phase followed with a clear intent: build trust through professionalism while retaining the energy and immediacy of a sports product.
The Style System
The Design Strategy
Adopting a cleaner aesthetic to enhance credibility while maintaining an energetic sports feel.
Supporting both on-site (QR Scan) and remote planning (Venue Browse) for maximum flexibility.
Transforming the app into a platform that attracts venue owners through partnership features.
A logical 3-step process ensuring users don't face decision fatigue during booking.
Smart availability logic to prevent overlap and manage facility capacity effectively.
Wireframe & Mockup Strike
Low-Fidelity Mockup Strike
High-Fidelity Mockup Strike
Before & After: The Visible Shift
Comparing the designs makes the philosophy clear: the new version isn't just prettier — it's structurally more logical. Each screen answers a question before moving to the next one.
Dense layout, no clear entry point for new users, visual hierarchy unclear between booking and browsing actions.
Two clear paths surfaced immediately (QR scan or venue browse) with strong visual anchors guiding the eye.
Time slots were decoupled from court selection — users had to mentally piece the connection themselves.
Slots hard-coded to selected court and date. Zero ambiguity. Zero scheduling conflicts possible.
Total payment hidden below the fold. Users uncertain about pricing until the very final tap.
Total payment pinned above the CTA button — immediate, visible, confidence-building before commitment.
Interactive Prototype
Testing with Real Players
After building the interactive prototype, usability testing with 6 participants across 6 tasks and 6 open questions shaped the final iteration round and confirmed the core flows were solid.
Testing Findings
| Task | User Response | Elemen |
|---|---|---|
| Task - Selecting a Venue | The venue was easy to spot physically, though the initial map view caused slight hesitation. Scrolling down quickly resolved this by revealing the Bayoran Badminton Hall as expected. | Map-Based Venue - Explore Venue Page |
| Task - Selecting a Game Schedule and Duration then payment | The flow is intuitive, but pricing is hidden below the fold. Moving the price estimate to the top would improve immediate clarity and decision-making | Book & Check Schedule Page - Form Total Payments - |
The One Iteration That Mattered
Total payment lived below the fold on the payment screen. Users scrolled to find it, creating hesitation right before the most critical action.
Total payment is now fixed directly above the "Book Now" button. Visible, immediate, confidence-building — a small shift with measurable impact on trust.
What Strike Taught Me
Building Strike in two weeks was a pressure test in scoped design thinking. It forced me to distinguish between what's important and what's merely interesting — and to move fast enough to actually test assumptions.
User-Centric Iteration Multiplies Impact
Watching users hesitate in testing led to a 20-minute redesign that cost zero extra engineering effort but measurably improved confidence at the most critical conversion point.
Information Architecture is the Hidden Backbone
Getting users from discovery to booking in under 4 steps wasn't accidental—it resulted from deliberately mapping every route before touching the interface.
Visual Consistency Builds Trust Early
Maintaining a coherent design language across complex components creates the kind of polish that makes users feel the product is reliable before the first interaction.
Speed Over Debate
In a fast-paced sprint, moving fast enough to test assumptions is always better than over-debating them. Real user feedback is the ultimate decision-maker.