A travel booking flow

Findings

1. 01Critical

   Booking state lived only in React memory

   Every field the traveller entered existed in one component's state. A refresh, a crash, a link tapped in error — all of it gone, with no way back.

   The fix

   Persist each step server-side against a draft booking. The traveller returns to where they left, including from another device.

2. 02Critical

   Validation ran only on final submit

   A traveller filled four screens before learning the passport field on screen one was in the wrong format.

   The fix

   Validate per field on blur. The error appears where the mistake was made, while the person is still looking at it.

3. 03Major

   No indication of what happens next

   The flow gave no sense of length. People abandon a process whose end they cannot see far more readily than a long one they can.

   The fix

   A step indicator with the remaining count. Cheap to add, measurably effective.

4. 04Minor

   Back button broke the flow entirely

   Steps were rendered conditionally without routing, so the browser back button exited the booking rather than stepping back.

   The fix

   Give each step a URL. The back button then does what every user already expects.