screensdesign

Mobile document editing flow examples

Tiny Scanner - PDF Scanner App: Advanced Document Editing

Open recorded flow
  1. Step 1 · 2:21

    Tiny Scanner - PDF Scanner App: Top navigation bar, central document preview area, and a bottom sheet overlay for tools.See the flow
    Tiny Scanner - PDF Scanner App

    Top navigation bar, central document preview area, and a bottom sheet overlay for tools.

  2. Step 2 · 2:24

    Tiny Scanner - PDF Scanner App: Top navigation bar, central document preview area, bottom processing overlay with status text, and a bottom toolbar.See the flow
    Tiny Scanner - PDF Scanner App

    Top navigation bar, central document preview area, bottom processing overlay with status text, and a bottom toolbar.

  3. Step 3 · 2:28

    Tiny Scanner - PDF Scanner App: Top navigation bar, document preview card, language selector, scrollable text area, and bottom action bar.See the flow
    Tiny Scanner - PDF Scanner App

    Top navigation bar, document preview card, language selector, scrollable text area, and bottom action bar.

  4. Step 4 · 2:30

    Tiny Scanner - PDF Scanner App: Top navigation bar, document preview area, language selector, scrollable text content area, and bottom action toolbar.See the flow
    Tiny Scanner - PDF Scanner App

    Top navigation bar, document preview area, language selector, scrollable text content area, and bottom action toolbar.

  5. Step 5 · 2:34

    Tiny Scanner - PDF Scanner App: A modal overlay containing a header with a close button, title, and refresh icon, followed by a scrollable vertical list of language options.See the flow
    Tiny Scanner - PDF Scanner App

    A modal overlay containing a header with a close button, title, and refresh icon, followed by a scrollable vertical list of language options.

  6. Step 6 · 2:45

    Tiny Scanner - PDF Scanner App: Top navigation bar, central document preview area, bottom annotation toolbar.See the flow
    Tiny Scanner - PDF Scanner App

    Top navigation bar, central document preview area, bottom annotation toolbar.

  7. Step 7 · 2:55

    Tiny Scanner - PDF Scanner App: Top navigation bar, document preview area with a centered modal dialog, and a system keyboard at the bottom.See the flow
    Tiny Scanner - PDF Scanner App

    Top navigation bar, document preview area with a centered modal dialog, and a system keyboard at the bottom.

  8. Step 8 · 3:00

    Tiny Scanner - PDF Scanner App: Top navigation bar, central document preview area, bottom control panel with sliders, color swatches, and a bottom navigation bar.See the flow
    Tiny Scanner - PDF Scanner App

    Top navigation bar, central document preview area, bottom control panel with sliders, color swatches, and a bottom navigation bar.

  9. Step 9 · 3:12

    Tiny Scanner - PDF Scanner App: Top navigation bar, document preview area with central modal overlay, bottom control panel with sliders and color options, and a bottom navigation bar.See the flow
    Tiny Scanner - PDF Scanner App

    Top navigation bar, document preview area with central modal overlay, bottom control panel with sliders and color options, and a bottom navigation bar.

Scanner App: Genius Scan: Edit Scanned Document

Open recorded flow
  1. Step 1 · 1:02

    Scanner App: Genius Scan: Top navigation bar followed by a scrollable text area containing the OCR results.See the flow
    Scanner App: Genius Scan

    Top navigation bar followed by a scrollable text area containing the OCR results.

  2. Step 2 · 1:10

    Scanner App: Genius Scan: Document preview at the top, followed by a segmented control, transformation tools, a filter carousel, settings toggles, and bottom action buttons.See the flow
    Scanner App: Genius Scan

    Document preview at the top, followed by a segmented control, transformation tools, a filter carousel, settings toggles, and bottom action buttons.

  3. Step 3 · 1:15

    Scanner App: Genius Scan: The screen features a central document preview area with an interactive crop overlay, and a bottom navigation bar containing three text-based buttons.See the flow
    Scanner App: Genius Scan

    The screen features a central document preview area with an interactive crop overlay, and a bottom navigation bar containing three text-based buttons.

  4. Step 4 · 1:17

    Scanner App: Genius Scan: The screen features a large central document preview area with an overlay for cropping, and a bottom navigation bar containing primary actions.See the flow
    Scanner App: Genius Scan

    The screen features a large central document preview area with an overlay for cropping, and a bottom navigation bar containing primary actions.

  5. Step 5 · 1:37

    Scanner App: Genius Scan: Top document preview, middle segmented control and editing tools, bottom action buttons.See the flow
    Scanner App: Genius Scan

    Top document preview, middle segmented control and editing tools, bottom action buttons.

  6. Step 6 · 1:43

    Scanner App: Genius Scan: Document preview at top, followed by editing tools, filter carousel, toggle, and bottom action modal.See the flow
    Scanner App: Genius Scan

    Document preview at top, followed by editing tools, filter carousel, toggle, and bottom action modal.

PDF Scanner AI: Scan Documents: Editing a Document

Open recorded flow
  1. Step 1 · 1:06

    PDF Scanner AI: Scan Documents: Top bar with rotate action, central document preview with cropping overlay, bottom page indicator, and bottom thumbnail strip with finalization button.See the flow
    PDF Scanner AI: Scan Documents

    Top bar with rotate action, central document preview with cropping overlay, bottom page indicator, and bottom thumbnail strip with finalization button.

  2. Step 2 · 1:20

    PDF Scanner AI: Scan Documents: Top navigation bar, central document preview area, bottom brightness control panel with slider.See the flow
    PDF Scanner AI: Scan Documents

    Top navigation bar, central document preview area, bottom brightness control panel with slider.

  3. Step 3 · 1:39

    PDF Scanner AI: Scan Documents: Top navigation bar, large central drawing canvas, color selection row, and bottom action buttons.See the flow
    PDF Scanner AI: Scan Documents

    Top navigation bar, large central drawing canvas, color selection row, and bottom action buttons.

  4. Step 4 · 1:45

    PDF Scanner AI: Scan Documents: Top navigation bar, instruction banner, central document preview area with signature overlay, and bottom toolbar with editing tools and primary action button.See the flow
    PDF Scanner AI: Scan Documents

    Top navigation bar, instruction banner, central document preview area with signature overlay, and bottom toolbar with editing tools and primary action button.

  5. Step 5 · 2:06

    PDF Scanner AI: Scan Documents: Top navigation bar, language selector, scrollable text area, and a bottom action toolbar.See the flow
    PDF Scanner AI: Scan Documents

    Top navigation bar, language selector, scrollable text area, and a bottom action toolbar.

  6. Step 6 · 2:26

    PDF Scanner AI: Scan Documents: Top navigation bar with Cancel, central document preview card with filename and edit icon, and a large bottom action button.See the flow
    PDF Scanner AI: Scan Documents

    Top navigation bar with Cancel, central document preview card with filename and edit icon, and a large bottom action button.

  7. Step 7 · 2:42

    PDF Scanner AI: Scan Documents: Top navigation bar with Cancel, central document preview card, text input field with edit icon, and bottom system keyboard.See the flow
    PDF Scanner AI: Scan Documents

    Top navigation bar with Cancel, central document preview card, text input field with edit icon, and bottom system keyboard.

  8. Step 8 · 2:47

    PDF Scanner AI: Scan Documents: Top navigation bar followed by a scrollable list of language options.See the flow
    PDF Scanner AI: Scan Documents

    Top navigation bar followed by a scrollable list of language options.

  9. Step 9 · 3:06

    PDF Scanner AI: Scan Documents: Top navigation bar with Cancel, central document preview area, bottom horizontal filter selection carousel, and a large primary action button at the bottom.See the flow
    PDF Scanner AI: Scan Documents

    Top navigation bar with Cancel, central document preview area, bottom horizontal filter selection carousel, and a large primary action button at the bottom.

Found an example you like?See the whole story.