screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile recipe search flow examples

Search the library

Good Food: Recipe Finder: Searching & Filtering Recipes

Open recorded flow

  1. Step 1 · 3:20

    Good Food: Recipe Finder: Search bar at top, followed by tabbed navigation, sort options, and a vertical list of recipe cards, with a bottom navigation bar.See the flow
    Good Food: Recipe Finder

    Search bar at top, followed by tabbed navigation, sort options, and a vertical list of recipe cards, with a bottom navigation bar.

  2. Step 2 · 3:23

    Good Food: Recipe Finder: A search results list in the background with a modal bottom sheet overlaying the bottom half of the screen.See the flow
    Good Food: Recipe Finder

    A search results list in the background with a modal bottom sheet overlaying the bottom half of the screen.

  3. Step 3 · 3:35

    Good Food: Recipe Finder: Top navigation bar, hero video area, recipe title and metadata, description, comments link, info section, and bottom navigation bar.See the flow
    Good Food: Recipe Finder

    Top navigation bar, hero video area, recipe title and metadata, description, comments link, info section, and bottom navigation bar.

  4. Step 4 · 3:42

    Good Food: Recipe Finder: Search bar at top, followed by tabs, results metadata, a vertical list of recipe collection cards, and a bottom navigation bar.See the flow
    Good Food: Recipe Finder

    Search bar at top, followed by tabs, results metadata, a vertical list of recipe collection cards, and a bottom navigation bar.

  5. Step 5 · 3:48

    Good Food: Recipe Finder: Search bar and tabs at the top, followed by an ingredient filter card, a grid of meal type tags, a time filter section, and bottom action buttons.See the flow
    Good Food: Recipe Finder

    Search bar and tabs at the top, followed by an ingredient filter card, a grid of meal type tags, a time filter section, and bottom action buttons.

  6. Step 6 · 3:58

    Good Food: Recipe Finder: Search bar at top, followed by tabs, then two sections of filter pills, and finally two large action buttons at the bottom.See the flow
    Good Food: Recipe Finder

    Search bar at top, followed by tabs, then two sections of filter pills, and finally two large action buttons at the bottom.

  7. Step 7 · 4:04

    Good Food: Recipe Finder: Search bar at top, followed by tabs, then vertical sections for filter categories, and a fixed bottom action bar with navigation.See the flow
    Good Food: Recipe Finder

    Search bar at top, followed by tabs, then vertical sections for filter categories, and a fixed bottom action bar with navigation.

  8. Step 8 · 4:15

    Good Food: Recipe Finder: Search bar at top, followed by tabs, then filter categories (Rating, Servings, Calories) as grids of buttons, with action buttons at the bottom and a navigation bar.See the flow
    Good Food: Recipe Finder

    Search bar at top, followed by tabs, then filter categories (Rating, Servings, Calories) as grids of buttons, with action buttons at the bottom and a navigation bar.

  9. Step 9 · 4:19

    Good Food: Recipe Finder: Search bar at top, followed by tabs, filter chips for calories and authors, and bottom action buttons.See the flow
    Good Food: Recipe Finder

    Search bar at top, followed by tabs, filter chips for calories and authors, and bottom action buttons.

  10. Step 10 · 4:22

    Good Food: Recipe Finder: Top search bar, tabbed navigation, horizontal filter chips, empty state message in center, bottom navigation bar.See the flow
    Good Food: Recipe Finder

    Top search bar, tabbed navigation, horizontal filter chips, empty state message in center, bottom navigation bar.

  11. Step 11 · 4:39

    Good Food: Recipe Finder: Top search bar, followed by tabs, filter chips, a single result card, and a bottom navigation bar.See the flow
    Good Food: Recipe Finder

    Top search bar, followed by tabs, filter chips, a single result card, and a bottom navigation bar.

  12. Step 12 · 4:53

    Good Food: Recipe Finder: Top navigation bar, followed by two ingredient filter sections, a large action button, and a bottom navigation bar.See the flow
    Good Food: Recipe Finder

    Top navigation bar, followed by two ingredient filter sections, a large action button, and a bottom navigation bar.

Good Food: Recipe Finder: Browsing & Saving Recipes

Open recorded flow

  1. Step 1 · 0:50

    Good Food: Recipe Finder: Header with logo and profile, search bar, horizontal filter tabs, section header, featured recipe card, bottom navigation bar.See the flow
    Good Food: Recipe Finder

    Header with logo and profile, search bar, horizontal filter tabs, section header, featured recipe card, bottom navigation bar.

  2. Step 2 · 1:01

    Good Food: Recipe Finder: Top navigation bar, large hero image, recipe title and text, bottom navigation bar.See the flow
    Good Food: Recipe Finder

    Top navigation bar, large hero image, recipe title and text, bottom navigation bar.

  3. Step 3 · 1:03

    Good Food: Recipe Finder: Top navigation bar, large hero image, recipe title and text, floating save notification, bottom navigation bar.See the flow
    Good Food: Recipe Finder

    Top navigation bar, large hero image, recipe title and text, floating save notification, bottom navigation bar.

  4. Step 4 · 1:18

    Good Food: Recipe Finder: A background image of a recipe is partially obscured by a bottom-anchored modal sheet containing a title, description, and an input field.See the flow
    Good Food: Recipe Finder

    A background image of a recipe is partially obscured by a bottom-anchored modal sheet containing a title, description, and an input field.

  5. Step 5 · 1:24

    Good Food: Recipe Finder: Top navigation bar followed by a background image, with a bottom-anchored modal overlay for collection management.See the flow
    Good Food: Recipe Finder

    Top navigation bar followed by a background image, with a bottom-anchored modal overlay for collection management.

  6. Step 6 · 2:24

    Good Food: Recipe Finder: Header with logo and profile, search bar, horizontal filter chips, featured recipe card, and bottom navigation.See the flow
    Good Food: Recipe Finder

    Header with logo and profile, search bar, horizontal filter chips, featured recipe card, and bottom navigation.

  7. Step 7 · 2:30

    Good Food: Recipe Finder: Top header with logo and profile, followed by a horizontal carousel of recipe cards, a section header, and a grid of recipe collection images, ending with a bottom navigation bar.See the flow
    Good Food: Recipe Finder

    Top header with logo and profile, followed by a horizontal carousel of recipe cards, a section header, and a grid of recipe collection images, ending with a bottom navigation bar.

Found an example you like?See the whole story.

See the full library See plans