screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile trip management flow examples

Search the library

Expedia: Hotels, Flights, Cars: Trip Planning

Open recorded flow

  1. Step 1 · 7:40

    Expedia: Hotels, Flights, Cars: Header with greeting, followed by three service icons, a flight tracking card, a horizontal trip carousel, and a section for recently viewed items, with a bottom navigation bar.See the flow
    Expedia: Hotels, Flights, Cars

    Header with greeting, followed by three service icons, a flight tracking card, a horizontal trip carousel, and a section for recently viewed items, with a bottom navigation bar.

  2. Step 2 · 7:52

    Expedia: Hotels, Flights, Cars: Top navigation bar followed by a grid of interest cards, a horizontal region filter bar, and a vertical list of destination cards.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar followed by a grid of interest cards, a horizontal region filter bar, and a vertical list of destination cards.

  3. Step 3 · 8:00

    Expedia: Hotels, Flights, Cars: Top image carousel followed by a dark-themed text content block and a bottom information card.See the flow
    Expedia: Hotels, Flights, Cars

    Top image carousel followed by a dark-themed text content block and a bottom information card.

  4. Step 4 · 8:23

    Expedia: Hotels, Flights, Cars: Header with back/share, month selector tabs, weather data section, price trend card, search action buttons, and a bottom snackbar.See the flow
    Expedia: Hotels, Flights, Cars

    Header with back/share, month selector tabs, weather data section, price trend card, search action buttons, and a bottom snackbar.

  5. Step 5 · 8:46

    Expedia: Hotels, Flights, Cars: Top hotel carousel, middle category tiles, bottom AI chat prompt, and persistent bottom navigation.See the flow
    Expedia: Hotels, Flights, Cars

    Top hotel carousel, middle category tiles, bottom AI chat prompt, and persistent bottom navigation.

  6. Step 6 · 9:00

    Expedia: Hotels, Flights, Cars: Top navigation bar, followed by a scrollable chat history containing text blocks and a tour card, with suggestion chips and a text input field at the bottom.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar, followed by a scrollable chat history containing text blocks and a tour card, with suggestion chips and a text input field at the bottom.

  7. Step 7 · 9:30

    Expedia: Hotels, Flights, Cars: Top navigation bar, main form area with input and CTA, secondary link card, and bottom navigation bar.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar, main form area with input and CTA, secondary link card, and bottom navigation bar.

  8. Step 8 · 9:40

    Expedia: Hotels, Flights, Cars: Header with title and action, followed by a list of trip cards, a 'Find your booking' link, a bottom snackbar, and a bottom navigation bar.See the flow
    Expedia: Hotels, Flights, Cars

    Header with title and action, followed by a list of trip cards, a 'Find your booking' link, a bottom snackbar, and a bottom navigation bar.

  9. Step 9 · 9:49

    Expedia: Hotels, Flights, Cars: Top navigation bar, followed by trip title and share button, then a central empty state message with a primary CTA, and a feedback section at the bottom, anchored by a bottom navigation bar.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar, followed by trip title and share button, then a central empty state message with a primary CTA, and a feedback section at the bottom, anchored by a bottom navigation bar.

  10. Step 10 · 9:51

    Expedia: Hotels, Flights, Cars: Top navigation bar followed by trip title, action buttons, empty state instructional text, and a bottom action menu.See the flow
    Expedia: Hotels, Flights, Cars

    Top navigation bar followed by trip title, action buttons, empty state instructional text, and a bottom action menu.

  11. Step 11 · 10:33

    Expedia: Hotels, Flights, Cars: Top map header, followed by trip title and share button, empty bookings section, and a saved item card, with a bottom navigation bar.See the flow
    Expedia: Hotels, Flights, Cars

    Top map header, followed by trip title and share button, empty bookings section, and a saved item card, with a bottom navigation bar.

Flight Tracker +: Creating a Trip

Open recorded flow

  1. Step 1 · 7:00

    Flight Tracker +: Top navigation bar with tabs, central empty state illustration and text, floating action button at bottom right, and bottom navigation bar.See the flow
    Flight Tracker +

    Top navigation bar with tabs, central empty state illustration and text, floating action button at bottom right, and bottom navigation bar.

  2. Step 2 · 7:03

    Flight Tracker +: Modal window with a header, an image upload area, two text input fields, a flight addition button, and a bottom primary action button.See the flow
    Flight Tracker +

    Modal window with a header, an image upload area, two text input fields, a flight addition button, and a bottom primary action button.

  3. Step 3 · 7:24

    Flight Tracker +: Header with title and close button, followed by a vertical list of selectable flight cards, ending with a bottom action button.See the flow
    Flight Tracker +

    Header with title and close button, followed by a vertical list of selectable flight cards, ending with a bottom action button.

  4. Step 4 · 7:29

    Flight Tracker +: A modal window with a header, an image upload area, two text input fields, a flight list item, and a bottom-anchored primary action button.See the flow
    Flight Tracker +

    A modal window with a header, an image upload area, two text input fields, a flight list item, and a bottom-anchored primary action button.

Vrbo Vacation Rentals: Managing Saved Trips

Open recorded flow

  1. Step 1 · 3:42

    Vrbo Vacation Rentals: Top back button, central illustration, greeting text, primary CTA button, secondary wishlist card with CTA, and a bottom photo collage.See the flow
    Vrbo Vacation Rentals

    Top back button, central illustration, greeting text, primary CTA button, secondary wishlist card with CTA, and a bottom photo collage.

  2. Step 2 · 3:44

    Vrbo Vacation Rentals: Header with title and action button, followed by a 'Saved' trip card, a 'Wishlist' promotional card, and a bottom grid of inspirational travel photos.See the flow
    Vrbo Vacation Rentals

    Header with title and action button, followed by a 'Saved' trip card, a 'Wishlist' promotional card, and a bottom grid of inspirational travel photos.

  3. Step 3 · 3:46

    Vrbo Vacation Rentals: Top navigation bar with close button, followed by a header, two input fields, and a primary action button.See the flow
    Vrbo Vacation Rentals

    Top navigation bar with close button, followed by a header, two input fields, and a primary action button.

  4. Step 4 · 4:12

    Vrbo Vacation Rentals: Header with title and action button, followed by a list of saved trip cards, and a bottom section for wishlist creation.See the flow
    Vrbo Vacation Rentals

    Header with title and action button, followed by a list of saved trip cards, and a bottom section for wishlist creation.

  5. Step 5 · 4:16

    Vrbo Vacation Rentals: Top navigation bar, followed by trip header, tabbed navigation, empty state illustration/text, and a bottom feedback section.See the flow
    Vrbo Vacation Rentals

    Top navigation bar, followed by trip header, tabbed navigation, empty state illustration/text, and a bottom feedback section.

Found an example you like?See the whole story.

See the full library See plans