screensdesign

Mobile report analysis flow examples

Noxogy Sleep Tracker: Reviewing a Sleep Report

Open recorded flow
  1. Step 1 · 0:49

    Noxogy Sleep Tracker: Top navigation bar, followed by a status message, a segmented control, a list of recordings, and a bottom navigation bar.See the flow
    Noxogy Sleep Tracker

    Top navigation bar, followed by a status message, a segmented control, a list of recordings, and a bottom navigation bar.

  2. Step 2 · 0:55

    Noxogy Sleep Tracker: Header with date and navigation, followed by a status message, a tab switcher, a list of audio recordings, and a bottom navigation bar.See the flow
    Noxogy Sleep Tracker

    Header with date and navigation, followed by a status message, a tab switcher, a list of audio recordings, and a bottom navigation bar.

  3. Step 3 · 1:14

    Noxogy Sleep Tracker: Top navigation bar followed by a segmented control, a warning message, and a vertical list of data rows.See the flow
    Noxogy Sleep Tracker

    Top navigation bar followed by a segmented control, a warning message, and a vertical list of data rows.

  4. Step 4 · 1:17

    Noxogy Sleep Tracker: Top navigation bar followed by a descriptive text block, a vertical list of selectable items, and a final action button at the bottom.See the flow
    Noxogy Sleep Tracker

    Top navigation bar followed by a descriptive text block, a vertical list of selectable items, and a final action button at the bottom.

SnoreLab : Record Your Snoring: Exploring demo sleep reports

Open recorded flow
  1. Step 1 · 4:40

    SnoreLab : Record Your Snoring: Top header with menu/settings, large central snoring intensity chart, session statistics summary section, and bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    Top header with menu/settings, large central snoring intensity chart, session statistics summary section, and bottom navigation bar.

  2. Step 2 · 4:49

    SnoreLab : Record Your Snoring: A central modal overlay sits on top of a blurred background containing a chart and historical data, with a persistent bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    A central modal overlay sits on top of a blurred background containing a chart and historical data, with a persistent bottom navigation bar.

  3. Step 3 · 4:52

    SnoreLab : Record Your Snoring: Top navigation bar, secondary tab bar, main stacked bar chart, time-range toggle, summary statistics section, and bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    Top navigation bar, secondary tab bar, main stacked bar chart, time-range toggle, summary statistics section, and bottom navigation bar.

  4. Step 4 · 5:01

    SnoreLab : Record Your Snoring: Top navigation bar, followed by a history tab selector, a large bar chart, a time-scale toggle, a summary section with a gauge, and a bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    Top navigation bar, followed by a history tab selector, a large bar chart, a time-scale toggle, a summary section with a gauge, and a bottom navigation bar.

  5. Step 5 · 5:08

    SnoreLab : Record Your Snoring: Top navigation bar, secondary tab bar, main bar chart, time-range toggle, summary statistics card, and bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    Top navigation bar, secondary tab bar, main bar chart, time-range toggle, summary statistics card, and bottom navigation bar.

  6. Step 6 · 5:12

    SnoreLab : Record Your Snoring: Top navigation bar, category selector, central bar chart, toggle switch, summary statistics cards, and bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    Top navigation bar, category selector, central bar chart, toggle switch, summary statistics cards, and bottom navigation bar.

  7. Step 7 · 5:14

    SnoreLab : Record Your Snoring: Top navigation bar, followed by a large stacked bar chart, a segmented control, summary statistics cards, and a bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    Top navigation bar, followed by a large stacked bar chart, a segmented control, summary statistics cards, and a bottom navigation bar.

  8. Step 8 · 5:19

    SnoreLab : Record Your Snoring: Top navigation bar, secondary icon menu, main bar chart, time granularity toggle, summary statistics section, and bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    Top navigation bar, secondary icon menu, main bar chart, time granularity toggle, summary statistics section, and bottom navigation bar.

  9. Step 9 · 5:22

    SnoreLab : Record Your Snoring: Top navigation bar, followed by a tabbed remedy selector, a central bar chart, a toggle for data comparison, a detailed summary card for a specific remedy, and a bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    Top navigation bar, followed by a tabbed remedy selector, a central bar chart, a toggle for data comparison, a detailed summary card for a specific remedy, and a bottom navigation bar.

  10. Step 10 · 5:23

    SnoreLab : Record Your Snoring: Top navigation bar, followed by a horizontal icon menu, a large bar chart, a toggle switch, summary statistics cards, and a bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    Top navigation bar, followed by a horizontal icon menu, a large bar chart, a toggle switch, summary statistics cards, and a bottom navigation bar.

  11. Step 11 · 5:25

    SnoreLab : Record Your Snoring: Top navigation bar, metric selection tabs, large bar chart, toggle switch, summary data cards, circular gauge, and bottom navigation bar.See the flow
    SnoreLab : Record Your Snoring

    Top navigation bar, metric selection tabs, large bar chart, toggle switch, summary data cards, circular gauge, and bottom navigation bar.

Budget app - spending tracker: Viewing Reports and Stats

Open recorded flow
  1. Step 1 · 7:46

    Budget app - spending tracker: Header with close button and title, date range selector, metric dropdown, area chart, and a vertical list of monthly data.See the flow
    Budget app - spending tracker

    Header with close button and title, date range selector, metric dropdown, area chart, and a vertical list of monthly data.

  2. Step 2 · 8:48

    Budget app - spending tracker: Top header with close button, date range selector, category dropdown, line chart, and a vertical list of monthly financial data.See the flow
    Budget app - spending tracker

    Top header with close button, date range selector, category dropdown, line chart, and a vertical list of monthly financial data.

  3. Step 3 · 9:06

    Budget app - spending tracker: Top header with filters, calendar view, summary stats, scrollable transaction list, and bottom navigation.See the flow
    Budget app - spending tracker

    Top header with filters, calendar view, summary stats, scrollable transaction list, and bottom navigation.

  4. Step 4 · 9:28

    Budget app - spending tracker: Top navigation bar, followed by a total summary, a list of grouped transactions, and a bottom action toolbar.See the flow
    Budget app - spending tracker

    Top navigation bar, followed by a total summary, a list of grouped transactions, and a bottom action toolbar.

  5. Step 5 · 10:01

    Budget app - spending tracker: Top navigation bar followed by a donut chart visualization and a list of spending categories.See the flow
    Budget app - spending tracker

    Top navigation bar followed by a donut chart visualization and a list of spending categories.

  6. Step 6 · 11:08

    Budget app - spending tracker: Header with profile and date, large circular progress chart, list of budget category cards, bottom segmented control, and bottom navigation bar.See the flow
    Budget app - spending tracker

    Header with profile and date, large circular progress chart, list of budget category cards, bottom segmented control, and bottom navigation bar.

  7. Step 7 · 11:20

    Budget app - spending tracker: Top header with close/menu icons, a central circular progress chart for the main category, and a vertical list of sub-categories below.See the flow
    Budget app - spending tracker

    Top header with close/menu icons, a central circular progress chart for the main category, and a vertical list of sub-categories below.

Found an example you like?See the whole story.