screensdesign

Mobile audio transcription flow examples

AI Summary - Meeting Notes: Managing a Note

Open recorded flow
  1. Step 1 · 2:48

    AI Summary - Meeting Notes: Top navigation bar, followed by title/metadata, a segmented control, a central AI summary prompt card, and a bottom playback control bar.See the flow
    AI Summary - Meeting Notes

    Top navigation bar, followed by title/metadata, a segmented control, a central AI summary prompt card, and a bottom playback control bar.

  2. Step 2 · 2:50

    AI Summary - Meeting Notes: A modal sheet containing a header, a text preview box, two toggleable settings rows with format options, and a large primary action button at the bottom.See the flow
    AI Summary - Meeting Notes

    A modal sheet containing a header, a text preview box, two toggleable settings rows with format options, and a large primary action button at the bottom.

  3. Step 3 · 2:59

    AI Summary - Meeting Notes: A bottom sheet modal centered over a note detail view, containing a header, two large action buttons, and a grouped list of secondary actions.See the flow
    AI Summary - Meeting Notes

    A bottom sheet modal centered over a note detail view, containing a header, two large action buttons, and a grouped list of secondary actions.

  4. Step 4 · 3:01

    AI Summary - Meeting Notes: Modal window with header, preview area, two toggleable settings sections, and a bottom action button.See the flow
    AI Summary - Meeting Notes

    Modal window with header, preview area, two toggleable settings sections, and a bottom action button.

  5. Step 5 · 3:06

    AI Summary - Meeting Notes: Top toast notification, header with title/date, segmented control, main text body, AI summary prompt card, and bottom audio playback control bar.See the flow
    AI Summary - Meeting Notes

    Top toast notification, header with title/date, segmented control, main text body, AI summary prompt card, and bottom audio playback control bar.

  6. Step 6 · 3:13

    AI Summary - Meeting Notes: Top navigation bar, note content area with tabbed view, AI summary card, and a bottom sheet modal for customization.See the flow
    AI Summary - Meeting Notes

    Top navigation bar, note content area with tabbed view, AI summary card, and a bottom sheet modal for customization.

Voice Recorder-Audio Memos Арр: Recording & Managing Audio

Open recorded flow
  1. Step 1 · 1:06

    Voice Recorder-Audio Memos Арр: Header at the top, search bar below, central illustration, and two primary action buttons at the bottom.See the flow
    Voice Recorder-Audio Memos Арр

    Header at the top, search bar below, central illustration, and two primary action buttons at the bottom.

  2. Step 2 · 1:21

    Voice Recorder-Audio Memos Арр: Top header, central waveform visualization with timeline, large elapsed time display, and a bottom row of three circular action buttons.See the flow
    Voice Recorder-Audio Memos Арр

    Top header, central waveform visualization with timeline, large elapsed time display, and a bottom row of three circular action buttons.

  3. Step 3 · 1:42

    Voice Recorder-Audio Memos Арр: The screen is vertically organized with a title at the top, a large waveform visualization in the middle, a digital timer below that, and a control bar at the bottom.See the flow
    Voice Recorder-Audio Memos Арр

    The screen is vertically organized with a title at the top, a large waveform visualization in the middle, a digital timer below that, and a control bar at the bottom.

  4. Step 4 · 1:49

    Voice Recorder-Audio Memos Арр: Top header with file name, central waveform visualization, mid-section with Transcribe button and playback info, bottom control cluster with playback buttons and navigation bar.See the flow
    Voice Recorder-Audio Memos Арр

    Top header with file name, central waveform visualization, mid-section with Transcribe button and playback info, bottom control cluster with playback buttons and navigation bar.

  5. Step 5 · 2:19

    Voice Recorder-Audio Memos Арр: Top waveform visualization with editing tools, followed by a bottom-anchored share modal with a centered confirmation pop-up.See the flow
    Voice Recorder-Audio Memos Арр

    Top waveform visualization with editing tools, followed by a bottom-anchored share modal with a centered confirmation pop-up.

  6. Step 6 · 2:26

    Voice Recorder-Audio Memos Арр: Top waveform visualization followed by a bottom-anchored action menu modal.See the flow
    Voice Recorder-Audio Memos Арр

    Top waveform visualization followed by a bottom-anchored action menu modal.

  7. Step 7 · 2:43

    Voice Recorder-Audio Memos Арр: Top navigation bar, central waveform area with modal overlay, and bottom playback control panel.See the flow
    Voice Recorder-Audio Memos Арр

    Top navigation bar, central waveform area with modal overlay, and bottom playback control panel.

  8. Step 8 · 3:01

    Voice Recorder-Audio Memos Арр: Top navigation bar, central waveform visualization, bottom playback controls, and a centered modal overlay.See the flow
    Voice Recorder-Audio Memos Арр

    Top navigation bar, central waveform visualization, bottom playback controls, and a centered modal overlay.

  9. Step 9 · 3:09

    Voice Recorder-Audio Memos Арр: Top navigation bar, central waveform visualization, modal overlay in the middle, playback controls at the bottom, and a bottom navigation bar.See the flow
    Voice Recorder-Audio Memos Арр

    Top navigation bar, central waveform visualization, modal overlay in the middle, playback controls at the bottom, and a bottom navigation bar.

  10. Step 10 · 3:15

    Voice Recorder-Audio Memos Арр: Top navigation bar, followed by a segmented control, a large text area for transcription, and a bottom section containing playback controls and a secondary navigation bar.See the flow
    Voice Recorder-Audio Memos Арр

    Top navigation bar, followed by a segmented control, a large text area for transcription, and a bottom section containing playback controls and a secondary navigation bar.

  11. Step 11 · 3:24

    Voice Recorder-Audio Memos Арр: Top navigation bar, followed by view toggle tabs, a central loading state, a mode switcher, and a bottom playback control bar.See the flow
    Voice Recorder-Audio Memos Арр

    Top navigation bar, followed by view toggle tabs, a central loading state, a mode switcher, and a bottom playback control bar.

  12. Step 12 · 3:31

    Voice Recorder-Audio Memos Арр: Top navigation bar, followed by a tabbed view switcher, a central content area for text, a mode toggle, and a bottom playback control bar.See the flow
    Voice Recorder-Audio Memos Арр

    Top navigation bar, followed by a tabbed view switcher, a central content area for text, a mode toggle, and a bottom playback control bar.

Found an example you like?See the whole story.