screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile budget creation flow examples

Search the library

EveryDollar: Budget Management: Creating a Budget

Open recorded flow

  1. Step 1 · 2:12

    EveryDollar: Budget Management: Green header at top, white content card in middle, feedback section below, and bottom navigation bar.See the flow
    EveryDollar: Budget Management

    Green header at top, white content card in middle, feedback section below, and bottom navigation bar.

  2. Step 2 · 2:14

    EveryDollar: Budget Management: The screen is vertically centered with a top navigation icon, a central illustration, a two-line text block, and a primary call-to-action button below.See the flow
    EveryDollar: Budget Management

    The screen is vertically centered with a top navigation icon, a central illustration, a two-line text block, and a primary call-to-action button below.

  3. Step 3 · 2:23

    EveryDollar: Budget Management: Top progress bar, header summary, main content card with income list, and bottom primary action button.See the flow
    EveryDollar: Budget Management

    Top progress bar, header summary, main content card with income list, and bottom primary action button.

  4. Step 4 · 2:29

    EveryDollar: Budget Management: Top progress bar, total remaining budget indicator, two main content cards (Income and Giving), and a bottom primary CTA button.See the flow
    EveryDollar: Budget Management

    Top progress bar, total remaining budget indicator, two main content cards (Income and Giving), and a bottom primary CTA button.

  5. Step 5 · 3:57

    EveryDollar: Budget Management: Top navigation bar with progress indicator, followed by a summary header, a list-based card for insurance, a card for debts, and a bottom-fixed primary action button.See the flow
    EveryDollar: Budget Management

    Top navigation bar with progress indicator, followed by a summary header, a list-based card for insurance, a card for debts, and a bottom-fixed primary action button.

  6. Step 6 · 4:04

    EveryDollar: Budget Management: A modal sheet with a header containing a back button and title, followed by a vertical list of selectable options.See the flow
    EveryDollar: Budget Management

    A modal sheet with a header containing a back button and title, followed by a vertical list of selectable options.

  7. Step 7 · 4:18

    EveryDollar: Budget Management: A centered modal window with a title, a list of input fields, and a primary action button at the bottom.See the flow
    EveryDollar: Budget Management

    A centered modal window with a title, a list of input fields, and a primary action button at the bottom.

  8. Step 8 · 4:27

    EveryDollar: Budget Management: Centered content with an illustration at the top, text in the middle, and a primary action button at the bottom.See the flow
    EveryDollar: Budget Management

    Centered content with an illustration at the top, text in the middle, and a primary action button at the bottom.

  9. Step 9 · 4:30

    EveryDollar: Budget Management: Top navigation back button, followed by a text header, two data cards, and a bottom primary action button.See the flow
    EveryDollar: Budget Management

    Top navigation back button, followed by a text header, two data cards, and a bottom primary action button.

  10. Step 10 · 4:32

    EveryDollar: Budget Management: Top back button, main heading and subtext, central card with list items, and a bottom primary action button.See the flow
    EveryDollar: Budget Management

    Top back button, main heading and subtext, central card with list items, and a bottom primary action button.

EveryDollar: Budget Management: Interacting with the Budget

Open recorded flow

  1. Step 1 · 5:30

    EveryDollar: Budget Management: Top green header with date and tabs, followed by a summary bar, two status cards, and vertical lists for budget categories.See the flow
    EveryDollar: Budget Management

    Top green header with date and tabs, followed by a summary bar, two status cards, and vertical lists for budget categories.

  2. Step 2 · 5:31

    EveryDollar: Budget Management: A modal dialog centered over a dashboard screen containing a header, tabbed navigation, and summary cards.See the flow
    EveryDollar: Budget Management

    A modal dialog centered over a dashboard screen containing a header, tabbed navigation, and summary cards.

  3. Step 3 · 6:34

    EveryDollar: Budget Management: Header with back button, followed by a summary card, a note input, an activity list, and a delete button at the bottom.See the flow
    EveryDollar: Budget Management

    Header with back button, followed by a summary card, a note input, an activity list, and a delete button at the bottom.

  4. Step 4 · 6:36

    EveryDollar: Budget Management: The screen is a modal overlay with a header, a central input card containing three rows of data, a help link, and a bottom-anchored primary action button.See the flow
    EveryDollar: Budget Management

    The screen is a modal overlay with a header, a central input card containing three rows of data, a help link, and a bottom-anchored primary action button.

  5. Step 5 · 6:52

    EveryDollar: Budget Management: A modal bottom sheet containing a header, a calendar grid, two toggle rows, and a large bottom action button.See the flow
    EveryDollar: Budget Management

    A modal bottom sheet containing a header, a calendar grid, two toggle rows, and a large bottom action button.

  6. Step 6 · 7:26

    EveryDollar: Budget Management: Top green header with back button, followed by category summary, a list of settings cards, a note input field, and an activity list at the bottom.See the flow
    EveryDollar: Budget Management

    Top green header with back button, followed by category summary, a list of settings cards, a note input field, and an activity list at the bottom.

EveryDollar: Budget Management: Setting Up Paycheck Planning

Open recorded flow

  1. Step 1 · 4:39

    EveryDollar: Budget Management: Top header with title, followed by an educational card, then a vertical list of transactions, and a bottom navigation bar.See the flow
    EveryDollar: Budget Management

    Top header with title, followed by an educational card, then a vertical list of transactions, and a bottom navigation bar.

  2. Step 2 · 4:43

    EveryDollar: Budget Management: Top header, instructional card, scrollable list of transactions, bottom navigation bar.See the flow
    EveryDollar: Budget Management

    Top header, instructional card, scrollable list of transactions, bottom navigation bar.

  3. Step 3 · 4:58

    EveryDollar: Budget Management: The screen is a modal with a header, descriptive text, a central input card, and a bottom-aligned primary action button.See the flow
    EveryDollar: Budget Management

    The screen is a modal with a header, descriptive text, a central input card, and a bottom-aligned primary action button.

  4. Step 4 · 5:02

    EveryDollar: Budget Management: Header with title, status indicator, list of transaction cards, and bottom navigation bar.See the flow
    EveryDollar: Budget Management

    Header with title, status indicator, list of transaction cards, and bottom navigation bar.

  5. Step 5 · 5:05

    EveryDollar: Budget Management: A modal overlay with a header, a central input card containing three rows of data, a help link, and a bottom-aligned primary action button.See the flow
    EveryDollar: Budget Management

    A modal overlay with a header, a central input card containing three rows of data, a help link, and a bottom-aligned primary action button.

  6. Step 6 · 5:08

    EveryDollar: Budget Management: The screen is a modal sheet with a header, a prompt, a calendar widget, two data rows, a help link, and a primary action button at the bottom.See the flow
    EveryDollar: Budget Management

    The screen is a modal sheet with a header, a prompt, a calendar widget, two data rows, a help link, and a primary action button at the bottom.

Found an example you like?See the whole story.

See the full library See plans