How to Design Scannable App Screenshots

Redesigning HeyDoctor’s App Store Screenshots

Girish Rawat
Oct 22, 2018 · 10 min read
Image for post
Image for post

We discovered that the average time people spend on a store listing is 7 seconds. The fact is, the vast majority of people leave the page even sooner. Engaged users hang around for a little longer, but they all follow the same process: check the icon, view the first two screenshots, and scan the first line of the app description — Peter Fodor, Why 7 seconds could make or break your mobile app

App in focus: HeyDoctor

Image for post
Image for post

Disclaimer

Image for post
Image for post
“Make your app flat” — some guy. Meme credits:@parasmael

The Current Design

Image for post
Image for post

User Stories

Screenshots or Thumbnails?

We consistently observed that fewer than 4% of users looking for an app enlarge portrait screenshots, and only 2% enlarged landscape screenshots. For gamers, it’s even less at just 0.5%. This is probably because the gameplay is usually clear enough even from thumbnails —Peter Fodor

Image for post
Image for post

The Magic Number 2

The findings of our research make it clear that you HAVE to explain the core benefit of your app in first two (iOS10, Google Play), or three (iOS11) screenshots if you are using portrait images. If you really want to use a landscape image, you’ve got just one — Peter Fodor

Image for post
Image for post

Highlighted UI Elements

Image for post
Image for post

Learnings

Step 1: Update the iPhone to the newer generations

Image for post
Image for post

Step 2: Cut down on text and make it more readable

Image for post
Image for post
Image for post
Image for post

Step 3: Highlight relevant UI Elements

Chat UI

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Cards and Drop Shadow

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Step 4: Cosmetic Changes

Add Perspective Screens

Image for post
Image for post
Image for post
Image for post

Change Background Gradient

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Perfect!
Image for post
Image for post
Image for post
Image for post

Final Designs

Before

Image for post
Image for post

After

Image for post
Image for post

Conclusion

freeCodeCamp.org

This is no longer updated.

Thanks to uxplanet.org and Monte Thakkar

Girish Rawat

Written by

Product Intern @Microsoft. Previously @Zoom_us, @Wingify. Based in San Francisco.

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Girish Rawat

Written by

Product Intern @Microsoft. Previously @Zoom_us, @Wingify. Based in San Francisco.

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store