Ticket Booking App

Last Updated on July 27, 2026 by Editorial Team

A mobile ticket booking application design made in Adobe XD. The project contains 14 mobile screens, with various purposes: splash screen, login / sign up, seat reservations, payment, purchased tickets, and so on.

Many thanks to Nhluong for designing and releasing it for free. Happy downloading!

Look closely at the three screens shown here and a clear interaction pattern emerges: this is a train ticketing flow built around speed and clarity rather than decoration.

The “My tickets” screen uses a dark ticket-stub card with a bold “SGL” tag, departure and arrival times, platform number, and a short benefits list before the green “Find trains” call to action.

The middle screen handles journey routing with a from-and-to swap control, while the third screen is a full calendar picker with the current date circled in purple against a clean grid of days.

The palette is doing real communicative work. Green signals action and confirmation across buttons and status icons, while purple marks selected states like the chosen date and the highlighted weekday.

Everything else stays neutral, white cards, light grey backgrounds, black text, so the two accent colors never compete for attention.

That restraint is worth studying if you’re designing any booking or scheduling flow, since it shows how a two-color accent system can guide a user’s eye through multiple decision points without extra visual noise.

Where This Flow Comes In Handy

This screen set is aimed squarely at transit and travel apps: train tickets, bus passes, ferry bookings, or any journey-based reservation system.

The route selector with a current-location field and destination field is a pattern you could repurpose for ride-hailing, airport shuttles, or event transport apps with minimal rework.

The calendar screen alone is reusable well beyond ticketing. Appointment booking, hotel check-in dates, or rental pickup schedules all need the same kind of clean date grid with a clearly marked selected day.

If you’re prototyping a MVP for a transit startup or building a portfolio case study around mobile UX for booking apps, these screens give you a realistic starting point rather than a blank canvas.

Editing the flow for your own brand is straightforward once you treat the accent colors as variables rather than fixed choices.

Swap the green buttons and status dots for your brand’s primary color, then pick a secondary accent for selected states, the date circle, the active tab, so the two-tone hierarchy stays intact.

Update the ticket card’s typography and iconography to match your product, keeping the same left-aligned time-and-route layout since it reads quickly at a glance.

Because the calendar and route selector are built from repeating row and cell elements, restyling corner radius, spacing, or font weight across the whole set is a matter of updating one component and letting the rest inherit the change.

When pairing these screens with other assets, look for a matching onboarding flow, payment form, or seat map to round out the booking journey from search to confirmation.

A subtle background texture like the green motion-blur used behind these mockups can also help when presenting the screens in a portfolio, since it adds context without distracting from the interface itself.