screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile project management flow examples

Search the library

v0: Managing App Project

Open recorded flow

  1. Step 1 · 1:39

    v0: Top header with project info, segmented control for tabs, central content area with privacy options, and bottom action buttons.See the flow
    v0

    Top header with project info, segmented control for tabs, central content area with privacy options, and bottom action buttons.

  2. Step 2 · 1:43

    v0: A centered modal window containing a header with project info, a segmented control, a central icon with descriptive text, and a primary action button at the bottom.See the flow
    v0

    A centered modal window containing a header with project info, a segmented control, a central icon with descriptive text, and a primary action button at the bottom.

  3. Step 3 · 1:55

    v0: Top section lists stocks, middle section lists news, bottom section contains navigation bar and a floating modal.See the flow
    v0

    Top section lists stocks, middle section lists news, bottom section contains navigation bar and a floating modal.

  4. Step 4 · 2:00

    v0: A background list of stocks and news items with a centered, rounded modal menu overlaying the bottom-right portion of the screen.See the flow
    v0

    A background list of stocks and news items with a centered, rounded modal menu overlaying the bottom-right portion of the screen.

  5. Step 5 · 2:10

    v0: A header with a title and close button, a scrollable list of log entries, and a bottom bar with two action buttons. A filter menu is overlaid in the top right.See the flow
    v0

    A header with a title and close button, a scrollable list of log entries, and a bottom bar with two action buttons. A filter menu is overlaid in the top right.

  6. Step 6 · 2:49

    v0: Top navigation bar, centered notification toast, main content list item, and bottom fixed chat input bar.See the flow
    v0

    Top navigation bar, centered notification toast, main content list item, and bottom fixed chat input bar.

  7. Step 7 · 3:03

    v0: A modal window with a header containing a title and close button, followed by two distinct sections of list items representing integrations.See the flow
    v0

    A modal window with a header containing a title and close button, followed by two distinct sections of list items representing integrations.

  8. Step 8 · 3:10

    v0: A modal window with a header containing an icon, title, and close button, a large empty content area, and a fixed bottom action button.See the flow
    v0

    A modal window with a header containing an icon, title, and close button, a large empty content area, and a fixed bottom action button.

  9. Step 9 · 3:33

    v0: Top header with balance, performance chart, stock list, bottom navigation bar, and a floating action menu in the bottom right corner with a centered modal overlay.See the flow
    v0

    Top header with balance, performance chart, stock list, bottom navigation bar, and a floating action menu in the bottom right corner with a centered modal overlay.

  10. Step 10 · 3:37

    v0: Search bar at top, recent items list in middle, credits and user profile at bottom.See the flow
    v0

    Search bar at top, recent items list in middle, credits and user profile at bottom.

Planner 5D: AI Home Design: Managing Project Documents

Open recorded flow

  1. Step 1 · 18:34

    Planner 5D: AI Home Design: Header at top, grid of folder cards in the center, bottom navigation bar.See the flow
    Planner 5D: AI Home Design

    Header at top, grid of folder cards in the center, bottom navigation bar.

  2. Step 2 · 18:37

    Planner 5D: AI Home Design: Top navigation bar, page title, centered empty state card, and bottom navigation bar.See the flow
    Planner 5D: AI Home Design

    Top navigation bar, page title, centered empty state card, and bottom navigation bar.

  3. Step 3 · 18:39

    Planner 5D: AI Home Design: Top navigation bar, main content area with an empty state card, and a bottom sheet overlay for file selection.See the flow
    Planner 5D: AI Home Design

    Top navigation bar, main content area with an empty state card, and a bottom sheet overlay for file selection.

  4. Step 4 · 18:50

    Planner 5D: AI Home Design: Top navigation bar with cancel and tabs, followed by a search bar, a privacy notice card, and a multi-column grid of image thumbnails.See the flow
    Planner 5D: AI Home Design

    Top navigation bar with cancel and tabs, followed by a search bar, a privacy notice card, and a multi-column grid of image thumbnails.

  5. Step 5 · 19:00

    Planner 5D: AI Home Design: Top navigation bar, document preview image, two input fields for naming, and a bottom navigation bar.See the flow
    Planner 5D: AI Home Design

    Top navigation bar, document preview image, two input fields for naming, and a bottom navigation bar.

  6. Step 6 · 19:06

    Planner 5D: AI Home Design: Top navigation bar, header text, grid-like content area with two cards, and a bottom toolbar.See the flow
    Planner 5D: AI Home Design

    Top navigation bar, header text, grid-like content area with two cards, and a bottom toolbar.

  7. Step 7 · 19:13

    Planner 5D: AI Home Design: Top navigation bar, grid of folder cards, bottom action bar.See the flow
    Planner 5D: AI Home Design

    Top navigation bar, grid of folder cards, bottom action bar.

  8. Step 8 · 19:20

    Planner 5D: AI Home Design: Header with navigation, grid of folder cards, and a bottom toolbar with action buttons.See the flow
    Planner 5D: AI Home Design

    Header with navigation, grid of folder cards, and a bottom toolbar with action buttons.

  9. Step 9 · 19:22

    Planner 5D: AI Home Design: Top navigation bar, central folder icon preview, color selection row, and a text input field for the folder name.See the flow
    Planner 5D: AI Home Design

    Top navigation bar, central folder icon preview, color selection row, and a text input field for the folder name.

Planner 5D: AI Home Design: Managing Projects

Open recorded flow

  1. Step 1 · 15:55

    Planner 5D: AI Home Design: Header with status and tabs, followed by a two-column grid of project cards, and a bottom navigation bar.See the flow
    Planner 5D: AI Home Design

    Header with status and tabs, followed by a two-column grid of project cards, and a bottom navigation bar.

  2. Step 2 · 16:13

    Planner 5D: AI Home Design: Header with selection count and tabs, followed by a grid of project cards, and a bottom action bar.See the flow
    Planner 5D: AI Home Design

    Header with selection count and tabs, followed by a grid of project cards, and a bottom action bar.

  3. Step 3 · 16:22

    Planner 5D: AI Home Design: Top header with selection count, tabbed navigation, grid of project cards, centered modal dialog, and bottom system keyboard.See the flow
    Planner 5D: AI Home Design

    Top header with selection count, tabbed navigation, grid of project cards, centered modal dialog, and bottom system keyboard.

  4. Step 4 · 16:27

    Planner 5D: AI Home Design: Top header with selection count and Done button, followed by a tabbed navigation, a grid of project cards, and a bottom-aligned confirmation modal.See the flow
    Planner 5D: AI Home Design

    Top header with selection count and Done button, followed by a tabbed navigation, a grid of project cards, and a bottom-aligned confirmation modal.

Found an example you like?See the whole story.

See the full library See plans