screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile contact card management flow examples

Search the library

Blinq: Digital Business Card: Editing a Card

Open recorded flow

  1. Step 1 · 4:12

    Blinq: Digital Business Card: Top navigation bar, followed by a color selection row, a card preview area, action buttons for image customization, and a bottom primary action button.See the flow
    Blinq: Digital Business Card

    Top navigation bar, followed by a color selection row, a card preview area, action buttons for image customization, and a bottom primary action button.

  2. Step 2 · 4:17

    Blinq: Digital Business Card: Top navigation bar followed by a vertical list of text input fields for personal details, a reorder instruction, and a list of contact fields with a bottom action button.See the flow
    Blinq: Digital Business Card

    Top navigation bar followed by a vertical list of text input fields for personal details, a reorder instruction, and a list of contact fields with a bottom action button.

  3. Step 3 · 4:19

    Blinq: Digital Business Card: Top navigation bar, followed by a reorder instruction, a list of editable contact fields, a section for adding new fields, and a fixed bottom preview button.See the flow
    Blinq: Digital Business Card

    Top navigation bar, followed by a reorder instruction, a list of editable contact fields, a section for adding new fields, and a fixed bottom preview button.

  4. Step 4 · 4:28

    Blinq: Digital Business Card: Top navigation bar, instructional header, grid of selectable contact fields, and a large bottom action button.See the flow
    Blinq: Digital Business Card

    Top navigation bar, instructional header, grid of selectable contact fields, and a large bottom action button.

  5. Step 5 · 4:41

    Blinq: Digital Business Card: Top navigation bar followed by a header with logo/handle, then two input fields, and finally a suggestion section with two buttons.See the flow
    Blinq: Digital Business Card

    Top navigation bar followed by a header with logo/handle, then two input fields, and finally a suggestion section with two buttons.

  6. Step 6 · 4:49

    Blinq: Digital Business Card: Top navigation bar, QR code display area, customization options list, and bottom action buttons.See the flow
    Blinq: Digital Business Card

    Top navigation bar, QR code display area, customization options list, and bottom action buttons.

  7. Step 7 · 4:52

    Blinq: Digital Business Card: Header with logo, profile image, user details, contact list with icons, and a bottom action button.See the flow
    Blinq: Digital Business Card

    Header with logo, profile image, user details, contact list with icons, and a bottom action button.

Blinq: Digital Business Card: Adding a New Contact

Open recorded flow

  1. Step 1 · 6:19

    Blinq: Digital Business Card: Top bar with manual entry, central camera viewfinder with permission modal overlay, bottom navigation tabs, and bottom camera controls.See the flow
    Blinq: Digital Business Card

    Top bar with manual entry, central camera viewfinder with permission modal overlay, bottom navigation tabs, and bottom camera controls.

  2. Step 2 · 6:29

    Blinq: Digital Business Card: Top header with text and manual entry, central camera viewfinder, bottom tabbed mode switcher, and bottom control bar.See the flow
    Blinq: Digital Business Card

    Top header with text and manual entry, central camera viewfinder, bottom tabbed mode switcher, and bottom control bar.

  3. Step 3 · 6:37

    Blinq: Digital Business Card: Top navigation bar with close button and tabs, followed by a privacy information banner, a grid of photo thumbnails, and a bottom bar with status and action buttons.See the flow
    Blinq: Digital Business Card

    Top navigation bar with close button and tabs, followed by a privacy information banner, a grid of photo thumbnails, and a bottom bar with status and action buttons.

  4. Step 4 · 6:49

    Blinq: Digital Business Card: Top navigation bar followed by a scan button, a paper card view button, a vertical list of input fields, an AI enrichment toggle, and a bottom action button.See the flow
    Blinq: Digital Business Card

    Top navigation bar followed by a scan button, a paper card view button, a vertical list of input fields, an AI enrichment toggle, and a bottom action button.

  5. Step 5 · 6:56

    Blinq: Digital Business Card: Top navigation bar, followed by contact profile details, with a centered modal overlay containing a text input and action buttons.See the flow
    Blinq: Digital Business Card

    Top navigation bar, followed by contact profile details, with a centered modal overlay containing a text input and action buttons.

  6. Step 6 · 7:04

    Blinq: Digital Business Card: Top navigation bar, text input field, tag creation suggestion, and system keyboard at the bottom.See the flow
    Blinq: Digital Business Card

    Top navigation bar, text input field, tag creation suggestion, and system keyboard at the bottom.

  7. Step 7 · 7:24

    Blinq: Digital Business Card: Top navigation bar followed by a large multi-line text input field, with a footer containing a character count and privacy note.See the flow
    Blinq: Digital Business Card

    Top navigation bar followed by a large multi-line text input field, with a footer containing a character count and privacy note.

  8. Step 8 · 7:38

    Blinq: Digital Business Card: Top red header, contact name and tags, connection details section, notes section, and a bottom row of three action buttons.See the flow
    Blinq: Digital Business Card

    Top red header, contact name and tags, connection details section, notes section, and a bottom row of three action buttons.

Blinq: Digital Business Card: Onboarding & Card Creation

Open recorded flow

  1. Step 1 · 0:35

    Blinq: Digital Business Card: Top navigation and progress bar, followed by a header, two input fields, a primary CTA button, and a numeric keypad at the bottom.See the flow
    Blinq: Digital Business Card

    Top navigation and progress bar, followed by a header, two input fields, a primary CTA button, and a numeric keypad at the bottom.

  2. Step 2 · 0:56

    Blinq: Digital Business Card: Top navigation and progress bar, followed by a header, three input fields, a primary CTA button, and a keyboard at the bottom.See the flow
    Blinq: Digital Business Card

    Top navigation and progress bar, followed by a header, three input fields, a primary CTA button, and a keyboard at the bottom.

  3. Step 3 · 1:05

    Blinq: Digital Business Card: Top navigation bar with close button and tabs, followed by a system privacy banner, a grid of photo thumbnails, and a bottom bar with utility icons.See the flow
    Blinq: Digital Business Card

    Top navigation bar with close button and tabs, followed by a system privacy banner, a grid of photo thumbnails, and a bottom bar with utility icons.

  4. Step 4 · 1:12

    Blinq: Digital Business Card: Top navigation bar with text buttons, followed by a central icon row, and a large central image cropping area.See the flow
    Blinq: Digital Business Card

    Top navigation bar with text buttons, followed by a central icon row, and a large central image cropping area.

  5. Step 5 · 1:17

    Blinq: Digital Business Card: Top navigation with progress bar, header text, central avatar placeholder, two primary action buttons, and a bottom skip link.See the flow
    Blinq: Digital Business Card

    Top navigation with progress bar, header text, central avatar placeholder, two primary action buttons, and a bottom skip link.

  6. Step 6 · 1:26

    Blinq: Digital Business Card: Top navigation bar with text buttons and a rotate icon, followed by a large central image editing area with a crop frame.See the flow
    Blinq: Digital Business Card

    Top navigation bar with text buttons and a rotate icon, followed by a large central image editing area with a crop frame.

  7. Step 7 · 1:59

    Blinq: Digital Business Card: Header text at top, central card preview, color selection carousel below, and a large primary button at the bottom.See the flow
    Blinq: Digital Business Card

    Header text at top, central card preview, color selection carousel below, and a large primary button at the bottom.

  8. Step 8 · 2:00

    Blinq: Digital Business Card: Header text at top, central business card preview, color selection carousel below, and a large primary button at the bottom.See the flow
    Blinq: Digital Business Card

    Header text at top, central business card preview, color selection carousel below, and a large primary button at the bottom.

  9. Step 9 · 2:13

    Blinq: Digital Business Card: Top header with branding, followed by profile image and user details, a list of contact fields, and two bottom action buttons.See the flow
    Blinq: Digital Business Card

    Top header with branding, followed by profile image and user details, a list of contact fields, and two bottom action buttons.

Found an example you like?See the whole story.

See the full library See plans