Sparki Mobile App UI/UX Specification
Executive Summary
Sparki’s mobile application delivers on-the-go CI/CD management optimized for quick checks, notifications, approvals, and emergency interventions. This specification defines the complete UI/UX system for iOS and Android native apps, emphasizing touch-friendly design, offline capability, and real-time notifications. :::info mobile-philosophy Sparki Mobile Philosophy: “Get what you need in 10 seconds. Approve deployments from anywhere. Know when things break.” Mobile is not a “web view in an app”—it’s a focused, purpose-built experience for developers who need CI/CD status while commuting, in meetings, or away from desk. Focus on: quick glances, one-handed use, push notifications, and critical actions (approvals, rollbacks). :::Part 1: Design System (Mobile-Optimized)
Touch Target Sizing
All interactive elements must meet platform guidelines:- Minimum: 44px × 44px (iOS HIG)
- Recommended: 48px × 48px (Android Material, easier for large hands)
- Spacing between targets: minimum 8px
Simplified Color Palette (Mobile)
Typography (Mobile-Optimized)
- Title: 24px (tighter spacing, fits more on screen)
- Body: 20px (easy to read on small screens)
- Small: 16px (compact)
Bottom Sheet Pattern
Mobile-optimized alternative to modals:- Easier to close with thumb
- Smooth animation (swipe dismissal)
- Content visible beneath (context retained)
- Natural scrolling within sheet
Part 2: Core Screens & Navigation
Tab Navigation (Primary Structure)
- Home: Dashboard (recent builds, deployments, alerts)
- Builds: All builds (filter, search, status)
- Deployments: Deployment approvals + history
- Monitoring: Quick metrics & health status
- Account: Profile, settings, workspaces
Screen 1: Dashboard / Home
Purpose: Quick overview, latest activity, urgent items- Tap to drill down: “Build success rate” → see builds list filtered to failures
- Color-coded indicators (green/yellow/red)
- One-tap access to critical items
- Push notification → tap to jump to pending action
- Deployment approvals show who needs to approve
- Build failures show error summary (not full logs, just headline)
- Pull-to-refresh gesture (drag screen down)
- 1-second delay before refresh completes (feels snappy)
- Show refresh spinner only if > 1 second
Screen 2: Builds List & Build Details
Builds List:- Show only: Status, project/branch, time, commit
- Expand for details (not full modal, just expand item in list)
- Swipe left to quick actions (View, Retry, Cancel)
- Long-press for context menu (Copy commit hash, view on GitHub, etc.)
- Show last 50 lines initially (not first 50, last 50—most relevant)
- Tap “Load more” to see earlier logs
- Syntax highlighting for error patterns (make errors stand out)
- Copy button for each log line (long-press to select multiple)
Screen 3: Deployments & Approval Workflow
Deployments List:- Push notification → tap → bottom sheet slides up
- Minimal friction: See key info + approve button
- One tap to approve (no confirmation dialog)
- Swipe down to dismiss (if accidental)
- Show commits since last version
- Link to GitHub PR/commits
- Show who’s already approved
- Build history (did recent builds pass?)
- In deployment details, prominent rollback button
- Confirm action: “Rollback to v1.2.2?” with version
- One-tap confirm (not “are you sure?” fatigue)
- Show rollback progress in real-time
Screen 4: Monitoring & Alerts
Quick Metrics Dashboard:- No alert fatigue (filter to high-severity only)
- Color-coded: Red (critical), Orange (warning), Green (healthy)
- Direct action buttons: View logs, Rollback, Incident investigation
- Mini charts showing last 24h trend
- Tap to zoom into time range
- No detailed time series (phone screen is small)
- Color: Green (good) → Orange (concerning) → Red (critical)
Screen 5: Account & Settings
Account Tab:Part 3: Push Notifications
REQ-MOBILE-NOTIFY-001: Notification Types & Urgency
High Urgency (Immediate notification, sound + badge):- Deployment approval requested (you specifically need to act)
- Production deployment failed (rollback initiated automatically)
- Build failure blocking merge (critical path)
- Incident alert (error rate spike, SLA violation)
- Build completed (if you opted in for all builds)
- Deployment started/completed (if you’re watching)
- Test warning (flaky tests detected)
- New team member added
- Workspace invite
- API usage warning (approaching quota)
REQ-MOBILE-NOTIFY-002: Notification Actions
Direct replies from notification:- Approve deployment (without opening app)
- Add comment (quick text input from notification)
- View logs (tap → jump to build details)
- Multiple build failures → “3 builds failed. Tap to view.”
- Multiple approvals needed → “You have 2 approvals pending”
Part 4: Offline Support & Resilience
REQ-MOBILE-OFFLINE-001: Offline Capabilities
Read-Only Offline:- View cached builds (from last hour)
- View cached deployments
- View cached alerts
- Show “last updated: 2 hours ago” indicator
- Retry failed requests (exponential backoff)
- Show data staleness indicator
- Allow approvals (queue approval, send when online)
- Show “Reconnecting…” banner
REQ-MOBILE-OFFLINE-002: Progressive Enhancement
- Core feature: View recent builds (works offline)
- Enhanced feature: Real-time updates (requires online)
- Premium feature: Advanced analytics (requires fresh data)
Part 5: Platform-Specific Patterns
iOS-Specific
Navigation:- Back button in top-left (system standard)
- Bottom tab navigation (iOS convention)
- Swipe-back gesture for pop navigation
- 3D touch for quick actions (preview deployment before approving)
- Haptic feedback: Light (tap), Medium (success), Heavy (error)
- Activity indicator style (iOS native spinner)
- Face ID support (biometric login)
- Home indicator safe area (notch/dynamic island aware)
- Status bar color changes with screen
Android-Specific
Navigation:- Hamburger menu (Material Design convention)
- Bottom navigation bar with labels
- Back button (or gesture) for pop
- Material Design transitions (ripple effects, elevation)
- Haptic feedback: Light tick (system default)
- Material spinners and loaders
- Fingerprint support (biometric login)
- SafeArea for system gestures
- Material 3 dynamic theming (match system colors on Android 12+)
Part 6: Performance Targets (Mobile)
REQ-MOBILE-PERFORMANCE-001: Load Times
- App launch: under 2 seconds (cold start)
- Tab switch: under 300ms (cached data)
- Data refresh (builds list): under 1 second
- Notification tap → screen open: under 500ms
- Push notification → receipt: under 5 seconds
REQ-MOBILE-PERFORMANCE-002: Bandwidth Optimization
- Build list: under 50KB per request (gzip)
- Deployment details: under 30KB
- Full logs: stream (not load all at once)
- Images: WebP format, max 100px width thumbnails
REQ-MOBILE-PERFORMANCE-003: Battery & Resource Usage
- Background refresh: every 15 minutes (not draining battery)
- WebSocket: disconnect when app backgrounded
- Reconnect when app foregrounded
- Limit notifications: No more than 1 per minute per category
Part 7: Technology Stack
iOS Implementation
Framework: Swift + SwiftUI (modern, type-safe) Architecture: MVVM (Model-View-ViewModel) State Management: Combine (Apple’s reactive framework) Networking: URLSession + WebSocket Local Storage: CoreData or Realm Push Notifications: APNs (Apple Push Notification service) Testing: XCTest + Swift TestingAndroid Implementation
Framework: Kotlin + Jetpack Compose (modern, type-safe) Architecture: MVVM with clean architecture State Management: StateFlow + SharedFlow Networking: Retrofit + OkHttp + WebSocket Local Storage: Room Database Push Notifications: FCM (Firebase Cloud Messaging) Testing: JUnit + EspressoShared Code (Cross-Platform)
Option A: Shared business logic (recommended for Sparki)Part 8: Accessibility (Mobile)
REQ-MOBILE-ACCESSIBILITY-001: Screen Reader Support
- All buttons have descriptive labels (not just icons)
- Image descriptions for status badges
- Form fields have associated labels
- Dynamic text size support (iOS) and text scaling (Android)
REQ-MOBILE-ACCESSIBILITY-002: Haptic Feedback
- Every action has haptic response (tap feedback)
- Different haptics for success (pattern) vs error (heavy)
- Disable-able in accessibility settings
REQ-MOBILE-ACCESSIBILITY-003: High Contrast Mode
- Support dark mode + light mode
- 4.5:1 color contrast minimum
- Option for bold text in settings
Part 9: Security & Biometrics
REQ-MOBILE-SECURITY-001: Biometric Authentication
- Support Face ID / Touch ID (iOS)
- Support Fingerprint / Face unlock (Android)
- Fallback to password if biometric fails
- Biometric re-prompt every 15 minutes (if inactive)
REQ-MOBILE-SECURITY-002: Data Protection
- All data encrypted at rest (iOS: Keychain, Android: EncryptedSharedPreferences)
- API keys stored securely (never in plaintext)
- Session tokens: 30-minute expiry
- Kill app session if unlock fails 3 times
REQ-MOBILE-SECURITY-003: Certificate Pinning
- Pinning certificate to prevent MITM attacks
- Graceful degradation if certificate updates
- Monitoring for suspicious traffic
Part 10: Onboarding & Deep Linking
REQ-MOBILE-ONBOARDING-001: First Launch
REQ-MOBILE-ONBOARDING-002: Deep Linking
Supported deep links:- Deep link from push notification
- Deep link from email campaign
- Deep link from web (App Clips on iOS)
- Falls back to manual navigation if app doesn’t support
Conclusion
Sparki’s mobile app provides fast, focused access to CI/CD management with emphasis on approvals, alerts, and quick checks. Every design decision prioritizes:- Speed: Launch in 2 seconds, approve in 3 taps
- Accessibility: Touch-friendly, screen reader support
- Reliability: Works offline, graceful degradation online
- Native feel: Platform-specific patterns (iOS/Android)
- Security: Biometric auth, encrypted storage
Document Statistics:
| Metric | Value |
|---|---|
| Screens Specified | 5 primary (Dashboard, Builds, Deployments, Monitoring, Account) |
| Platform-Specific Sections | 2 (iOS, Android) |
| Interaction Patterns | 8+ (Notifications, Approval, Deep linking, Offline, etc.) |
| Touch Target Optimization | 44-48px minimum |
| Accessibility Features | 5+ (Screen reader, Haptics, Contrast, etc.) |
| Push Notification Types | 3 urgency levels |
| Technology Stack Details | Complete (Swift, Kotlin, KMM recommended) |
| Total Words | ~8,000 |
| Status | COMPLETE |
Document History:
| Version | Date | Author | Changes |
|---|---|---|---|
| 1.0 | 2025-12-03 | Sparki Mobile Design | Complete mobile UI/UX specification |