Building PadelPlus

Background - Industry Context

The padel industry in Indonesia is growing rapidly. New courts continue to open, the player community is expanding, and booking demand is increasing significantly. However, behind this growth, many court owners face challenges that often go unnoticed.

Most venues still rely on aggregator platforms or third-party Software-as-a-Service (SaaS) providers. At first, this solution seems practical because of its low cost and promotional support. Over time, however, platform fees continue to rise, while promotional programs often require owners to use features that may not provide real value for their business operations.

The biggest issue appears when bookings are directed to an aggregator platform. Instead of completing the transaction immediately, customers are presented with other venues offering lower prices or running promotions. As a result, the traffic generated by court owners can easily be redirected to competitors, even though every venue has its own quality, service, and value that deserve to be appreciated fairly.

Discovery: Observation & Insights

To build the right solution, an in-depth observation process was conducted through direct discussions with two key stakeholders: regular players and court owners. This qualitative approach revealed a highly consistent behavior pattern in how court booking decisions are made.

Most users usually make a booking while casually spending time with friends, when a WhatsApp group suddenly becomes active with plans to play, or during a short office lunch break. These situations show that users open the booking page not while sitting comfortably with plenty of free time, but while they are in a semi-rushed, on-the-go situation.

Key Insights:

• The Friction Is Not About the Platform Type: Whether the system is built as a native application (App) or a website (Web) is not the main problem.
• Speed Is the Priority: Available schedules, pricing, and the booking process must be understood at a glance.
• Every Additional Step Reduces Conversion: Registration, OTP verification, or lengthy booking flows reduce users' impulse to complete a reservation and increase the risk of cart abandonment.

Jobs-To-Be-Done (JTBD)

Based on the observations and insights above, the core needs of both user groups were translated into the Jobs-To-Be-Done framework to ensure that the proposed solution focuses entirely on solving real business and user problems.

Ideation (Solution Thinking Process)

To address these JTBD challenges, the ideation process focused on designing a digital solution that is both strong from a business perspective and simple from a user experience perspective. The core idea behind PadelPlus is to create a highly efficient MVP (Minimum Viable Product) ecosystem with strong potential for long-term scalability.

During the UI design process, a 2:1 layout ratio was introduced. This layout was specifically designed to support fast visual interaction:

• Two-Thirds of the Screen (2/3): Dedicated to the main exploration area, allowing users to quickly interact with the calendar, browse available courts, and view available time slots.
• One-Third of the Screen (1/3): A fixed Summary Panel that continuously displays booking details and real-time price calculations.

Whenever users select, modify, or remove a time slot in the exploration area, the total price is updated instantly in the summary panel without requiring a page reload or moving to the next step.

By reducing navigation friction and applying the 2:1 layout strategy, this concept aims to achieve an ambitious yet realistic performance goal: reducing the average time required for users to select a schedule and view the total price to less than one second. This level of speed helps maximize conversion before users lose their initial booking intent.

Concept Strategy (PadelPlus as a Business Asset)

PadelPlus was created not simply as another booking application, but as a strategic business asset that gives court owners full control over their digital business. This concept is built on two main pillars:

A. Platform Ownership Model

PadelPlus does not offer a subscription to a booking application. Instead, it enables businesses to build and own a digital platform designed specifically for their court. PadelPlus acts as a development partner that helps create, improve, and maintain the platform, allowing digital investment to become a long-term business asset rather than an ongoing operational expense. And it all starts with this MVP.

B. Unlimited Scalability

As a modular MVP, PadelPlus is designed with future business growth in mind. If court owners later decide to expand their business by adding coaching sessions, Point of Sale (POS) integration, advanced analytics dashboards, or membership features, these modules can be developed independently. Owners no longer need to wait for the product roadmap of third-party vendors, which often does not align with the needs of their local business.

Frontend Architecture: Next.js, State, & Animation

To improve discoverability through search engines such as Google, the application was built using the Next.js App Router, which provides better SEO control and increases local business visibility. The project uses Tailwind CSS v4 and TypeScript, while the codebase is organized into modular components, constants, and types to make maintenance and future development easier.

One of the main technical challenges was managing the booking flow across multiple pages. Users can select multiple time slots, switch dates, or change court types before proceeding to payment. While users remain on the same page, all booking information is stored in the application state. However, once they navigate to a different page, that state is lost.

To keep the booking experience smooth without adding unnecessary backend complexity, temporary booking data is stored in sessionStorage. Once the data is successfully used on the payment page, it is immediately removed, keeping the application lightweight and preventing unnecessary data from remaining in storage.

To create a more responsive interface, Framer Motion is implemented using a staggered animation approach. Every element—from icons, badges, headings, and content to action buttons—appears sequentially with a subtle delay, creating smoother transitions and a more comfortable browsing experience.(Live Demo)

Roadmap: Towards Production

It is important to acknowledge that PadelPlus, in its current form, was designed and developed as an MVP—a practical solution created to demonstrate how existing operational challenges can be addressed. As a result, several edge cases have intentionally been left for future development, such as race conditions where two users attempt to check out the exact same time slot simultaneously. At this stage, these validations are still handled entirely on the client side.

To move toward a production-ready commercial platform, a clear development roadmap has been defined:

• Server-Side Slot Locking: Integration with the Supabase ecosystem will be implemented to manage slot locking. As soon as a user enters the checkout process, the selected time slot will be automatically locked in the database using a short Time-To-Live (TTL). This ensures that the slot cannot be reserved by another user until the payment is completed or the reservation expires.
• Secure Payment Webhook: Payment processing will be fully handled by a payment gateway such as Midtrans. Booking confirmation will only be triggered through a secure webhook sent directly from the Midtrans server to the backend system, rather than relying on frontend responses that can be manipulated (API Services).

Lessons Learned & Conclusion

PadelPlus was intentionally built from the ground up. This was not a limitation, but a deliberate strategy to demonstrate how technology can be applied effectively to solve real business challenges. At the same time, this project reflects my long-term commitment to growing across multiple product disciplines:

• As a Product Designer, I started by conducting user research, building empathy, and designing user flows that remove unnecessary friction from the booking experience.
• As a Frontend Engineer, I transformed those design concepts into a responsive, interactive, and high-performance user interface using modern web technologies.
• As a Product Manager, I made strategic decisions about priorities—determining which features should be built first to validate the problem, and which could wait until later—understanding that not every solution needs to be perfect on day one.

Ultimately, PadelPlus represents a belief that I strongly hold: every padel venue, regardless of its size, deserves its own dedicated digital platform. That journey does not have to begin with a complex system—it can start with a simple architecture, as long as it is built on the right foundation from the very beginning.