Summary
I designed, built and launched a tennis court booking web app that helps players quickly find and reserve courts across London. This was a self-initiated project to solve a real personal pain point and sharpen my coding and UX skills. The MVP is live and currently being tested by early users.
Stack
HTML & CSS
GitHub
Figma
Next.js
React
JavaScript
Problem
For casual tennis players in London (like me), booking public tennis courts is a fragmented and frustrating experience. Public courts are spread across multiple providers, each with its own set of booking websites and inconsistent availability.
Users often need to check multiple tabs or call up centers a week in advance, just to find an off-peak slot. This friction discourages casual players from choosing to play tennis with their friends.
I identified the following pain points:
Too many booking websites
Poor/slow booking experience
Solution
I built a clean booking web app that aggregates multiple providers and courts together into a single interface, allowing players to quickly check availability of free slots at their desired court, and link directly to the correct booking page to book them. The design prioritises clarity, speed, and ease of use.
Research & Goals
To understand the user journey, I asked a few of my tennis-playing friends and colleagues how they currently book courts, and what they find frustrating. Almost every player mentioned checking multiple sites to find availability for a specific time. Some people mentioned the need to refresh pages at exact times when new courts are released to get a slot. Surprisingly, some players, who are court-agnostic and just want to play at a specific time, would only check one court because they didn’t know of any other public courts in their area.
Insights
Users typically check 3–5 websites before securing a court at the desired time
Needing to check multiple court websites at their unique slot release times is difficult
Many people don’t know all the public tennis court locations in their area
“I just want to play tennis why is it so hard?”
Goals
Based on the insights, I distilled the key pain points into three concrete goals for the MVP. To measure success, I also defined lightweight usage metrics:
Booking completion rate
Return usage
pain point
too many websites to check
Slow booking experience
Offer many courts in London
MVP goals
Aggregate availability from at least 2 providers
Prioritise speed to availability over advanced features
Start with over 15 court locations in central london
Process
UI and UX Research:
I explored list vs calendar views of popular booking sites and platforms, and created basic wireframe UIs in figma.
Final UI in Figma:
Settled on a grid calendar for easy scanning of times and costs. I created a mid-fidelity wireframe in Figma.
Tech decisions:
After some research, I chose a Playwright scraper to collect data, Vercel for front-end and deployment and Supabase for back-end data management.
Starting with manual scrapes only, I then moved to Github actions to automate scraping and data cleaning.
User testing and iteration:
After launching the MVP, I tested the live web app with a few friends. Using their feedback, I made the following updates:
Improving label hierarchy (clearer “£X / hr” next to each slot)
Added more court locations to 25+
Introduced quick and easy regional court filters
Made a mobile-friendly UI.
Outcome
The MVP successfully aggregated availability from 2 major providers and over 25+ courts. I deployed it publicly and asked 5 early users to test it. All of them were able to find and book a court, and 2 users used the app a second time without any encouragement or reminder. For my pre-defined success metrics, most were accomplished, but some potential improvements could be made with improving speed and availability of courts.
Results:
Next steps
This MVP is in a functional state. However, if I had more time, I would expand and refine the product:
Integrate more providers (Better Leisure, Towerhamletstennis)
Add advanced filters (price, surface type, outdoor vs indoor)
Explore notifications or automated booking for high-demand courts
Integrated Checkout to streamline booking UX.