× Home About Featured Projects Skills Contact Download Resume
Ostigan Fintech App

Jumpo Website

Designed from the Ground Up

As the Product Designer for Jumpo, I led the end-to-end design of a responsive gaming ticket booking platform that lets users reserve experiences across multiple branches. Players can choose game duration (30–60 minutes), group size, and preferred date and time. Users can also send digital gift cards (delivered via SMS and stored in their profile), and track gameplay via smartwatches, with points and activity synced to the back office. The platform includes a front office ranking table for players and a back office system for managing points, histories, and user data. I crafted the complete responsive UI/UX for both user-facing and admin experiences, collaborating closely with frontend and backend developers to ensure the product is intuitive, scalable, and seamless.

My Role

  • Conducted 30+ user interviews and field research to understand user needs and pain points.
  • Defined the product’s information architecture and navigation flows for both front and back office.
  • Led the UX and UI design for the entire platform, translating insights into intuitive interfaces.
  • Crafted 40+ responsive screens in Figma for multiple devices.
  • Built and documented a design system to ensure consistency and scalability.
  • Collaborated closely with product owners, developers, and marketers to deliver a polished, live product.

Business Goal

  • Increase ticket bookings across multiple branches by providing an intuitive online booking experience.
  • Enhance user engagement through gamification features such as points tracking, rankings, and smartwatch integration.
  • Drive additional revenue via gift card sales and in-app incentives.
  • Streamline operations by enabling the back office to efficiently manage user points, histories, and other administrative tasks.
  • Ensure scalability and consistency across all digital touchpoints with a responsive design and a robust design system.

The Challenge

The project involved building a multi-branch gaming ticket booking platform with features like gift cards, player rankings, and smartwatch activity monitoring. The main challenge was to deliver a cohesive and engaging experience for players to book sessions, send gifts, and track gameplay, while also providing a robust back office where admins could manually input points from smartwatch activity, manage user histories, and maintain rankings. The platform also needed to scale effectively to support multiple branches and future feature expansions.

The Process

MoSCoW Method

At the beginning of the project, I applied the MoSCoW method to clearly define priorities for the MVP. This approach helped the team decide which features were essential, which could be postponed, and which would be excluded, ensuring a balance between user needs and business objectives from the outset.

Must Have

  • OTP Login: Secure, password-free authentication for all users.
  • Game Ticket Reservation: Select branch, date, time, and number of people.
  • Gift Card Purchase: Enter recipient’s mobile number and select gift card type.
  • Back Office – Dashboard: Admins can view and manage reservations, gift card sales, and branches.
  • Branch Management: Add, edit, and remove branches; manage branch details.
  • Ticket & Gift Card Management: Track, update, and handle all ticket reservations and gift card transactions.

Should Have

  • Reservation Confirmation: Email/SMS confirmation after ticket purchase.
  • History View: Users can view past gift card purchases and ticket reservations.
  • Branch Info Display: Show branch address and contact details.

Could Have

  • UI Customization: Dark/light mode or minor visual themes.
  • Calendar Integration: Sync reserved dates with user’s personal calendar.
  • Promotional Banners: Highlight special events or gift card offers.

Won’t Have (This Version)

  • Multi-language Support: Enable the website to support multiple languages for users.
  • SEO Optimization: The website will not include SEO features in this version.
  • Set Password for Users: Users cannot set a permanent password; login is OTP-based only.
  • Buy Soft Drinks with Reservations: Purchasing refreshments alongside ticket reservations is not included.

User Flow

The user begins by logging in via a secure OTP, ensuring a quick and password-free authentication. After login, they navigate to the game reservation section and follow a structured flow: first selecting the desired branch, then choosing a time slot and specifying the number of people for the booking, followed by confirming the date and time. Additionally, users can purchase a gift card by entering the recipient’s mobile number and selecting the preferred gift card type. Throughout the flow, the interface provides clear guidance at each step, minimizing errors and offering a seamless experience on both desktop and mobile platforms. This well-structured process ensures efficiency and clarity, making key tasks like reserving tickets or sending gifts intuitive and user-friendly.

jumpo login wireframe

Wireframe – Desktop

The desktop wireframes establish the core layout and hierarchy of the platform, focusing on key sections such as OTP login, game reservation, and gift card purchase. They highlight the placement of navigation, input fields, buttons, and interactive elements, ensuring that users can easily navigate and complete tasks efficiently on larger screens.

jumpo login wireframe home inner pages wireframe profile wireframe

High-Fidelity Prototype – Desktop

The desktop high-fidelity prototype adds full visual design to the wireframes, including typography, colors, buttons, and interactive states. It demonstrates the complete flow, from OTP login to ticket reservation and gift card purchase, while providing interactive feedback and micro-interactions for a realistic user experience.

home inner pages wireframe home inner pages wireframe home inner pages wireframe

Wireframe – Mobile

The mobile wireframes adapt the desktop layout for smaller screens, emphasizing touch-friendly elements and simplified navigation. The design ensures that the OTP login, branch and time selection, and gift card purchase flow remain intuitive and accessible on mobile devices, maintaining a seamless user experience.

home inner pages wireframe

High-Fidelity Prototype – Mobile

The mobile high-fidelity prototype translates the desktop design into a responsive, touch-optimized experience. It maintains the same flow—login via OTP, branch and time selection, booking, and gift card purchase—while ensuring that buttons, inputs, and interactive elements are easy to use on smaller screens, creating a consistent and engaging experience across devices.

home inner pages wireframe

High-Fidelity Prototype – Back Office Panel

The back office high-fidelity prototype is designed to efficiently handle all business operations. It provides administrators with dashboards to monitor reservations, manage gift card sales, and track user activity. The interface focuses on clarity and usability, with intuitive navigation, interactive tables, and forms that allow staff to perform tasks quickly and accurately, ensuring smooth and effective management of the platform.

home inner pages wireframe

Reflection

Working on this project gave me a hands-on opportunity to tackle both user-facing and administrative challenges in a single platform. Designing flows for OTP login, game ticket reservations, and gift card purchases pushed me to think carefully about clarity and efficiency for end users.
Iterating on the high-fidelity prototypes for desktop and mobile helped me explore how to maintain consistency while optimizing for different screen sizes. I also gained valuable experience in translating business requirements into an intuitive back office panel, ensuring administrators could manage reservations and gift card sales effortlessly.
Overall, this project strengthened my ability to combine practical design solutions with user-centered thinking, showing how thoughtful interaction design can make complex systems accessible and enjoyable.

Contact info

Profile Image

That's All For Now. Thank You!
Copyright © 2025. All rights reserved.