0442eab1f8
Complete rename across all bundle IDs, App Groups, CloudKit containers, StoreKit product IDs, data store filenames, URL schemes, logger subsystems, Swift identifiers, user-facing strings (7 languages), file names, directory names, Xcode project, schemes, assets, and documentation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
353 lines
8.4 KiB
Markdown
353 lines
8.4 KiB
Markdown
# 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*
|