F1 GETAWAY — Formula 1 Trip Planner UX/UI

Problem & Idea

The problem

Planning a Formula 1 weekend abroad means juggling four disconnected purchases: tickets from the promoter, flights from an airline, a hotel from a booking portal and local experiences from somewhere else entirely. Prices, dates and distance to the circuit never line up, and fans lose hours cross-checking tabs before they can commit to a single race.

The idea

Treat the race weekend as a vacation, not a ticket transaction. One flow starts from the Grand Prix and the date range, then layers accommodation, travel and activities as optional modules with a live running total. Users either build the trip themselves or let an AI assistant propose a complete weekend they can then adjust.

Primary persona

Research distilled into the fan the product is designed around.

Thomas (29)

Product analyst, Prague
Travels 1–2 races per season
Books on desktop, decides in evenings

Expectations

One checkout for the whole weekend
Transparent total, no hidden fees
Hotels ranked by distance to the circuit
Confidence he picked the right grandstand

Pain points

Ticket categories are cryptic and unmapped
Accommodation sells out before he decides
No idea what to do around the race days
Fear of overpaying by booking in the wrong order

Two paths, one checkout

The flow splits immediately after the landing page and reconverges at the summary, so both audiences — the fan who wants control and the fan who wants it solved — end in the same place.

Direct custom build

1Pick race weekend & dates
2Choose ticket type (GA → Grandstand → VIP)
3Add accommodation from filtered results
4Add travel: flight, train or car
5Add local activities & tours
6Review summary → proceed to pay

or

AI assistant flow

1Start with AI planning
2Answer budget, party size & travel style
3Receive a complete pre-built weekend
4Swap or tweak any single module
5Confirm → proceed to pay

Summary & single payment → booking confirmation

F1 GETAWAY user journey flowchart: entry website, homepage, decision on whether the user knows what they are searching for, direct GP selection path and AI assistant questionnaire path, both reconverging at summary, order and payment — Full user journey map — decision points and both booking paths

UX Process — Wireframes

Low fidelity

Grey-box frames mapped the full booking flow, from the landing page through to the confirmation screen.

Low-fidelity wireframe of the Grand Prix selection grid with filters and race cards — F1 GP selection
Filter bar, category pills and a 4-column Grand Prix race card grid.

Low-fidelity wireframe of the travel options step with four transport cards — Travel options
Search/filter bar above four transport selection cards.

Low-fidelity wireframe of the payment step with billing form fields — Payment
Streamlined checkout layout with billing fields and final payment CTA.

Low-fidelity wireframe of the confirmation step with booking recap and actions — Confirmation
Booking confirmation with reference, recap and follow-up actions.

High fidelity

Resolved layouts, spacing and component logic — the stepper, filters and module cards defined before any colour or imagery was applied.

High-fidelity wireframe of the Grand Prix selection grid with date scrubber — GP selection
Date range scrubber above a 4-column Grand Prix grid.

High-fidelity wireframe of the travel options step with transport tabs and filters — Travel options
Transport mode tabs with airline filters and result rows.

High-fidelity wireframe of the accommodation step with hotel result cards — Accommodation
Stay type tabs, option filters and rated hotel result cards.

High-fidelity wireframe of the summary step with module cards and total price — Summary
Module cards, itemised recap and running total before payment.

Type & Colour

Typography

Barlow

Aa Bb Cc — 0123456789

A slightly condensed grotesque with motorsport-signage character: tight headlines, highly legible tabular numbers for prices, dates and race weekend days.

Primary Red

#DC3309

Secondary Slate

#4C4C4C

Light Background

#FEFEFE

Final High-Fidelity UI Design

A unified, step-by-step booking interface designed with dynamic sports typography and clear visual hierarchy.

Final F1 Getaway landing page with dual planning CTAs and special offer cards — Landing & Dual Entry Point
Clear value proposition featuring dual primary CTAs ('Start planning' and 'AI planning'), special offer cards, and feature highlights.

Final Grand Prix destination grid with date strip and starting prices — Grand Prix Destination Grid
4-column destination catalog with interactive date strip, quick filter drawer, and transparent starting prices.

Final accommodation configurator with side filters and hotel comparison cards — Modular Accommodation Configurator
Expanded accordion drawer with inline side filters (price range, circuit distance, amenities) and hotel comparison cards.

Final itinerary summary screen with module stack and total price checkout — Itinerary Summary & Single Checkout
Collapsible weekend module stack (Tickets, Accommodation, Travel, Activities) with live total calculation and primary checkout CTA.

Prague Coding School project, 2025. Research, persona, user journey, wireframes and UI design created entirely by me.

Previous project (SHOOPLE)All projects Next projectR30 Electric Boat