screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile accommodation booking flow examples

Search the library

Expedia: Hotels, Flights, Cars: Booking a Hotel

Open recorded flow

  1. Step 1 · 1:33

    Expedia: Hotels, Flights, Cars: Top navigation bar with search input, followed by a vertical list of search results, and a system keyboard at the bottom.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar with search input, followed by a vertical list of search results, and a system keyboard at the bottom.

  2. Step 2 · 1:46

    Expedia: Hotels, Flights, Cars: Top navigation tabs, date range display, scrollable calendar grid, flexibility options, and a bottom confirmation button.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation tabs, date range display, scrollable calendar grid, flexibility options, and a bottom confirmation button.

  3. Step 3 · 1:55

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

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

  4. Step 4 · 2:08

    Expedia: Hotels, Flights, Cars: Header with search summary, horizontal filter bar, promotional banner, and a scrollable list of hotel cards with a floating map button.See the flow
    Expedia: Hotels, Flights, Cars

    Header with search summary, horizontal filter bar, promotional banner, and a scrollable list of hotel cards with a floating map button.

  5. Step 5 · 2:37

    Expedia: Hotels, Flights, Cars: Top navigation bar followed by a star rating selector, then a grid of amenity filter cards, and a bottom action button.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar followed by a star rating selector, then a grid of amenity filter cards, and a bottom action button.

  6. Step 6 · 2:47

    Expedia: Hotels, Flights, Cars: Top navigation bar, search summary card, horizontal filter bar, promotional banner, and a vertical list of hotel cards with a floating map button at the bottom.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar, search summary card, horizontal filter bar, promotional banner, and a vertical list of hotel cards with a floating map button at the bottom.

  7. Step 7 · 3:05

    Expedia: Hotels, Flights, Cars: Top image carousel followed by hotel info, rating, amenities list, and a sticky bottom CTA button.See the flow
    Expedia: Hotels, Flights, Cars

    Top image carousel followed by hotel info, rating, amenities list, and a sticky bottom CTA button.

  8. Step 8 · 3:16

    Expedia: Hotels, Flights, Cars: Header with navigation, followed by two summary cards, a large room card with image carousel, and a bottom sticky price/action bar.See the flow
    Expedia: Hotels, Flights, Cars

    Header with navigation, followed by two summary cards, a large room card with image carousel, and a bottom sticky price/action bar.

  9. Step 9 · 3:40

    Expedia: Hotels, Flights, Cars: Top navigation bar, followed by a confirmation banner, a hotel hero card, booking details list, a special requests row, a secondary urgency banner, and a price details section.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar, followed by a confirmation banner, a hotel hero card, booking details list, a special requests row, a secondary urgency banner, and a price details section.

  10. Step 10 · 3:51

    Expedia: Hotels, Flights, Cars: Top navigation bar, followed by a white card containing important information, stay dates, legal disclaimers, a primary CTA button, and a footer with security and payment information.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar, followed by a white card containing important information, stay dates, legal disclaimers, a primary CTA button, and a footer with security and payment information.

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.

Vrbo Vacation Rentals: Searching for Accommodation

Open recorded flow

  1. Step 1 · 1:03

    Vrbo Vacation Rentals: Top navigation bar with close button and search input, followed by a vertical list of location suggestions, and a system keyboard at the bottom.See the flow
    Vrbo Vacation Rentals

    Top navigation bar with close button and search input, followed by a vertical list of location suggestions, and a system keyboard at the bottom.

  2. Step 2 · 1:14

    Vrbo Vacation Rentals: Top navigation bar, date range display, scrollable calendar grid, flexibility options row, and a large bottom confirmation button.See the flow
    Vrbo Vacation Rentals

    Top navigation bar, date range display, scrollable calendar grid, flexibility options row, and a large bottom confirmation button.

  3. Step 3 · 1:22

    Vrbo Vacation Rentals: Top header with close button, followed by two rows for traveler counts, a grid of child age inputs, a checkbox for pets, and a bottom action button.See the flow
    Vrbo Vacation Rentals

    Top header with close button, followed by two rows for traveler counts, a grid of child age inputs, a checkbox for pets, and a bottom action button.

  4. Step 4 · 1:24

    Vrbo Vacation Rentals: Top navigation bar with title, main form area with counters, and a large bottom action button.See the flow
    Vrbo Vacation Rentals

    Top navigation bar with title, main form area with counters, and a large bottom action button.

  5. Step 5 · 1:36

    Vrbo Vacation Rentals: Top search header, horizontal filter bar, informational banners, and a vertical list of property cards with a floating map button at the bottom.See the flow
    Vrbo Vacation Rentals

    Top search header, horizontal filter bar, informational banners, and a vertical list of property cards with a floating map button at the bottom.

  6. Step 6 · 1:40

    Vrbo Vacation Rentals: Top navigation bar followed by a vertical list of filter categories (Availability, Popular, Price, Rooms & spaces) and a bottom sticky footer.See the flow
    Vrbo Vacation Rentals

    Top navigation bar followed by a vertical list of filter categories (Availability, Popular, Price, Rooms & spaces) and a bottom sticky footer.

  7. Step 7 · 1:42

    Vrbo Vacation Rentals: Top navigation bar followed by a scrollable list of filter categories with checkboxes, ending in a fixed bottom action bar.See the flow
    Vrbo Vacation Rentals

    Top navigation bar followed by a scrollable list of filter categories with checkboxes, ending in a fixed bottom action bar.

  8. Step 8 · 1:47

    Vrbo Vacation Rentals: Top navigation bar followed by a vertical list of filter categories and options, ending with a bottom sorting dropdown and a sticky action footer.See the flow
    Vrbo Vacation Rentals

    Top navigation bar followed by a vertical list of filter categories and options, ending with a bottom sorting dropdown and a sticky action footer.

  9. Step 9 · 2:04

    Vrbo Vacation Rentals: Top navigation header, search summary bar, filter row, informational banners, and a scrollable list of property cards with a floating map button.See the flow
    Vrbo Vacation Rentals

    Top navigation header, search summary bar, filter row, informational banners, and a scrollable list of property cards with a floating map button.

Found an example you like?See the whole story.

See the full library See plans