# 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*