Add 100% localization coverage and App Store optimization docs
- Add 4 missing strings to xcstrings (Watch complication, ContentView) - Translate 112 strings to all 6 languages (de, es, fr, ja, ko, pt-BR) - All 428 translatable strings now at 100% coverage - Add ASO documentation: strategy, keywords, metadata, visual assets 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Trey t
352
docs/ASO-Visual-Assets.md
Normal file
352
docs/ASO-Visual-Assets.md
Normal file
@@ -0,0 +1,352 @@
|
||||
# Feels 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 Feels 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: Feels 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 Feels 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 | "F" 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*
|
||||
Reference in New Issue
Block a user