screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile expense tracking flow examples

Search the library

EveryDollar: Budget Management: Managing Transactions

Open recorded flow

  1. Step 1 · 10:02

    EveryDollar: Budget Management: Top green header with date and controls, followed by a summary bar, two summary cards, and a vertical list of budget categories.See the flow
    EveryDollar: Budget Management

    Top green header with date and controls, followed by a summary bar, two summary cards, and a vertical list of budget categories.

  2. Step 2 · 10:22

    EveryDollar: Budget Management: Header with navigation, search bar, followed by grouped cards containing lists of selectable items.See the flow
    EveryDollar: Budget Management

    Header with navigation, search bar, followed by grouped cards containing lists of selectable items.

  3. Step 3 · 10:45

    EveryDollar: Budget Management: Top navigation bar followed by a search bar, then a grouped list of budget items categorized by headers.See the flow
    EveryDollar: Budget Management

    Top navigation bar followed by a search bar, then a grouped list of budget items categorized by headers.

  4. Step 4 · 10:53

    EveryDollar: Budget Management: Top navigation bar, large central empty state illustration and text, bottom disabled action button, and a bottom navigation bar.See the flow
    EveryDollar: Budget Management

    Top navigation bar, large central empty state illustration and text, bottom disabled action button, and a bottom navigation bar.

  5. Step 5 · 11:11

    EveryDollar: Budget Management: Top header with search, list of transactions below, and a centered modal overlay at the bottom.See the flow
    EveryDollar: Budget Management

    Top header with search, list of transactions below, and a centered modal overlay at the bottom.

  6. Step 6 · 11:29

    EveryDollar: Budget Management: Green header with search, followed by a 'Deleted' folder card, a date-grouped transaction list, and a bottom navigation bar with a floating action button.See the flow
    EveryDollar: Budget Management

    Green header with search, followed by a 'Deleted' folder card, a date-grouped transaction list, and a bottom navigation bar with a floating action button.

SubPilot: Cancel Subscriptions: Budgeting

Open recorded flow

  1. Step 1 · 4:59

    SubPilot: Cancel Subscriptions: Top header with skip button, bank logo grid, trust signals, FAQ list, primary CTA button, and bottom navigation.See the flow
    SubPilot: Cancel Subscriptions

    Top header with skip button, bank logo grid, trust signals, FAQ list, primary CTA button, and bottom navigation.

  2. Step 2 · 5:11

    SubPilot: Cancel Subscriptions: A centered modal window containing an illustration, a title, a subtitle, and two stacked buttons.See the flow
    SubPilot: Cancel Subscriptions

    A centered modal window containing an illustration, a title, a subtitle, and two stacked buttons.

  3. Step 3 · 5:16

    SubPilot: Cancel Subscriptions: Top header with date navigation, summary cards, tabbed content area with donut chart and category list, bottom action buttons, and bottom navigation bar.See the flow
    SubPilot: Cancel Subscriptions

    Top header with date navigation, summary cards, tabbed content area with donut chart and category list, bottom action buttons, and bottom navigation bar.

  4. Step 4 · 5:33

    SubPilot: Cancel Subscriptions: A centered modal window containing a date picker grid over a dark background with a primary 'Add' button at the bottom.See the flow
    SubPilot: Cancel Subscriptions

    A centered modal window containing a date picker grid over a dark background with a primary 'Add' button at the bottom.

  5. Step 5 · 5:35

    SubPilot: Cancel Subscriptions: A dark background screen with a centered modal containing a calendar picker and a bottom action button.See the flow
    SubPilot: Cancel Subscriptions

    A dark background screen with a centered modal containing a calendar picker and a bottom action button.

  6. Step 6 · 5:54

    SubPilot: Cancel Subscriptions: Header at top, followed by a vertical stack of input fields, and a large primary button at the bottom.See the flow
    SubPilot: Cancel Subscriptions

    Header at top, followed by a vertical stack of input fields, and a large primary button at the bottom.

  7. Step 7 · 6:06

    SubPilot: Cancel Subscriptions: Top date navigation, summary cards, tabbed view, donut chart, category list, floating action buttons, and bottom navigation.See the flow
    SubPilot: Cancel Subscriptions

    Top date navigation, summary cards, tabbed view, donut chart, category list, floating action buttons, and bottom navigation.

  8. Step 8 · 6:09

    SubPilot: Cancel Subscriptions: Header with date navigation, summary cards, tabbed content area with donut chart and list, floating action buttons, and bottom navigation.See the flow
    SubPilot: Cancel Subscriptions

    Header with date navigation, summary cards, tabbed content area with donut chart and list, floating action buttons, and bottom navigation.

Budget app - spending tracker: Adding an Expense Transaction

Open recorded flow

  1. Step 1 · 2:39

    Budget app - spending tracker: Top header, central amount display, budget prompt, category tags, utility row, and numeric keypad.See the flow
    Budget app - spending tracker

    Top header, central amount display, budget prompt, category tags, utility row, and numeric keypad.

  2. Step 2 · 2:43

    Budget app - spending tracker: Top header with title and close button, central display area with current value and sub-tags, and a bottom numeric keypad.See the flow
    Budget app - spending tracker

    Top header with title and close button, central display area with current value and sub-tags, and a bottom numeric keypad.

  3. Step 3 · 2:57

    Budget app - spending tracker: Top header, large amount display, progress bar, category tags, control row, and numeric keypad at the bottom.See the flow
    Budget app - spending tracker

    Top header, large amount display, progress bar, category tags, control row, and numeric keypad at the bottom.

  4. Step 4 · 3:00

    Budget app - spending tracker: Top navigation bar, central configuration modal overlay, bottom numeric keypad.See the flow
    Budget app - spending tracker

    Top navigation bar, central configuration modal overlay, bottom numeric keypad.

  5. Step 5 · 3:08

    Budget app - spending tracker: Top navigation bar with filter and sort controls, followed by a large empty content area with a centered illustration and text, and a floating action button on the right.See the flow
    Budget app - spending tracker

    Top navigation bar with filter and sort controls, followed by a large empty content area with a centered illustration and text, and a floating action button on the right.

  6. Step 6 · 3:10

    Budget app - spending tracker: Top navigation bar, large empty center area with illustration, and a bottom action bar.See the flow
    Budget app - spending tracker

    Top navigation bar, large empty center area with illustration, and a bottom action bar.

  7. Step 7 · 3:19

    Budget app - spending tracker: Top header with title, central amount display, budget prompt, category tags, utility row, and numeric keypad at the bottom.See the flow
    Budget app - spending tracker

    Top header with title, central amount display, budget prompt, category tags, utility row, and numeric keypad at the bottom.

  8. Step 8 · 3:24

    Budget app - spending tracker: Top header, large numeric display, budget prompt, category chips, utility row, and numeric keypad.See the flow
    Budget app - spending tracker

    Top header, large numeric display, budget prompt, category chips, utility row, and numeric keypad.

  9. Step 9 · 3:29

    Budget app - spending tracker: Top header with close/list icons, central amount display, budget prompt, category tag grid, utility row, and numeric keypad.See the flow
    Budget app - spending tracker

    Top header with close/list icons, central amount display, budget prompt, category tag grid, utility row, and numeric keypad.

Found an example you like?See the whole story.

See the full library See plans