24 Hour Pickleball just opened their first facility in your town. You’re excited to try it out, so you download their app and register as guest user. The facility is fully automated and operates without on-site staff— so every user interaction needs to happen seamlessly through the app.

You open the app on your iPhone— and in just a few taps you’ve reserved your first court-time and completed the payment with Apple Pay. Instantly, you're shown a confirmation screen including your court number, reservation details, a time-restricted entry PIN, and facility instructions—everything needed for a smooth, self-service experience.

Design a reservation flow that feels effortless for users, while managing more complex logic behind the scenes— such as dynamic court availability, in-flow membership upgrades, reactive and data driven UI, and reservation specific, keyless facility entry.

-Meet key business requirements of rapid delivery, increasing conversions, and scalable upsell opportunities.

I owned the end-to-end design and frontend development of In-App Reservations:

Feature Analysis & Planning

• Collaborated with stakeholders to define the problem space, business goals, feature boundaries, and user needs
• Identify potential risks, complexities, and edge cases

User Story Development

• Applied a BDD approach to clearly define expected behaviors, documenting user stories and acceptance criteria using Gherkin's 'Given-When-Then' format
• Maintained tight alignment between design, development, and stakeholder expectations through shared documentation

Modular Component Design

• Created rough mock-up sketches to visually map out views, view-states, and transitions
• Inspired by the Builder Pattern, I designed modular, stateful components first
• Combined and extended atomic components to efficiently assemble more complex, scalable views

Interactive Prototyping

• Created interactive prototype flows based on Gherkin user stories.
• Led team and stakeholder feedback cycles— refining the designs and implied system behavior, data structures, and architecture.

Frontend Implementation

• Developed the reservation UI and accompanying tests using Vue.js, Tailwind, Laravel, and Pint
• Collaborated closely with backend engineers to align on data models, API contracts, validation rules, and time slot locking
• Integrated and tested APIs to fetch court availability, handle reservation submissions, and return complete user-reservation objects with access credentials

My reservation feature designs were well received by stakeholders, and after feedback and iteration cycles were completed, I was able to hand off the figma files and assets for implementation. The reservation feature was developed, tested, and released into production. We received overwhelmingly positive feedback in our the facility member chat group. and had only minor bugs and additional requests.