screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile travel booking flow examples

Search the library

Expedia: Hotels, Flights, Cars: Booking a Flight

Open recorded flow

  1. Step 1 · 4:12

    Expedia: Hotels, Flights, Cars: Top navigation bar followed by a segmented control, a vertical list of input fields, and a bottom-aligned primary action button.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar followed by a segmented control, a vertical list of input fields, and a bottom-aligned primary action button.

  2. Step 2 · 4:24

    Expedia: Hotels, Flights, Cars: A modal overlay containing a header with a title and cancel button, followed by a scrollable list of destination options.See the flow
    Expedia: Hotels, Flights, Cars

    A modal overlay containing a header with a title and cancel button, followed by a scrollable list of destination options.

  3. Step 3 · 4:41

    Expedia: Hotels, Flights, Cars: Top navigation bar with title, followed by a list of four traveler categories with counters, and a bottom primary action button.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar with title, followed by a list of four traveler categories with counters, and a bottom primary action button.

  4. Step 4 · 4:45

    Expedia: Hotels, Flights, Cars: A centered modal window containing a list of four selectable options followed by a confirmation button at the bottom.See the flow
    Expedia: Hotels, Flights, Cars

    A centered modal window containing a list of four selectable options followed by a confirmation button at the bottom.

  5. Step 5 · 5:05

    Expedia: Hotels, Flights, Cars: Top navigation bar followed by a sort dropdown, then a vertical list of filter categories with checkboxes and time-of-day cards, ending with a full-width bottom action button.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar followed by a sort dropdown, then a vertical list of filter categories with checkboxes and time-of-day cards, ending with a full-width bottom action button.

  6. Step 6 · 5:23

    Expedia: Hotels, Flights, Cars: Header with title and route info, followed by a list of flight cards, and a persistent bottom status bar.See the flow
    Expedia: Hotels, Flights, Cars

    Header with title and route info, followed by a list of flight cards, and a persistent bottom status bar.

  7. Step 7 · 5:35

    Expedia: Hotels, Flights, Cars: Top navigation bar followed by three stacked content cards and a fixed bottom checkout footer.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar followed by three stacked content cards and a fixed bottom checkout footer.

  8. Step 8 · 5:41

    Expedia: Hotels, Flights, Cars: A modal window with a header, a list of price items, a total line, and a disclaimer paragraph at the bottom.See the flow
    Expedia: Hotels, Flights, Cars

    A modal window with a header, a list of price items, a total line, and a disclaimer paragraph at the bottom.

  9. Step 9 · 5:48

    Expedia: Hotels, Flights, Cars: Modal header with close button, informational text block, list of selectable baggage options, and a bottom footer with price summary and primary action button.See the flow
    Expedia: Hotels, Flights, Cars

    Modal header with close button, informational text block, list of selectable baggage options, and a bottom footer with price summary and primary action button.

  10. Step 10 · 6:13

    Expedia: Hotels, Flights, Cars: Header with title, trip summary section, instructions and legal links, primary CTA button, security disclaimer, and a promotional footer card.See the flow
    Expedia: Hotels, Flights, Cars

    Header with title, trip summary section, instructions and legal links, primary CTA button, security disclaimer, and a promotional footer card.

Hotels.com: Book hotels & more: View Hotel Details and Initiate Booking

Open recorded flow

  1. Step 1 · 3:21

    Hotels.com: Book hotels & more: Top navigation bar, search summary header, filter bar, scrollable list of hotel cards, filter chips, and a floating map button.See the flow
    Hotels.com: Book hotels & more

    Top navigation bar, search summary header, filter bar, scrollable list of hotel cards, filter chips, and a floating map button.

  2. Step 2 · 3:28

    Hotels.com: Book hotels & more: Hero image at the top, followed by property title, rating, amenities list, and a sticky bottom action button.See the flow
    Hotels.com: Book hotels & more

    Hero image at the top, followed by property title, rating, amenities list, and a sticky bottom action button.

  3. Step 3 · 3:52

    Hotels.com: Book hotels & more: Header with title and icons, hero image carousel, modal body with selection lists, and a sticky bottom footer for pricing and reservation.See the flow
    Hotels.com: Book hotels & more

    Header with title and icons, hero image carousel, modal body with selection lists, and a sticky bottom footer for pricing and reservation.

  4. Step 4 · 4:00

    Hotels.com: Book hotels & more: Top navigation bar followed by a loyalty status header, a step indicator, a property image carousel, property details, and a date summary card.See the flow
    Hotels.com: Book hotels & more

    Top navigation bar followed by a loyalty status header, a step indicator, a property image carousel, property details, and a date summary card.

  5. Step 5 · 4:08

    Hotels.com: Book hotels & more: Top navigation bar, followed by a list of booking details, date summary, terms section, primary CTA button, and footer security disclosures.See the flow
    Hotels.com: Book hotels & more

    Top navigation bar, followed by a list of booking details, date summary, terms section, primary CTA button, and footer security disclosures.

Expedia: Hotels, Flights, Cars: Booking an Activity

Open recorded flow

  1. Step 1 · 6:46

    Expedia: Hotels, Flights, Cars: Top navigation bar followed by two stacked input cards and a bottom-aligned primary action button.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar followed by two stacked input cards and a bottom-aligned primary action button.

  2. Step 2 · 6:56

    Expedia: Hotels, Flights, Cars: Top navigation bar, promotional banner, followed by a vertical list of activity cards, and a bottom toast notification.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar, promotional banner, followed by a vertical list of activity cards, and a bottom toast notification.

  3. Step 3 · 7:08

    Expedia: Hotels, Flights, Cars: Header with navigation, hero image, activity title and pricing, review summary, feature list, description snippet, map preview, and sticky bottom action button.See the flow
    Expedia: Hotels, Flights, Cars

    Header with navigation, hero image, activity title and pricing, review summary, feature list, description snippet, map preview, and sticky bottom action button.

  4. Step 4 · 7:13

    Expedia: Hotels, Flights, Cars: Top navigation bar followed by a list of tour details, a price summary, a primary CTA button, and a secondary tour option card.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar followed by a list of tour details, a price summary, a primary CTA button, and a secondary tour option card.

  5. Step 5 · 7:21

    Expedia: Hotels, Flights, Cars: Top navigation bar followed by a series of stacked information cards containing booking details, pricing, and traveler information fields.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar followed by a series of stacked information cards containing booking details, pricing, and traveler information fields.

Found an example you like?See the whole story.

See the full library See plans