Lessons learned from our App Store screenshots redesign

Two months ago, while reading Girish Rawat’s great article about How to Design Scannable App Screenshots, it occurred to me that we haven’t refreshed our App Store product page for quite a while. I reviewed our page and decided to make some modifications and spice it up a bit. 

I'm happy to share with you the process we went through, the changes we have done, and some preliminary results. 

But first - some data:

Phase 1 - collecting data

I went through a few interesting pieces of research done by some app store marketing companies and reviewed some of the most popular apps. Here’s a short summary of what I found: 

General Info

• Visitors spend an average of 7 seconds on the store listing page (source: AppAgent)
• 60% of visitors don’t scroll beyond the fold of each product page (Source: Storemaven).
• 50% of visitors base their decision on first impression (Source: Storemaven).
• The product page should explain what the app does in less than 3 seconds (Source: Storemaven).
• Only 13% of visitors scroll through the app screenshots (source: AppAgent).

Bottom line: the message must be short (like: 1-2 sentences short), scannable (people don’t read), and located above the fold. It reminds me of the page, paragraph, sentence technique.

App Screenshots

• Less than 4% of visitors tap on the screenshots to enlarge (source: AppAgent).
• Only 9%-13% of visitors scroll through portrait screenshots (source: AppAgent).
• According to another source, only 40% of visitors swipe past the first 2 screenshots (source: iOS App Templates). 
• When an app appears on search results - 3 screenshots are presented (that’s my own brilliant note).

Don’t expect your visitors to enlarge the screenshots to see the details. In most cases, they won’t even scroll through all of them.
If you are adding text to a screenshot - make it big.

Video

• On average, only 2% of users play videos on the store listing (source: AppAgent).
• Another source claims that having a video can increase install rates by more than 25% (Source: Storemaven).
• Despite having auto-play in the latest App Store versions - there are many scenarios where the video doesn’t play automatically:
  • When not fully presented
  • When the device is on low battery mode
  • While presented in search results along with other apps that have their videos playing
  • (Source: 5 Tips for a Better Performing App Preview Video on iOS)

My take: it probably depends on the type of app: in games, being able to view the game in action is critical before downloading cause screenshots are often not enough.

For other apps - a video might not be as important as it often perceived to be. In addition - auto-play is not as efficient as it’s supposed to be, requiring some extra optimization to the video (poster frame, etc.). 

Description

• Visitors don’t expand the app description (source: AppAgent).
• Visitors only read the first 1-3 lines of the description (Source: Storemaven). 
• The main message should be located above-the-fold (my smart, yet redundant, conclusion). 

My conclusion: the main messages should move from the description text, all the way up to the app screenshots. The rest of the text is kind of a bonus, as no one actually reads it. It is important to keep some keywords in the description text, without spamming of course...


[Read: 7 must-have ingredients for creating a true mobile experience]

Phase 2 - find some inspiration

There are plenty of screenshot designs out there; simple shots, feature shots, real-world photos, real screenshots and nothing more, and some hybrid styles that combine all of the above… 

Before we sit down to define our theme, I wanted to see what the big boys are doing:

Phase 3 - analyze our old design

This is how our old product page looked like before the changes: 

As you can see, there was plenty of room for improvements…

Hey, check out this guide below: 

40 UI rules for designing and writing text in mobile apps

Phase 4 - decisions time! 

I wanted the process to be fast, so we had 2 meetings about the current design and where we want to take it, and made the following decisions: 

1. Get rid of our video: 
   1. It’s too long.
   2. It’s not good enough as it doesn’t convey a clear message.
   3. It’s taking the real-estate of the first screenshot.
   4. It doesn’t have a good poster frame.
   5. Most importantly: knowing our customers - I didn’t feel a video is the right tool to tell the story of the product and convince them to install the app. 
2. Focus on the first 2 screenshots:
   1. Use our most colorful app screenshot.
   2. Summarize the product's strongest value proposition in these 2 screenshots.
   3. Add text to each screenshot (always on top, never at the bottom cause people don’t scroll, huge font, 3-4 words in each). 
   4. Design the images in a way that will encourage the visitors to scroll through and see the rest of the screenshots.
3. Create panorama images because of the following reasons: 
   1. It fits the “lifestyle” theme of the app. 
   2. It can (hopefully) encourage the visitors to swipe past the first 2 screenshots.
   3. In search results mode - 3 screenshots are presented and panorama style looks great across 3 screenshots.
4. Change the app description:
1. Remove some shitty text we had that practically said nothing and no one cared to read it.
2. Replace long text with short scannable sentences.
3. Include some fun references and credits. If no one reads it anyhow, at least we can feed our ego… 

Phase 5 - execution! 

Comments: 

1. We replaced the video with a straight forward screenshot presenting the app’s colorful main screen.
2. The text says exactly what the app does: providing beauty services (we removed the ‘lifestyle’ and ‘wellness’ words for the sake of keeping it short).
3. The second screenshot presents the value proposition: home + 24/7. 
4. We used large fonts to make the screenshots easier to read (and scan).
5. We decided to go with an animated iPhone instead of a real one so we could make it white (there’s no white iPhone X yet) 
6. The rest of the screenshots include some examples of the services provided by the app: hairstyle, massages, nails, to answer the question: "what does this app delivers exactly?”.
7. The last few screenshots address some questions that may arise among visitors who show interest (and cared to swipe through the screenshots), such as: “how do I know the service professionals are good?”
8. We also modified the description text as send above. If a visitor expands the description (and shows interest) he/gets some trust-building quotes from big brands such as “best app” (by BBC), “hottest startup in Europe” (by WIRED) and more.   

Here’s the full design: 

Design credit: Shir Weil

[Read: Mobile design trends to watch out for in 2019]

Tip: screenshots size and specs

Just because it takes a few minutes to find accurate and up-to-date information: App Store screenshots requirements:

Device size or platform	Screenshot size	Requirement
6.5 inch (iPhone XS Max, iPhone XR)	1242 x 2688 pixels (portrait)	Optional
5.8 inch (iPhone X, iPhone XS)	1125 x 2436 pixels (portrait)	Optional
5.5 inch (iPhone 6s Plus, iPhone 7 Plus, iPhone 8 Plus)	1242 x 2208 pixels (portrait)	MUST
4.7 inch (iPhone 6, iPhone 6s, iPhone 7, iPhone 8)	750 x 1334 pixels (portrait)	MUST
4 inch (iPhone SE)	640 x 1096 pixels (portrait without status bar) 640 x 1136 pixels (portrait with status bar)	Required if the app runs on iPhone and 5.5- or 4.7-inch screenshots are not provided

Phase 6 - analyzing the results:

It has been a month since we published the new App Store product page design. 

An important disclaimer before we jump to the results: this product is highly sensitive to fluctuations caused by our marketing activities, seasonality effect, ongoing events, user acquisition activities and many more so it may be that some (or all) of the changes were not driven by the new AppStore page design. 

When we measure new app functionality we usually do it with split tests (A/B tests), on/off switches, cohorts, and segments, but when it comes to App Store numbers - it’s all done through the App Store Connect analytics platform.

After checking the store analytics and crossing numbers with our own attribution numbers (to make sure I’m comparing apples to apples), I found the following: 

• Conversion rate from App Store search traffic to install improved by 10%. 
• Conversion rate from App Store page view (unique devices) to install improved by 36%. This is a significant improvement. 

So analyzing our initial results, it seems that the conversion rate from occasional impressions of the app to installs did not change dramatically, but once visitors come to our product page itself (through search or directly from a link or reference) - the new design makes a better job converting them to hit the install button.

Time to kick-off the next optimization session...

References and recommended articles:  

• Why 7 Seconds Could Make or Break Your Mobile App
• SplitMetrics AppStore A/B tests case studies
• Making the Most of Your Product Page - Apple
• ASO Best Practices: How to Design and Run Better Screenshot Tests
• 20 App Store Screenshot Examples
• Mobile App Analytics: What’s a Good App Store Page Conversion Rate?

Follow me on twitter @gilbouhnick - or - subscribe to the Mobile Spoon newsletter to get my occasional blogs directly to your inbox.