screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile shopping and checkout flow examples

Search the library

Too Good To Go: Save Good Food: Attempting a Purchase

Open recorded flow

  1. Step 1 · 2:51

    Too Good To Go: Save Good Food: A modal overlay centered on the screen, covering the lower portion of the underlying product detail page.See the flow
    Too Good To Go: Save Good Food

    A modal overlay centered on the screen, covering the lower portion of the underlying product detail page.

  2. Step 2 · 2:53

    Too Good To Go: Save Good Food: Header with back button and bakery info, payment section, price summary card, legal disclaimer, and bottom action bar with quantity selector and reserve button.See the flow
    Too Good To Go: Save Good Food

    Header with back button and bakery info, payment section, price summary card, legal disclaimer, and bottom action bar with quantity selector and reserve button.

  3. Step 3 · 2:58

    Too Good To Go: Save Good Food: Top navigation, store header, payment method selection area, order summary, and bottom action bar with a modal overlay.See the flow
    Too Good To Go: Save Good Food

    Top navigation, store header, payment method selection area, order summary, and bottom action bar with a modal overlay.

  4. Step 4 · 3:11

    Too Good To Go: Save Good Food: Header with title and cancel button, followed by a vertical stack of payment input fields, a toggle, a large primary action button, and a numeric keypad at the bottom.See the flow
    Too Good To Go: Save Good Food

    Header with title and cancel button, followed by a vertical stack of payment input fields, a toggle, a large primary action button, and a numeric keypad at the bottom.

  5. Step 5 · 3:27

    Too Good To Go: Save Good Food: Top illustration, centered text block, payment network logos, and a bottom action button.See the flow
    Too Good To Go: Save Good Food

    Top illustration, centered text block, payment network logos, and a bottom action button.

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.

FLYP - Fashion Design Studio: Shopping and Checkout

Open recorded flow

  1. Step 1 · 8:01

    FLYP - Fashion Design Studio: Header with tabs, followed by a central product card, and a bottom navigation bar.See the flow
    FLYP - Fashion Design Studio

    Header with tabs, followed by a central product card, and a bottom navigation bar.

  2. Step 2 · 8:13

    FLYP - Fashion Design Studio: Top navigation bar, large product image, primary purchase button, and a collapsible description section at the bottom.See the flow
    FLYP - Fashion Design Studio

    Top navigation bar, large product image, primary purchase button, and a collapsible description section at the bottom.

  3. Step 3 · 8:23

    FLYP - Fashion Design Studio: Top navigation bar, central product image, bottom configuration modal with size and quantity controls, and a final action button.See the flow
    FLYP - Fashion Design Studio

    Top navigation bar, central product image, bottom configuration modal with size and quantity controls, and a final action button.

  4. Step 4 · 8:29

    FLYP - Fashion Design Studio: Top navigation bar followed by a single product card, a subtotal summary line, and a large bottom-aligned call-to-action button.See the flow
    FLYP - Fashion Design Studio

    Top navigation bar followed by a single product card, a subtotal summary line, and a large bottom-aligned call-to-action button.

  5. Step 5 · 8:34

    FLYP - Fashion Design Studio: Header with back button and cart, followed by a list of items, then collapsible sections for email and shipping address.See the flow
    FLYP - Fashion Design Studio

    Header with back button and cart, followed by a list of items, then collapsible sections for email and shipping address.

Zalando – Online fashion: Purchasing a Gift Card

Open recorded flow

  1. Step 1 · 9:31

    Zalando – Online fashion: Top navigation bar followed by a large hero section with text and image, then a content card, and a bottom navigation bar.See the flow
    Zalando – Online fashion

    Top navigation bar followed by a large hero section with text and image, then a content card, and a bottom navigation bar.

  2. Step 2 · 9:36

    Zalando – Online fashion: Header with navigation, centered gift card preview, grid of value selection buttons, and a custom amount input field at the bottom.See the flow
    Zalando – Online fashion

    Header with navigation, centered gift card preview, grid of value selection buttons, and a custom amount input field at the bottom.

  3. Step 3 · 10:01

    Zalando – Online fashion: Top navigation bar followed by a list of delivery options, then two text input fields for personalization, and a final call-to-action button at the bottom.See the flow
    Zalando – Online fashion

    Top navigation bar followed by a list of delivery options, then two text input fields for personalization, and a final call-to-action button at the bottom.

  4. Step 4 · 10:57

    Zalando – Online fashion: Top navigation bar with progress indicator, followed by delivery info, billing address form fields, and address lookup button.See the flow
    Zalando – Online fashion

    Top navigation bar with progress indicator, followed by delivery info, billing address form fields, and address lookup button.

  5. Step 5 · 11:03

    Zalando – Online fashion: Top navigation bar with Cancel button, followed by a horizontal progress stepper, then two main content sections (Delivery and Billing), and a bottom primary action button.See the flow
    Zalando – Online fashion

    Top navigation bar with Cancel button, followed by a horizontal progress stepper, then two main content sections (Delivery and Billing), and a bottom primary action button.

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.

Found an example you like?See the whole story.

See the full library See plans