Reflect/docs/ASO-Visual-Assets.md

Reflect App - Visual Asset Optimization Guide

Overview

Visual assets account for a significant portion of App Store conversion. This guide provides recommendations for screenshots, app preview videos, and app icon optimization.

---

Screenshot Strategy

iOS Screenshot Requirements

Device	Size	Quantity
iPhone 6.7"	1290 x 2796	Up to 10
iPhone 6.5"	1242 x 2688	Up to 10
iPhone 5.5"	1242 x 2208	Up to 10
iPad Pro 12.9"	2048 x 2732	Up to 10

Minimum Required: 3 screenshots per device Recommended: 6-8 screenshots (first 3 are most critical)

---

Screenshot Sequence (Recommended Order)

Screenshot 1: Hero Shot - Live Activity

Goal: Immediately differentiate from competitors

Visual Elements:

• iPhone showing Lock Screen with Live Activity
• Dynamic Island visible at top
• Mood streak prominently displayed
• Caption: "Track moods from your Lock Screen"

Color Scheme: Use the Neon or iFeel theme for visual pop

---

Screenshot 2: Widget Showcase

Goal: Show home screen integration

Visual Elements:

• Home screen with small, medium, and large widgets
• Custom widget design visible
• Beautiful background
• Caption: "Beautiful widgets that fit your style"

Tip: Show the customizable nature of widgets

---

Screenshot 3: One-Tap Logging

Goal: Emphasize speed and simplicity

Visual Elements:

• Main mood selection interface
• 5 mood options clearly visible
• Finger/tap indication optional
• Caption: "Log your mood in one tap"

Tip: Keep it clean and focused on the simplicity

---

Screenshot 4: Streak & Motivation

Goal: Show the gamification element

Visual Elements:

• Streak counter prominently displayed
• Calendar view with logged days
• Achievement or milestone indication
• Caption: "Build streaks, build habits"

---

Screenshot 5: Calendar & Insights

Goal: Demonstrate the value of tracking over time

Visual Elements:

• Month view calendar with color-coded moods
• Pattern visualization
• Statistics or metrics visible
• Caption: "Discover your emotional patterns"

---

Screenshot 6: Customization

Goal: Appeal to personalization-focused users

Visual Elements:

• Theme selection screen OR
• Color palette customization
• Multiple theme examples side by side
• Caption: "Customize every detail"

---

Screenshot 7: Apple Watch

Goal: Showcase ecosystem integration

Visual Elements:

• Apple Watch showing the Reflect app
• Mood logging interface on watch
• iPhone optional in background
• Caption: "Log moods from your wrist"

---

Screenshot 8: Journaling

Goal: Show depth beyond basic tracking

Visual Elements:

• Note entry interface
• Photo attachment visible
• Rich entry example
• Caption: "Add notes and photos to remember why"

---

Screenshot Design Guidelines

Typography

• Headlines: Bold, 60-80pt, high contrast
• Subheadlines: Medium weight, 36-48pt
• Placement: Top third of screenshot (visible above fold)
• Color: White text on dark overlays OR dark text on light overlays

Layout Principles

1. Device at center or slightly right
2. Text above or beside device
3. Background should complement app theme
4. Consistent spacing across all screenshots

Color Recommendations

Theme Option	Background	Text
Dark/Neon	Dark purple/blue gradient	White or Neon colors
Light/Pastel	Light gradient or solid	Dark gray or black
System	Match iOS system colors	High contrast

Do's and Don'ts

Do:

• Show actual app UI (builds trust)
• Use consistent visual language
• Highlight unique features first
• Keep text concise (3-5 words per headline)
• Test different concepts

Don't:

• Use generic stock imagery
• Overcrowd with text
• Show competitor comparisons
• Use tiny, unreadable text
• Forget to optimize for dark mode users

---

App Preview Video

Specifications

• Length: 15-30 seconds (recommend 20-25 seconds)
• Format: H.264, 30fps
• Resolution: Match screenshot sizes

Recommended Video Structure

Time	Content	Goal
0-3s	Logo + hook	Grab attention
3-8s	Live Activity logging	Show unique feature
8-13s	Widget interaction	Show convenience
13-18s	Streak/Calendar view	Show value over time
18-22s	Customization montage	Show personalization
22-25s	CTA + App Icon	Drive download

Script Concept

[0-3s]
Visual: Reflect logo animates in
Text: "Track moods in seconds"

[3-8s]
Visual: Lock Screen -> Live Activity tap -> Mood logged
Text: "From your Lock Screen"

[8-13s]
Visual: Home screen -> Widget tap -> Mood selection
Text: "Or your Home Screen"

[13-18s]
Visual: Calendar fills with color-coded moods
Text: "Build streaks. See patterns."

[18-22s]
Visual: Quick cuts of different themes/colors
Text: "Make it yours"

[22-25s]
Visual: App icon with download CTA
Text: "Download Reflect today"

Audio Recommendations

• Use subtle, upbeat background music
• No voiceover needed (text overlays are clearer)
• Music should not be copyrighted
• Consider using audio that evokes calm/wellness

---

App Icon Optimization

Current Analysis

The app likely uses a mood-related icon. Key considerations:

Icon Design Principles

1. Simplicity: One recognizable element
2. Distinctiveness: Stand out in the grid
3. Scalability: Work at all sizes (1024px down to 58px)
4. Brand Consistency: Match app theme/colors

A/B Test Concepts

Concept	Description	Target Audience
A	Abstract smiley face	Broad appeal
B	Gradient orb/circle	Modern/minimal
C	"R" with mood colors	Brand-focused
D	Calendar with mood	Feature-focused

Color Psychology

Color	Emotion	When to Use
Green	Growth, wellness	Primary feel
Blue	Trust, calm	Professional feel
Purple	Creativity, luxury	Premium feel
Multi-color gradient	Variety, expression	Emotional range

Icon Testing Strategy

1. Create 3-4 icon variations
2. Test using App Store Connect's Product Page Optimization
3. Run for minimum 7 days
4. Measure tap-through rate differences
5. Implement winner, iterate

---

iPad Screenshots

Additional Considerations

• Show split-screen potential if applicable
• Emphasize larger widgets
• Demonstrate calendar view advantage on bigger screen
• Consider landscape orientation for productivity angle

---

Dark Mode Considerations

• Ensure screenshots look good on both light and dark App Store
• Test how your screenshots appear in different contexts
• Consider creating separate light/dark versions for testing

---

Seasonal Visual Updates

New Year (December-January)

• Add "Start fresh" messaging
• New year resolution angle
• Fresh, clean visual style

Mental Health Awareness Month (May)

• Green ribbon subtle integration
• Wellness-focused messaging
• Calming color palette

Back to School (August-September)

• Routine/habit angle
• Organization messaging
• Structured visual style

---

Screenshot Production Checklist

Pre-Production

• Define 6-8 screenshot concepts
• Write headline copy for each
• Choose color palette/theme
• Prepare actual app screens

Production

• Capture high-res app screenshots
• Design frames and backgrounds
• Add device frames if needed
• Add text overlays
• Create all required sizes

Post-Production

• Review on actual devices
• Test in App Store context
• Get external feedback
• Prepare A/B test variants
• Document and organize assets

---

Recommended Tools

Design

• Figma (free, collaborative)
• Sketch (Mac, one-time purchase)
• Adobe XD (subscription)

Screenshot Generators

• AppMockUp (web-based)
• Rotato (3D device mockups)
• Screenshot Designer (templates)

Video

• iMovie (free, macOS)
• Final Cut Pro (professional)
• After Effects (motion graphics)

---

Measurement & Iteration

Key Metrics

• Impression-to-Product-Page-View Rate: Do screenshots attract clicks?
• Product-Page-View-to-Install Rate: Do screenshots convert?
• First Screenshot Drop-off: Are users scrolling?

Testing Cadence

• Test new screenshots every 4-6 weeks
• Run each test for minimum 7 days
• Document all test results
• Iterate based on data, not assumptions

---

Last Updated: January 2026 Version: 1.0