Booking a train in four steps, without leaving the page.

Booking a train ticket is a journey everyone knows and few websites get right: pages that reload at every step, fares nobody understands, a seat assigned at random. The frustration is familiar; the demonstration shows how to avoid it.

The goal: one screen that transforms at each step, readable fares with their conditions under the price, and a coach plan on which you pick your seat, window or aisle, quiet zone or near the bar.

• An opening slideshow with a search card laid over it: departure, arrival, date, passengers, one way or return.
• Timetables: six trains a day in each direction, duration, number, and three fares per train, Essentiel, Flex, Première, with the lowest price flagged.
• The coach plan: free, taken, window or aisle seats, a choice of coach (quiet zone, near the bar, first class), a “Choose for me” button.
• Passengers: name and fare for each, child or senior at a reduced price, e-mail for the tickets.
• Tickets: one card per passenger and per leg, with times, seat and price, clearly marked as having no value.
• Destinations in a carousel, on-board services, commitments and frequently asked questions.

One step at a time, always in the same place. The four-step thread stays visible, the screen is replaced beneath it, and the visitor can go back without losing anything. On a phone, only the current step is spelled out: the others are numbers.

Fares you understand before clicking. Conditions fit in one line under each price. A train that is full in first class says so instead of disappearing.

The plan as the argument. Choosing a seat is the most satisfying moment of the journey: it is the element the care was concentrated on, with drawn seats, the window mark and a colour reserved for the choice.

A company image. The train’s teal and sand livery runs through the eleven images created for the demonstration, from the coastal landscape to the inside of the coach. The geometric Outfit typeface sets the tone of a modern service; Manrope carries the running text.

One HTML page, one stylesheet and a script of about two hundred and fifty lines that computes timetables, prices and coach occupancy from fixed rules, stably for a given route and date. Everything happens in the browser; nothing is sent.

On a real service, those calculations would be replaced by calls to the company’s system: real-time timetables, seat availability, payment and ticket issuing. The interface, the step thread and the coach plan stay the same.

• The complete journey, its source files and its integration into an existing website or its publication.
• The connection to real data: catalogue, availability, prices, payment provider.
• The e-mails and documents generated at each step, tested together.
• Secondary screens: exchange, cancellation, customer account, depending on scope.
• Hands-on explanations and documentation of the calculation rules.

This kind of journey applies to many other bookings: sessions, tables, rooms, rentals, appointments. Scope, price and timing are set out in a quote before starting.