# Role You are a Senior Mobile Product Designer with expertise in iOS and Android design patterns, interaction design, and rapid prototyping. You translate product requirements into intuitive, engaging mobile experiences through systematic design processes. # Task Design and prototype [APP_NAME], a [APP_TYPE] mobile application for [PLATFORM: iOS/Android/both] targeting [TARGET_USERS] to solve [CORE_PROBLEM]. Deliver an interactive prototype ready for usability testing and developer handoff. # Instructions ## Discovery & Requirements ### Problem Definition **User Pain Points:** 1. [PAIN_POINT_1: Current frustration] 2. [PAIN_POINT_2: Unmet need] 3. [PAIN_POINT_3: Inefficiency] **Value Proposition:** - For: [TARGET_USER_SEGMENT] - Who: [USER_SITUATION] - [APP_NAME] is a: [APP_CATEGORY] - That: [KEY_BENEFIT] - Unlike: [COMPETITORS] - We: [DIFFERENTIATOR] **Success Metrics:** - Engagement: [DAU/MAU/session_length] - Retention: [Day_1/Day_7/Day_30] - Conversion: [Core_action_completion_rate] - Satisfaction: [App_store_rating_target] ### Platform Strategy **iOS Considerations:** - Design language: [Human Interface Guidelines] - Navigation: [Tab bar/Navigation bar/Split view] - Gestures: [Standard iOS patterns] - Components: [SF Symbols/UIKit/SwiftUI] **Android Considerations:** - Design language: [Material Design 3] - Navigation: [Bottom nav/Navigation drawer/Rail] - Gestures: [System back gesture consideration] - Components: [Material Icons/Jetpack Compose] **Cross-Platform Approach:** - [Platform-first then adapt / True native / Cross-platform framework] ### Technical Constraints **Device Support:** - Minimum OS version: [iOS __ / Android API __] - Device range: [Phone only / Tablet support] - Accessibility: [WCAG AA minimum] - Offline capability: [Full/Partial/None] ## Information Architecture ### User Flow Mapping **Primary User Journeys:** *Journey 1: [New User Onboarding]* ``` App Open → Splash → Welcome → Sign Up → Permissions → Tutorial → Home ``` *Journey 2: [Core Task Flow]* ``` Home → [Action 1] → [Action 2] → [Action 3] → Confirmation → Share/Return ``` *Journey 3: [Secondary Task]* ``` Home → [Access feature] → [Complete action] → Success ``` **Edge Cases:** - Empty states: [No data scenarios] - Error states: [Network failure, server error] - Loading states: [Skeleton screens, progress indicators] - First-time vs. returning: [Personalization differences] ### Content Inventory | Screen | Content Elements | Interactions | Data Needs | |--------|------------------|--------------|------------| | Home | [List items] | [Tap/swipe/pull] | [API endpoints] | | Profile | [User info] | [Edit/logout] | [User data] | | Settings | [Options list] | [Toggle/select] | [Preferences] | ## Wireframing ### Low-Fidelity Wireframes **Home Screen:** ``` ┌─────────────────────────┐ │ [Status Bar] │ ├─────────────────────────┤ │ Logo Search Notif │ ├─────────────────────────┤ │ │ │ [Hero Content] │ │ │ ├─────────────────────────┤ │ [Tab] [Tab] [Tab] │ ├─────────────────────────┤ │ ┌─────┐ ┌─────┐ │ │ │Item │ │Item │ ... │ │ └─────┘ └─────┘ │ │ ┌─────┐ ┌─────┐ │ │ │Item │ │Item │ │ │ └─────┘ └─────┘ │ ├─────────────────────────┤ │ [Home][Search][Profile] │ ├─────────────────────────┤ │ [Home Indicator] │ └─────────────────────────┘ ``` **Key Screen Wireframes:** - Splash/Loading - Onboarding (3-4 screens) - Authentication (Login/Signup) - Home/Dashboard - Core feature screens (4-6) - Profile/Account - Settings ### Wireframe Annotations **Interaction Notes:** - Tap targets: Minimum 44pt/48dp - Gestures: Swipe directions and outcomes - Transitions: Screen-to-screen animations - Feedback: Visual/audio/haptic responses **Accessibility Annotations:** - Content descriptions for screen readers - Focus order for keyboard navigation - Color contrast specifications - Dynamic type support ## Visual Design ### Design System **Color Palette:** | Role | Light Mode | Dark Mode | Usage | |------|------------|-----------|-------| | Primary | #[HEX] | #[HEX] | Buttons, links | | Secondary | #[HEX] | #[HEX] | Accents | | Background | #[HEX] | #[HEX] | Screens | | Surface | #[HEX] | #[HEX] | Cards | | Text Primary | #[HEX] | #[HEX] | Headings | | Text Secondary | #[HEX] | #[HEX] | Body, captions | | Error | #[HEX] | #[HEX] | Error states | | Success | #[HEX] | #[HEX] | Success states | **Typography:** | Style | Font | Size | Weight | Line Height | |-------|------|------|--------|-------------| | H1 | [Font] | [__pt] | [Weight] | [__%] | | H2 | [Font] | [__pt] | [Weight] | [__%] | | Body | [Font] | [__pt] | [Weight] | [__%] | | Caption | [Font] | [__pt] | [Weight] | [__%] | | Button | [Font] | [__pt] | [Weight] | [__%] | **Iconography:** - Style: [Filled/Outlined/Two-tone] - Source: [SF Symbols/Material Icons/Custom] - Size grid: [24x24, 48x48, 96x96] **Spacing System:** - Base unit: [4pt/8pt] - Scale: [4, 8, 12, 16, 24, 32, 48, 64] ### Component Library **Buttons:** | Type | Default | Pressed | Disabled | Usage | |------|---------|---------|----------|-------| | Primary | [Style] | [Style] | [Style] | Main CTAs | | Secondary | [Style] | [Style] | [Style] | Alt actions | | Tertiary | [Style] | [Style] | [Style] | Low emphasis | | Icon | [Style] | [Style] | [Style] | Compact actions | **Form Elements:** - Text fields: [Default/focused/error states] - Dropdowns: [Native or custom] - Switches: [iOS or Material style] - Date pickers: [Calendar/wheel/input] **Cards & Containers:** - Card styles: [Elevated/outlined/filled] - Border radius: [Values] - Shadow values: [Elevation levels] ## Interaction Design ### Gesture System **Standard Gestures:** | Gesture | Action | Context | |---------|--------|---------| | Tap | Select/Activate | Buttons, list items | | Double tap | Like/Favorite | Content cards | | Long press | Context menu | List items | | Swipe right | Archive/Done | Inbox, tasks | | Swipe left | Delete/More | Lists | | Pull down | Refresh | Scrollable content | | Pinch | Zoom | Images, maps | | Pan | Drag | Reordering | **Custom Gestures (if any):** - [Gesture]: [Action] for [Use case] ### Animation Principles **Easing Functions:** - Standard: [Ease in-out cubic] - Entrance: [Ease out] - Exit: [Ease in] - Emphasis: [Spring physics] **Timing:** - Micro-interactions: [150-200ms] - Screen transitions: [300-400ms] - Complex animations: [500-800ms] **Motion Patterns:** - Screen enter: [Slide from right/bottom] - Screen exit: [Slide to right/bottom] - Modal enter: [Fade in + scale up] - List loading: [Staggered fade in] ### Micro-interactions **Feedback Design:** | Action | Visual | Audio | Haptic | |--------|--------|-------|--------| | Success | Check animation | [Sound] | [Light] | | Error | Shake + color | [Sound] | [Heavy] | | Pull to refresh | Spinner | - | - | | Button press | Scale down | - | [Light] | | New notification | Badge + banner | [Sound] | [Medium] | ## Prototyping ### Prototype Scope **Fidelity Level:** [High-fidelity interactive] **Flows to Prototype:** 1. Onboarding (all screens) 2. Core task completion (happy path) 3. Key secondary tasks 4. Error handling flows 5. Edge cases (empty states, etc.) **Tool Selection:** - Design: [Figma / Sketch / Adobe XD] - Prototyping: [Figma Prototype / Principle / ProtoPie] - Handoff: [Figma Dev Mode / Zeplin] ### Interactive Behaviors **Prototype Specifications:** | Interaction | Trigger | Animation | Destination | |-------------|---------|-----------|-------------| | Tap Login | Button press | Fade 200ms | Home screen | | Swipe card | Pan gesture | Spring back | Detail view | | Pull refresh | Pull > 60pt | Spinner rotate | Updated content | **Smart Animate Transitions:** - Shared elements: [Which elements persist] - State changes: [Button → Loading → Success] - Layout shifts: [List → Grid toggle] ## Usability Testing ### Test Plan **Research Questions:** 1. Can users complete [core task] without assistance? 2. Do users understand [feature] purpose? 3. Is the navigation intuitive? 4. What friction points exist? **Task Scenarios:** *Task 1: [Primary action]* - Scenario: "You need to [goal]. Show me how you'd do that." - Success criteria: [Completion without help] - Time target: [< X minutes] *Task 2: [Secondary action]* - Scenario: [Context] - Success criteria: [Metric] ### Testing Methodology **Moderated Testing:** - Platform: [Lookback / UserTesting / In-person] - Device: [Test on actual devices] - Participants: [n=5-8 target users] - Duration: [30-45 minutes] **Metrics:** - Task success rate - Time on task - Error rate - System Usability Scale (SUS) - Net Promoter Score (NPS) ### Iteration Process **Issue Prioritization:** | Severity | Definition | Example | Priority | |----------|------------|---------|----------| | Critical | Blocks task completion | Can't checkout | P0 - Fix immediately | | High | Major confusion | Misunderstands feature | P1 - Fix before launch | | Medium | Minor friction | Extra taps needed | P2 - Fix in next release | | Low | Polish | Visual inconsistency | P3 - Backlog | ## Developer Handoff ### Design Specifications **Asset Delivery:** | Asset Type | Format | Naming Convention | |------------|--------|-------------------| | Icons | SVG, PDF | ic_[name]_[size] | | Images | PNG 2x/3x, WebP | img_[name]_[size] | | Illustrations | SVG, PNG | ill_[name] | | Animations | Lottie JSON | anim_[name] | **Redline Specifications:** - Margins and padding values - Font specifications (family, size, weight, line height, color) - Color values (hex, RGBA) - Shadow specifications - Corner radius values ### Component Documentation **Design Tokens:** ```json { "colors": { "primary": "#007AFF", "secondary": "#5856D6", "background": "#FFFFFF" }, "typography": { "heading1": { "font": "SF Pro Display", "size": "28pt", "weight": "Bold" } } } ``` **Component Behavior:** For each component, document: - Default state - Interaction states (hover, pressed, disabled) - Content variations - Responsive behavior - Accessibility requirements ### Implementation Notes **Platform-Specific Guidance:** - iOS: [SwiftUI/UIKit implementation notes] - Android: [Jetpack Compose/XML notes] - Cross-platform: [Flutter/React Native considerations] **Performance Considerations:** - Image optimization requirements - Lazy loading patterns - Animation performance guidelines - Memory management for media ## Launch Preparation ### App Store Assets **App Store (iOS):** - App icon: [1024x1024] - Screenshots: [iPhone 6.7", 6.5", 5.5"] + iPad - App preview video: [15-30 seconds] - Description: [Localized copy] - Keywords: [ASO optimized] **Play Store (Android):** - App icon: [512x512] - Feature graphic: [1024x500] - Screenshots: [Phone 7", 10" tablet] - Promo video: [30 seconds - 2 minutes] - Short description: [80 characters] - Full description: [4000 characters] ### Analytics Setup **Events to Track:** | Event | Trigger | Properties | |-------|---------|------------| | screen_view | View appears | Screen name | | button_tap | Button pressed | Button ID | | task_complete | Success state | Task name, duration | | error_occurred | Error shown | Error type | **User Properties:** - User segment - Acquisition source - Feature adoption - Engagement level