MysticX Docs

English

简体中文

English

简体中文

Appearance

MysticX Mobile App - Iteration 1 ​

Executive Summary ​

This document outlines the scope and specifications for Iteration 1 of the MysticX mobile app. This iteration focuses on delivering the core AI tarot reading experience with essential features for a minimum viable product.

Target Platforms: iOS 15.1+ and Android 7+ (API 24+) Framework: React Native with Expo SDK 55+ Timeline: 2 weeks (MVP) Release Strategy: TestFlight (iOS) and Google Play Internal Testing

Table of Contents ​

Core Features ​

Essential Features (Iteration 1) ​

FeatureDescriptionPriority
Splash ScreenBranded launch screen with smooth transitionP0
Onboarding Flow3-4 page introduction to key featuresP0
AuthenticationEmail/password, Apple, Google, Facebook loginP0
Tarot ReadingComplete reading flow with AI streamingP0
Card of the DayDaily card draw with insightsP0
Journal/HistoryReading history with search and filtersP0
Basic Profile EditingName, avatar, basic info managementP0
Push NotificationsWeekly guidance, soul journey ready alertsP0
Delete AccountAccount deletion with data handlingP0
Login RequirementMust be logged in to access featuresP0

Technical Requirements ​

  • WiFi Requirement: All features require internet connection
  • Push Notifications: Only for weekly guidance and soul journey when app is not in foreground
  • Payment Integration: Apple App Store IAP + Google Play Billing integration required
  • No Price Increase: Mobile pricing matches web pricing
  • RevenueCat Integration: For subscription management

User Experience & Design ​

Design Principles ​

  1. Mystical, Not Gimmicky — Light theme with subtle gradients, smooth animations. Maintain premium feel from web.
  2. Touch-First — Large tap targets (minimum 44pt), swipe gestures, haptic feedback
  3. Progressive Disclosure — Don't overwhelm. Show essential content, reveal depth on demand
  4. Platform Conventions — iOS system back gesture, Android Material navigation
  5. Streamlined to Core — Mobile space is limited. Every pixel must earn its place

Visual Design ​

  • Color Scheme: Light theme colors matching web UI with gold accents
  • Typography: System fonts with serif accents for card names
  • Animations: Smooth 60fps card interactions with haptic feedback
  • Theme Support: Default light theme with dark mode option

Bottom Tab Bar ​

Tab Bar (bottom):
├── Tab 1: Home           # Start Reading, Spread Grid, Card of Day
├── Tab 2: Journal        # Reading History, Search, Filters  
├── Tab 3: Market         # Card Skins, Reader Unlocks (future)
└── Tab 4: Profile        # Settings, Subscription, Credits, Invites

Tab 1: Home ​

  • Start Reading: Primary CTA with spread selection grid
  • Card of Day: Prominent daily card feature (centered)
  • Quick Actions: Recent readings, favorite spreads

Tab 2: Journal ​

  • Reading History: Chronological list with search
  • Filters: By spread type, date range, reader
  • Reading Details: Full reading view with follow-up chat

Tab 3: Market ​

  • Card Skins: Browse and purchase card back designs
  • Reader Unlocks: Premium AI reader personas
  • Future: Placeholder for v1.1 features

Tab 4: Profile ​

  • Account Info: Name, email, avatar, tier badge
  • Subscription: Current plan, upgrade/manage options
  • Credits: Balance, transaction history, purchase packs
  • Settings: Language, notifications, delete account
  • Invitations: Referral code and sharing

Feature Specifications ​

Splash Screen ​

  • Duration: 2-3 seconds maximum
  • Content: MysticX logo with subtle animation
  • Transition: Smooth fade to onboarding or main app

Onboarding Flow (3-4 pages) ​

  1. Welcome: Introduction to MysticX AI tarot readings
  2. How It Works: Question → Spread → AI interpretation
  3. Features Preview: Daily card, journal, insights
  4. Get Started: Call-to-action to create account or sign in

Authentication ​

  • Email/Password: Traditional signup and login
  • Social Login: Apple Sign In, Google OAuth, Facebook Login
  • Session Management: Persistent login with token refresh
  • Password Reset: Email-based password recovery

Tarot Reading Flow ​

  1. Question Input: Text field with character limit
  2. Spread Selection: Grid of available spreads
  3. Card Selection: Interactive card picking with haptic feedback
  4. AI Streaming: Real-time token delivery with typing indicator
  5. Reading Display: Structured output with expandable sections
  6. Follow-Up Chat: Continue conversation with AI reader

Card of the Day ​

  • Daily Draw: One card per day with animation
  • Insights: Emotional weather, actions, exploration questions
  • Credit Reward: Daily credits based on subscription tier
  • Resonance Tracking: Mark if card resonated with user

Journal/History ​

  • Reading List: Chronological with date grouping
  • Search: By question content or spread type
  • Filters: Date range, spread type, AI reader
  • Reading Details: Full reading with follow-up history
  • Share: Basic sharing functionality

Basic Profile Editing ​

  • Avatar: Upload or select from defaults
  • Name: Display name editing
  • Email: Email address change with verification
  • Password: Change password with current password confirmation

Push Notifications ​

  • Weekly Guidance: Notify when weekly guidance is ready
  • Soul Journey: Alert when soul journey is generated
  • Reading Updates: Important reading-related notifications
  • Settings: User control over notification types

Delete Account ​

  • Confirmation: Multi-step confirmation process
  • Data Handling: Clear explanation of data deletion
  • Grace Period: 7-day recovery window
  • Feedback: Optional reason for leaving

Payment Integration ​

RevenueCat Setup ​

  • Subscriptions: Gold and Diamond plans via IAP
  • Credit Packs: One-time purchases through app stores
  • Cross-Platform Sync: Web and mobile subscription status
  • Restore Purchases: Handle device changes and app reinstalls

Pricing Strategy ​

  • No Price Increase: Mobile prices are identical to web pricing. Users pay the same amount regardless of platform
  • Platform Fees: We absorb Apple/Google 15-30% commission fees entirely. This reduces our margin on mobile purchases but keeps pricing simple and fair for users
  • Small Business Program: Apply for Apple's Small Business Program (15% commission for < $1M revenue) and Google's equivalent to minimize the margin impact
  • Payment Methods: IAP only (no external payment links per App Store policies)

Notifications ​

Push Notifications ​

  • Weekly Guidance Ready: Notify when weekly guidance is generated (only if app not in foreground)
  • Soul Journey Generated: Alert when soul journey is ready (only if app not in foreground)
  • In-App Notifications: All other notifications shown within the app UI
  • Smart Notification Logic: System push only when app is backgrounded/closed

Notification Handling ​

  • Deep Linking: Direct users to relevant screens
  • Badge Management: Update app icon badge count
  • Quiet Hours: Respect user notification preferences
  • Offline Queue: Queue notifications when app is closed

Development Phases ​

Phase 1: Foundation & Authentication (Week 1) ​

  • Expo project setup with TypeScript
  • Navigation structure with tab bar
  • API client integration
  • Authentication flow implementation (email, Apple, Google, Facebook)
  • RevenueCat payment integration setup
  • Basic UI components and styling

Phase 2: Core Features & Polish (Week 2) ​

  • Tarot reading flow implementation
  • Card selection animations
  • AI streaming integration
  • Reading display components
  • Card of the Day functionality
  • Reading journal/history
  • Basic profile editing
  • Push notification setup for weekly guidance & soul journey
  • Final testing and bug fixes

Success Metrics ​

Technical Metrics ​

  • App Launch Time: < 3 seconds
  • Reading Completion Rate: > 80%
  • Crash Rate: < 1%
  • API Response Time: < 2 seconds

User Engagement ​

  • Daily Active Users: Target 20% of web DAU
  • Reading Frequency: 2+ readings per active user
  • Card of Day Engagement: > 60% daily completion
  • Retention: 40% Day 1, 20% Day 7, 10% Day 30

Business Metrics ​

  • Conversion Rate: Web → Mobile app installs
  • Subscription Rate: Mobile subscription adoption
  • User Satisfaction: App Store rating > 4.5 stars
  • Feature Adoption: Core feature usage rates

Technical Considerations ​

Performance ​

  • Image Optimization: Lazy loading for card images
  • Animation Performance: 60fps on target devices
  • Memory Management: Efficient component lifecycle
  • Network Optimization: Request caching and retry logic

Security ​

  • Token Storage: Secure storage for authentication tokens
  • API Security: HTTPS with certificate pinning
  • Data Privacy: Compliance with privacy policies
  • Payment Security: RevenueCat handles IAP security

Accessibility ​

  • Screen Reader: VoiceOver and TalkBack support
  • Dynamic Type: Support for system font size
  • High Contrast: Ensure readability in all modes
  • Motor Accessibility: Large tap targets and gesture alternatives

Next Steps ​

  1. Project Setup: Initialize Expo project with required dependencies
  2. Design System: Create component library with design tokens
  3. API Integration: Set up authentication and reading APIs
  4. User Testing: Early testing with internal team
  5. Beta Preparation: Prepare TestFlight and Play Console setup

This iteration provides a solid foundation for the MysticX mobile experience while maintaining the premium quality and mystical aesthetic of the web platform.

Internal documentation for MysticX team

© 2026 Starai Labs