Real case study from company

Strike is a scoreboard booking platform for sports facilities. My focus here is to optimize the Scoreboard Integrated Booking feature, where previously this process was still manual and human error often occurred in scheduling.

Role

Product Designer

Project Timeline

2 Weeks

Team

3

01

Overview

The Problem

1
High staff dependency for scoreboard activation, leading to manual operational delays
2
Lack of real-time synchronization between court time and scoreboard slots.
3
The "Dead-end" Failure: Payment failures force users to restart the entire booking journey.

The Solution

1
Smart Scheduling: Shows the slot selection that is hard-coded to court availability.
2
Instant Activation: The QR scan interface that bypasses manual validation.
3
Resilient Payments: "Failed" state with a quick "Retry" to eliminate user frustration.
02

User Research

User

6 Participants

Method

Online Questioner & In-Depth Interview

User Pain Points

1
Booking Conflicts
2
Hidden Information
3
Losing track of scores
4
Frustrating Payment Loops

User Persona

Maulana Harvy
"I just want to play smoothly without worrying about booking or forgetting the score."

Maulana Harvy

20 years old | Employee | Jakarta
Goals
  • Seamless Planning: Book badminton courts easily and know availability before arriving.
  • Modern Experience: Have a smooth and modern experience in playing sports.
  • Fair Play: Automatically record scores to avoid forgetting or disputes.
  • Efficiency: Save time and energy wasted on manual booking processes.
  • Simplicity: Use a simple app that doesn't require complex steps.
Pain Points
  • I came all the way to the court, but it's already full.
  • Losing track of scores during intense rallies, leading to arguments between players.
Aditya Firman
"If booking and scoring can be automated, I can focus purely on the game."

Aditya Firman

24 years old | Employee | Jakarta
Goals
  • Predictability: Access sports facilities easily and book courts in advance without uncertainty.
  • Focus on the Game: Record match scores automatically and accurately, reducing manual interruptions.
  • Unified Experience: Combine booking and score tracking into one seamless app experience.
  • Professional Reliability: Have an aesthetically pleasing and responsive app that feels professional and reliable.
Pain Points
  • Manual scoring always leads to arguments or mistakes.
  • I wish I could track everything digitally like my running stats.
03

MoSCoW

Must Have

  • Core essentials like Scoreboard Booking and Secure Payments
  • Booking integration between field and scoreboard
  • Real-Time Availability Sync

Could Have

  • Flexible Slot Extensions
  • Push Notification of playing time or booking time

Should Have

  • Seamless select schedule booking process
  • Instant QR Activation
  • Automated Booking Receipts

Won't Have

  • Complex group coordination in community
04

Sitemap

Homepage
Book Scoreboard
Scan QR scoreboard from venue
Check the schedule
Book and payment
Scan to activate scoreboard
Slide to activate
Confirmed
Book Venue
List venue
Use search if want to find specific
Check details
Book and payment
Scan to activate Scoreboard
05

Wireframe

Strike App Wireframes
06

UI Design

Color

#000000
#00A566
#666666
#FFFFFF
#D32F2F
#FFC107

Typography

Figtree
A a
07

Mockup

Strike App Mockups

Old Design

Homepage Old Homepage
Book & Schedule Old Schedule
Payment Old Payment

New Design

Homepage New Homepage
Book & Schedule New Schedule
Payment New Payment

Decision design

Visual Modernization

  • The new design adopts a cleaner and more modern visual style to enhance credibility and align with current mobile app standards.
  • Improved layout hierarchy and contrast for better readability and focus.

Dual Booking Options for Better Flexibility

  • Users can now choose between direct booking via QR scan or booking through venue selection.
  • This flexibility allows both on-site and remote users to complete transactions easily.

Business-Oriented Venue Integration

  • The venue list supports business collaboration by showcasing partner venues integrated with the digital scoreboard system.
  • It helps attract more venue owners to join the platform.

Simplified & Logical Booking Flow

  • The booking process focuses on user experience by guiding them step-by-step:
    1. Select date (default: today)
    2. Choose field (venue with multiple courts)
    3. Select available playing hours (from opening to closing time)
  • Default duration is 1 hour based on the average badminton match time (40–50 mins + setup tolerance).

Smart Scheduling & Availability Logic

  • Users can book up to 3 consecutive hours, and the system automatically adjusts following slots.
  • If a selected time slot is already booked, the transaction can't proceed until users choose available slots.
  • This ensures booking accuracy and prevents overlap between players.

Figma Prototype

08

Usability Testing & Iteration

Usability Score

86
6 Response
6 Task
6 Open Questions & 1 Assessment
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 -
09

Iteration Design

Before Iteration
Before Iteration - Hidden Payment

Total Payment was not visible; users had to scroll down to find it.

After Iteration
After Iteration - Fixed Payment

Total Payment is now fixed above the button for immediate clarity and decision-making.

10

Conclusion & Key Learnings

Building Strike was a journey of balancing complex booking logistics with a seamless user experience. Through research and iterative testing, I transformed a fragmented process into a unified, user-centric sports venue platform.

User-Centric Iteration

Usability testing revealed that even small UI shifts—like moving the total payment above the fold—can significantly reduce user hesitation and improve conversion rates.

Architecture & Logic

Designing the sitemap taught me how to manage deep information hierarchy, ensuring that users can navigate from finding a venue to final payment in less than 4 steps.

Visual Consistency

Maintaining a consistent design system (charcoal, teal, and orange) across complex components like accordions and timelines is vital for building trust and a professional brand feel.