screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile audio recording flow examples

Search the library

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: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.

  3. Step 3 · 2:11

    Voice Recorder－Audio Memos Арр: Top bar with file name and Done button, central waveform visualization, and a bottom-anchored modal for sharing options.See the flow
    Voice Recorder－Audio Memos Арр

    Top bar with file name and Done button, central waveform visualization, and a bottom-anchored modal for sharing options.

  4. Step 4 · 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.

  5. Step 5 · 2:39

    Voice Recorder－Audio Memos Арр: Top navigation bar, central waveform visualization area, middle action button, lower playback controls, and bottom utility bar.See the flow
    Voice Recorder－Audio Memos Арр

    Top navigation bar, central waveform visualization area, middle action button, lower playback controls, and bottom utility bar.

  6. Step 6 · 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.

  7. Step 7 · 3:35

    Voice Recorder－Audio Memos Арр: Header with title and settings, search bar, vertical list of recording cards, bottom row with import button and floating action button.See the flow
    Voice Recorder－Audio Memos Арр

    Header with title and settings, search bar, vertical list of recording cards, bottom row with import button and floating action button.

  8. Step 8 · 3:49

    Voice Recorder－Audio Memos Арр: A modal sheet overlaying an audio waveform editor background.See the flow
    Voice Recorder－Audio Memos Арр

    A modal sheet overlaying an audio waveform editor background.

  9. Step 9 · 3:59

    Voice Recorder－Audio Memos Арр: Header with title and search bar, followed by a list of recording items, with a bottom sheet overlay covering the lower half of the screen.See the flow
    Voice Recorder－Audio Memos Арр

    Header with title and search bar, followed by a list of recording items, with a bottom sheet overlay covering the lower half of the screen.

  10. Step 10 · 4:24

    Voice Recorder－Audio Memos Арр: Top navigation bar, central waveform visualization, modal overlay, middle control buttons, bottom playback controls, and a bottom scrubber bar.See the flow
    Voice Recorder－Audio Memos Арр

    Top navigation bar, central waveform visualization, modal overlay, middle control buttons, bottom playback controls, and a bottom scrubber bar.

AI Summary - Meeting Notes: Creating a Note via Audio Recording

Open recorded flow

  1. Step 1 · 0:55

    AI Summary - Meeting Notes: Header with title and settings, followed by a tab bar, a central empty state message with a dashed border, and a large floating action button at the bottom.See the flow
    AI Summary - Meeting Notes

    Header with title and settings, followed by a tab bar, a central empty state message with a dashed border, and a large floating action button at the bottom.

  2. Step 2 · 0:57

    AI Summary - Meeting Notes: A modal overlay centered on the screen, containing two distinct sections for different input types.See the flow
    AI Summary - Meeting Notes

    A modal overlay centered on the screen, containing two distinct sections for different input types.

  3. Step 3 · 1:04

    AI Summary - Meeting Notes: Top header with title and settings, navigation tabs below, central empty state area with instructions, and a floating action button at the bottom.See the flow
    AI Summary - Meeting Notes

    Top header with title and settings, navigation tabs below, central empty state area with instructions, and a floating action button at the bottom.

  4. Step 4 · 1:15

    AI Summary - Meeting Notes: Header at the top, audio waveform in the center, and a control panel at the bottom.See the flow
    AI Summary - Meeting Notes

    Header at the top, audio waveform in the center, and a control panel at the bottom.

  5. Step 5 · 1:24

    AI Summary - Meeting Notes: Top header, central waveform area with status, bottom control panel with timer and three action buttons.See the flow
    AI Summary - Meeting Notes

    Top header, central waveform area with status, bottom control panel with timer and three action buttons.

AI Song Generator: Mozart: Record a Custom Voice

Open recorded flow

  1. Step 1 · 4:06

    AI Song Generator: Mozart: The screen consists of a modal overlay on top of a main app interface. The modal contains a title, gender selection row, a custom voice upload section, a grid of premium AI voices, and a bottom sticky action button.See the flow
    AI Song Generator: Mozart

    The screen consists of a modal overlay on top of a main app interface. The modal contains a title, gender selection row, a custom voice upload section, a grid of premium AI voices, and a bottom sticky action button.

  2. Step 2 · 4:13

    AI Song Generator: Mozart: The screen consists of a background main app interface with a centered modal overlay containing an image, text, and a primary action button.See the flow
    AI Song Generator: Mozart

    The screen consists of a background main app interface with a centered modal overlay containing an image, text, and a primary action button.

  3. Step 3 · 4:15

    AI Song Generator: Mozart: Top navigation bar, instructional text, central system permission modal, bottom recording instructions, and a large primary action button at the bottom.See the flow
    AI Song Generator: Mozart

    Top navigation bar, instructional text, central system permission modal, bottom recording instructions, and a large primary action button at the bottom.

  4. Step 4 · 4:17

    AI Song Generator: Mozart: Top navigation bar, instructional header, central text-reading card, status text, and bottom action buttons.See the flow
    AI Song Generator: Mozart

    Top navigation bar, instructional header, central text-reading card, status text, and bottom action buttons.

  5. Step 5 · 4:28

    AI Song Generator: Mozart: Top navigation bar, instructional header, central text reading card, recording status text, and a bottom fixed audio waveform control bar.See the flow
    AI Song Generator: Mozart

    Top navigation bar, instructional header, central text reading card, recording status text, and a bottom fixed audio waveform control bar.

  6. Step 6 · 4:56

    AI Song Generator: Mozart: Top navigation bar, instructional header, central text script container, bottom status text, and a bottom control bar with recording progress.See the flow
    AI Song Generator: Mozart

    Top navigation bar, instructional header, central text script container, bottom status text, and a bottom control bar with recording progress.

  7. Step 7 · 5:24

    AI Song Generator: Mozart: Top navigation bar, main content area with text prompt, bottom recording status bar, and a centered modal dialog.See the flow
    AI Song Generator: Mozart

    Top navigation bar, main content area with text prompt, bottom recording status bar, and a centered modal dialog.

Found an example you like?See the whole story.

See the full library See plans