Skip to content

UX_SCENARIOS.md

Latest commit

 

History

History
395 lines (355 loc) · 30.7 KB

UX_SCENARIOS.md

File metadata and controls

395 lines (355 loc) · 30.7 KB

🎨 UX Scenarios Documentation

Overview

This document describes the complete user experience flows for the Linked app across different platforms and scenarios.

Scenario 1: First-Time Setup

Flow

┌─────────────────────────────────────────────────────────────────┐
│                        WELCOME SCREEN                            │
│                                                                  │
│                         🔗 Linked                                │
│                                                                  │
│           Exchange data with a simple touch                      │
│                                                                  │
│                    [Get Started]                                 │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                     PERMISSION REQUEST                           │
│                                                                  │
│        📱 Linked needs access to:                                │
│                                                                  │
│        ☐ Bluetooth - to discover nearby devices                 │
│        ☐ Location - required for BLE scanning                   │
│        ☐ Notifications - to alert you of exchanges              │
│                                                                  │
│                    [Allow All]                                   │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                      CREATE PROFILE                              │
│                                                                  │
│        👤 Create your exchange profile                          │
│                                                                  │
│        Name: [________________]                                  │
│        Email: [________________]                                 │
│        Phone: [________________]                                 │
│        Company: [________________]                               │
│                                                                  │
│        ☑ I want to share: Contact info                          │
│                                                                  │
│                    [Continue]                                    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                    SETUP COMPLETE                                │
│                                                                  │
│                         ✅                                       │
│                                                                  │
│              You're ready to exchange!                           │
│                                                                  │
│        💡 Tip: Add the widget to your home screen               │
│           for quick access                                       │
│                                                                  │
│                    [Go to Home]                                  │
└─────────────────────────────────────────────────────────────────┘

Scenario 2: Initiating Exchange (iOS)

Option A: From App

┌─────────────────────────────────────────────────────────────────┐
│ ≡                      HOME                              👤     │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│     ┌─────────────────────────────────────────────────────┐     │
│     │                                                      │     │
│     │              Your Exchange Card                      │     │
│     │                                                      │     │
│     │         👤 John Doe                                  │     │
│     │         📧 john@example.com                          │     │
│     │         📱 +1 234 567 8900                          │     │
│     │         🏢 Acme Inc.                                 │     │
│     │                                                      │     │
│     └─────────────────────────────────────────────────────┘     │
│                                                                  │
│                                                                  │
│     ┌─────────────────────────────────────────────────────┐     │
│     │                                                      │     │
│     │         🔄 TAP TO EXCHANGE                          │     │
│     │                                                      │     │
│     │    Hold phones close together to share              │     │
│     │                                                      │     │
│     └─────────────────────────────────────────────────────┘     │
│                                                                  │
├─────────────────────────────────────────────────────────────────┤
│    🏠 Home      📋 History      ⚙️ Settings                     │
└─────────────────────────────────────────────────────────────────┘

Option B: iOS Home Screen Widget

┌─────────────────────────────────────────────────────────────────┐
│                    iOS HOME SCREEN                               │
│                                                                  │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐        │
│  │ Messages │  │  Photos  │  │  Safari  │  │   Maps   │        │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘        │
│                                                                  │
│  ┌────────────────────────────────────────────┐                 │
│  │  🔗 Linked                                 │                 │
│  │                                            │                 │
│  │  ┌────────────────────────────────────┐   │                 │
│  │  │      TAP TO EXCHANGE               │   │                 │
│  │  │                                    │   │ ◄── Widget      │
│  │  │          👆 Touch                  │   │                 │
│  │  └────────────────────────────────────┘   │                 │
│  └────────────────────────────────────────────┘                 │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Option C: Apple Wallet Pass

┌─────────────────────────────────────────────────────────────────┐
│                      APPLE WALLET                                │
│                                                                  │
│  ┌────────────────────────────────────────────────────────┐     │
│  │                                                         │     │
│  │    🔗 LINKED                                           │     │
│  │    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━         │     │
│  │                                                         │     │
│  │    👤 John Doe                                          │     │
│  │    📧 john@example.com                                  │     │
│  │                                                         │     │
│  │    ┌─────────────────────────────────────────────┐     │     │
│  │    │               [QR CODE]                      │     │     │
│  │    │                                              │     │     │
│  │    │              For NFC backup                  │     │     │
│  │    └─────────────────────────────────────────────┘     │     │
│  │                                                         │     │
│  │              Double-click to share                      │     │
│  │                                                         │     │
│  └────────────────────────────────────────────────────────┘     │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Scenario 3: Initiating Exchange (Android)

Option A: NFC Trigger

┌─────────────────────────────────────────────────────────────────┐
│                    ANDROID - NFC MODE                            │
│                                                                  │
│              ┌────────────────────────────┐                     │
│              │                            │                     │
│              │     📱 ← → 📱              │                     │
│              │                            │                     │
│              │   Touch phones together    │                     │
│              │                            │                     │
│              └────────────────────────────┘                     │
│                                                                  │
│  When NFC tags are detected:                                    │
│  1. App launches automatically                                  │
│  2. Exchange begins immediately via BLE                         │
│  3. NFC just triggers, BLE transfers data                       │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Option B: Quick Settings Tile

┌─────────────────────────────────────────────────────────────────┐
│                 ANDROID QUICK SETTINGS                           │
│                                                                  │
│  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐        │
│  │  WiFi  │ │Bluetooth│ │  Auto  │ │Flashlight│ │ Linked │        │
│  │   ✓    │ │   ✓    │ │Rotate  │ │        │ │   🔗   │        │
│  └────────┘ └────────┘ └────────┘ └────────┘ └────────┘        │
│                                                                  │
│  Tap "Linked" tile to start exchange mode                       │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Scenario 4: Exchange in Progress

┌─────────────────────────────────────────────────────────────────┐
│                     SCANNING...                                  │
│                                                                  │
│                                                                  │
│                         ◉                                        │
│                       ╱   ╲                                      │
│                      ╱     ╲                                     │
│                     ◉   📱   ◉                                   │
│                      ╲     ╱                                     │
│                       ╲   ╱                                      │
│                         ◉                                        │
│                                                                  │
│             Looking for nearby devices...                        │
│                                                                  │
│                     [Cancel]                                     │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼ (Device found)
┌─────────────────────────────────────────────────────────────────┐
│                     CONNECTING...                                │
│                                                                  │
│                                                                  │
│                    📱 ←──────→ 📱                                │
│                                                                  │
│              Found: Jane's iPhone                                │
│              Establishing secure connection...                   │
│                                                                  │
│                     [Cancel]                                     │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼ (Connected)
┌─────────────────────────────────────────────────────────────────┐
│                     EXCHANGING...                                │
│                                                                  │
│                                                                  │
│                    📱 ⟺⟺⟺⟺⟺ 📱                                │
│                                                                  │
│              Connected to: Jane's iPhone                         │
│                                                                  │
│              ████████████████░░░░░░░░  67%                      │
│                                                                  │
│              Sending: Your profile                               │
│              Receiving: Jane's profile                           │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Scenario 5: Exchange Complete - Save Dialog

┌─────────────────────────────────────────────────────────────────┐
│                    EXCHANGE COMPLETE ✓                           │
│                                                                  │
│  ┌────────────────────────────────────────────────────────┐     │
│  │                                                         │     │
│  │              📋 RECEIVED DATA                           │     │
│  │              ━━━━━━━━━━━━━━━━━                          │     │
│  │                                                         │     │
│  │              👤 Jane Smith                              │     │
│  │              📧 jane.smith@company.com                  │     │
│  │              📱 +1 555 123 4567                         │     │
│  │              🏢 Tech Corp                               │     │
│  │              💼 Product Manager                         │     │
│  │                                                         │     │
│  │              🔗 linkedin.com/in/janesmith               │     │
│  │                                                         │     │
│  └────────────────────────────────────────────────────────┘     │
│                                                                  │
│     ┌──────────────────┐    ┌──────────────────┐                │
│     │                  │    │                  │                │
│     │     💾 Save      │    │     ✕ Close     │                │
│     │                  │    │                  │                │
│     └──────────────────┘    └──────────────────┘                │
│                                                                  │
│  Save to add this contact to your exchange history              │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Scenario 6: Saved Confirmation

┌─────────────────────────────────────────────────────────────────┐
│                                                                  │
│                                                                  │
│                         ✅                                       │
│                                                                  │
│                    Contact Saved!                                │
│                                                                  │
│              Jane Smith has been added to                        │
│              your exchange history                               │
│                                                                  │
│     ┌──────────────────────────────────────────────────┐        │
│     │  📇 Add to Contacts  │  📤 Share  │  🏠 Home    │        │
│     └──────────────────────────────────────────────────┘        │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Scenario 7: Exchange History

┌─────────────────────────────────────────────────────────────────┐
│ ←                    HISTORY                             🔍     │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  TODAY                                                          │
│  ┌────────────────────────────────────────────────────────┐     │
│  │ 👤 Jane Smith              📧 ↗               2:30 PM │     │
│  │    Tech Corp                                           │     │
│  └────────────────────────────────────────────────────────┘     │
│                                                                  │
│  YESTERDAY                                                      │
│  ┌────────────────────────────────────────────────────────┐     │
│  │ 👤 Bob Johnson             📧 ↗               4:15 PM │     │
│  │    Design Studio                                       │     │
│  └────────────────────────────────────────────────────────┘     │
│  ┌────────────────────────────────────────────────────────┐     │
│  │ 👤 Alice Chen              📧 ↗              11:20 AM │     │
│  │    Startup Inc                                         │     │
│  └────────────────────────────────────────────────────────┘     │
│                                                                  │
│  DECEMBER 8                                                     │
│  ┌────────────────────────────────────────────────────────┐     │
│  │ 👤 Mike Wilson             📧 ↗               9:45 AM │     │
│  │    Consulting Co                                       │     │
│  └────────────────────────────────────────────────────────┘     │
│                                                                  │
├─────────────────────────────────────────────────────────────────┤
│    🏠 Home      📋 History      ⚙️ Settings                     │
└─────────────────────────────────────────────────────────────────┘

Error Scenarios

Bluetooth Disabled

┌─────────────────────────────────────────────────────────────────┐
│                                                                  │
│                         ⚠️                                       │
│                                                                  │
│               Bluetooth is turned off                            │
│                                                                  │
│        Linked needs Bluetooth to discover                        │
│        nearby devices and exchange data                          │
│                                                                  │
│              [Open Settings]   [Cancel]                          │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

No Device Found

┌─────────────────────────────────────────────────────────────────┐
│                                                                  │
│                         😕                                       │
│                                                                  │
│              No devices found nearby                             │
│                                                                  │
│        Make sure the other person also has                       │
│        Linked open and ready to exchange                         │
│                                                                  │
│                [Try Again]   [Cancel]                            │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

Connection Lost

┌─────────────────────────────────────────────────────────────────┐
│                                                                  │
│                         ❌                                       │
│                                                                  │
│               Connection was lost                                │
│                                                                  │
│        The exchange couldn't be completed.                       │
│        Please try again.                                         │
│                                                                  │
│                     [Retry]                                      │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘