How can we design scannable
app screenshots?
How can we design scannable app screenshots?
How can we design scannable app screenshots?
I redesigned HeyDoctor’s app store screenshots to increase
engagement and increase app downloads.
I redesigned HeyDoctor’s app store
screenshots to increase engagement
and increase app downloads.
Overview
Overview
Redesigning HeyDoctor’s App Store Screenshots.
Redesigning HeyDoctor’s App Store Screenshots.
HeyDoctor is an app that allows users to get medical prescriptions online without the need to visit a primary care doctor. HeyDoctor can prescribe and refill prescriptions for medicines ranging from birth control, hair growth to urinary tract infection treatments, lab reports and more.
HeyDoctor is an app that allows users to get medical prescriptions online without the need to visit a primary care doctor. HeyDoctor can prescribe and refill prescriptions for medicines ranging from birth control, hair growth to urinary tract infection treatments, lab reports and more.
Industry
Healthcare
Role
UI/UX Designer
Timeline
4 Weeks
Tools
Figma
Industry
Healthcare
Timeline
4 Weeks
Role
UI/UX Designer
Tools
Figma
The Problem
The Problem
Users typically decide whether to download an app within 7 seconds on the App Store.
69% of visitors don't complete their purchases.
Screenshots reflect an app's user stories and user experience. Users typically decide whether to download an app within 7 seconds on the App Store. Research shows that screenshots are the second most influential factor in download decisions, preceded only by ratings. Therefore, ineffective app screenshots can result in less downloads and lower conversion rates.
Screenshots reflect an app's user stories and user experience. Users typically decide whether to download an app within 7 seconds on the App Store. Research shows that screenshots are the second most influential factor in download decisions, preceded only by ratings. Therefore, ineffective app screenshots can result in less downloads and lower conversion rates.
Current Design
Current Design
We are going to be working on HeyDoctor’s iOS app.
Here is what their existing screenshots look like:
We are going to be working on HeyDoctor’s iOS app.
Here is what their existing screenshots look like:
It follows the standard title and subtitle setup which does a good job of explaining the app’s user stories. We are not interested in redesigning the brand or the UI, so we will try to keep them consistent in our redesign.
It follows the standard title and subtitle setup which does a good job of explaining the app’s user stories. We are not interested in redesigning the brand or the UI, so we will try to keep them consistent in our redesign.
User Research
User Research
I wanted to understanding why users install this app?
I wanted to understanding why users install this app?
Before we dig in and start making visual changes, we need to learn why users install HeyDoctor and what they are searching for to discover this app.
Before we dig in and start making visual changes, we need to learn why users install HeyDoctor and what they are searching for to discover this app.
01
Get prescriptions and refills.
Users are looking for an easy and convenient way to get their prescriptions and refills online without the need to visit a doctor.
01
Get prescriptions and refills.
Users are looking for an easy and convenient way to get their prescriptions and refills online without the need to visit a doctor.
02
Get treatment for illnesses.
Users are searching for how to get treatment for their illnesses online.
02
Get treatment for illnesses.
Users are searching for how to get treatment for their illnesses online.
03
Talk to a primary care physician.
Users want to talk to a doctor but they may not be able visit one at the moment due to time, financial, or location constraints.
03
Talk to a primary care physician.
Users want to talk to a doctor but they may not be able visit one at the moment due to time, financial, or location constraints.
04
Avoid any insurance paperwork.
Users don’t want to involve their medical insurance because either they don’t have one or their copayment is too high.
04
Avoid any insurance paperwork.
Users don’t want to involve their medical insurance because either they don’t have one or their copayment is too high.
Market Research
Market Research
Wtih screen sizes growing by 72% since the original iPhone launched, are screenshots or thumbnails better?
Wtih screen sizes growing by 72% since the original iPhone launched, are screenshots or thumbnails better?
Screens are bigger than ever and product designers are constantly evolving to make use of this extra available space. One would think that bigger screens would entice designers to put more text captions on screenshots. But what we are observing is quite the opposite.
Screens are bigger than ever and product designers are constantly evolving to make use of this extra available space. One would think that bigger screens would entice designers to put more text captions on screenshots. But what we are observing is quite the opposite.
"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
Less than 4% of people coming to your app page tap on your screenshots. Designers have recognized this trend and now treat screenshots as thumbnails for users to quickly preview rather than interactive elements. In the past, users would tap on screenshots to read text, but with the updated app store layout and larger screens, this behavior has changed.
Let's examine some examples of screenshot redesigns from 2016 to 2018. Notice how almost every one of them have fewer words and bigger fonts.
Less than 4% of people coming to your app page tap on your screenshots. Designers have recognized this trend and now treat screenshots as thumbnails for users to quickly preview rather than interactive elements. In the past, users would tap on screenshots to read text, but with the updated app store layout and larger screens, this behavior has changed.
Let's examine some examples of screenshot redesigns from 2016 to 2018. Notice how almost every one of them have fewer words and bigger fonts.
2016
2016
2018
2018
Competitive Analysis
Competitive Analysis
Only 9% of users scroll past the first two screenshots.
Only 9% of users scroll past the first two screenshots.
As a developer, you would think to go for five screenshots because more content is better, right? Wrong.
As a developer, you would think to go for five screenshots because more content is better, right? Wrong.
5
screenshots
screenshots
78 of the top 100 apps have 5 screenshots.
4
screenshots
screenshots
13 of the top 100 apps have 4 screenshots
3
screenshots
6 of the top 100 apps have 3 screenshots.
2
screenshots
2 of the top 100 apps have 2 only screenshots.
3
screenshots
6 of the top 100 apps have 3 screenshots.
2
screenshots
2 of the top 100 apps have 2 only screenshots.
9%
of of users scroll past the first two mobile screenshots.
5%
of of users scroll past the first two landscape screenshots.
"The findings of our research make it clear that you HAVE to explain the core benefit of your app in first two or three screenshots if you are using portrait images. If you really want to use a landscape image, you’ve got just one."
— Peter Fodor
This makes it important to lure the user in the first two screenshots by telling your users what your app does in the first screen and dive deeper in your following screenshots.
Let’s examine the first two screenshots of some popular apps.
This makes it important to lure the user in the first two screenshots by telling your users what your app does in the first screen and dive deeper in your following screenshots.
Let’s examine the first two screenshots of some popular apps.
Competitive Analysis
Competitive Analysis
Users quickly glance at your screenshots to understand the app's functionalities.
Users quickly glance at your screenshots to understand the app's functionalities.
Text captions provide context for the screens, and designers are now highlighting UI elements to make it even easier for users to comprehend. Here are some examples to illustrate this.
Text captions provide context for the screens, and designers are now highlighting UI elements to make it even easier for users to comprehend. Here are some examples to illustrate this.
Research Insights
Research Insights
These were the 3 key insights from the research.
These were the 3 key insights from the research.
Now that we know a little about how to make screenshots more readable, let’s start applying our key findings to HeyDoctor’s screenshots.
Now that we know a little about how to make screenshots more readable, let’s start applying our key findings to HeyDoctor’s screenshots.
01
Highlight the key user story of your app in the first two screenshots.
Research shows that 91% of users who visit your app listing will not scroll past the first two app screenshots.
01
Highlight the key user story of your app in the first two screenshots.
Research shows that 91% of users who visit your app listing will not scroll past the first two app screenshots.
02
Increase the font size and cut down on text of the captions.
With larger displays, users tend to quickly scan and glance at screenshots rather than clicking it to read them.
02
Increase the font size and cut down on text of the captions.
With larger displays, users tend to quickly scan and glance at screenshots rather than clicking it to read them.
03
Highlight elements that represent text captions in the user interface.
It makes scanning the screenshots easier and improves your screenshot’s glance-ability.
03
Highlight elements that represent text captions in the user interface.
It makes scanning the screenshots easier and improves your screenshot’s glance-ability.
Design Process
Design Process
Step 1 — Update the iPhone mockup to the latest generation.
Step 1 — Update the
iPhone mockup to the
latest generation.
HeyDoctor’s screenshots is using the older generation of iPhones. Using a newer generation of iPhone shows relevance and credibility in the market.
HeyDoctor’s screenshots is using the older generation of iPhones. Using a newer generation of iPhone shows relevance and credibility in the market.
Old iPhone
Old iPhone
New iPhone
New iPhone
Design Process
Design Process
Step 2 — Shorten the text to make it clear and readable.
Step 2 — Shorten the
text to make it clear
and readable.
To improve readability, I made the captions more concise by stating the user stories in a clear and brief format. Additionally, I removed the subtitle and descriptions to make room for larger text.
To improve readability, I made the captions more concise by stating the user stories in a clear and brief format. Additionally, I removed the subtitle and descriptions to make room for larger text.
The caption for the third screenshot mentions the app not requiring an insurance policy, but the screenshot itself shows the app's settings page, which is unrelated. To improve relevance, we will replace it with a screenshot of the first page users see when trying to get a prescription, indirectly indicating that insurance is not needed to get started.
The caption for the third screenshot mentions the app not requiring an insurance policy, but the screenshot itself shows the app's settings page, which is unrelated. To improve relevance, we will replace it with a screenshot of the first page users see when trying to get a prescription, indirectly indicating that insurance is not needed to get started.
Design Process
Design Process
Step 3 — Highlight relevant app features and elements.
Step 3 — Highlight relevant
app features and elements.
As we learned above, highlighting relevant UI elements that reference the captions makes the screenshot more scannable and readable for the user.
As we learned above, highlighting relevant UI elements that reference the captions makes the screenshot more scannable and readable for the user.
Chat User Interface
Let's look at how Tinder highlights their chat UI elements. It cleverly uses profile pictures and chat bubbles with brand elements like colors to mimic its real chat interface so I tried designing something similar:
Let's look at how Tinder highlights their chat UI elements. It cleverly uses profile pictures and chat bubbles with brand elements like colors to mimic its real chat interface so I tried designing something similar:
I tried to integrate HeyDoctor’s brand into the chat bubbles. I did not feel the need to include profile pictures because doctors don’t have a profile picture in the app.
I tried to integrate HeyDoctor’s brand into the chat bubbles. I did not feel the need to include profile pictures because doctors don’t have a profile picture in the app.
Cards and Drop Shadow
Let's look at how Uber highlights their UI elements. I love this minimal way of highlighting UI elements with zoomed in cards and drop shadows. I used this style to emphasize elements in our screenshots.
I strategically moved the captions below the phone so the that user sees the highlighted UI element first before they read the caption.
Let's look at how Uber highlights their UI elements. I love this minimal way of highlighting UI elements with zoomed in cards and drop shadows. I used this style to emphasize elements in our screenshots.
I strategically moved the captions below the phone so the that user sees the highlighted UI element first before they read the caption.
Current
Current
Replaced
Replaced
Design Process
Design Process
Step 4 — Create engaging visuals of the app to
attract users attention.
Step 4 — Create engaging visuals of the app to
attract users attention.
We have made changes to our screenshots to make them easier to scan but we also have to make them look better. Good visual design is important because it attracts users and make them interested in the app.
We have made changes to our screenshots to make them easier to scan but we also have to make them look better. Good visual design is important because it attracts users and make them interested in the app.
Adding Perspective Screens.
Isometric screens have a modern and polished appearance. They are commonly seen in Apple's product commercials and high-quality mockups on Dribbble. I created a few different perspectives using the available screens.
Isometric screens have a modern and polished appearance. They are commonly seen in Apple's product commercials and high-quality mockups on Dribbble. I created a few different perspectives using the available screens.
Since the App Store allows up to 5 screenshots, and I only had 3 screens available, I divided the first perspective mockup into 2 screenshots to reach the limit.
In the first screenshot, I included a caption that says "Your personal doctor." It's concise, easy to read, and provides a summary of the app's functionality.
Since the App Store allows up to 5 screenshots, and I only had 3 screens available, I divided the first perspective mockup into 2 screenshots to reach the limit.
In the first screenshot, I included a caption that says "Your personal doctor." It's concise, easy to read, and provides a summary of the app's functionality.
Changing Background Gradient
The contrast between the background and the foreground is a bit too harsh for me right now. Let us change it to a lighter shade of blue.
The contrast between the background and the foreground is a bit too harsh for me right now. Let us change it to a lighter shade of blue.
We will be making a gradient with the new colors that we choose. Let’s see how this looks in our screenshots.
We will be making a gradient with the new colors that we choose. Let’s see how this looks in our screenshots.
I decided to add a darker blue shade below the text so it seperates the text and the phone and creates contrast. I was able to find a cool isometric illustration from the web to make the last screenshot.
I decided to add a darker blue shade below the text so it seperates the text and the phone and creates contrast. I was able to find a cool isometric illustration from the web to make the last screenshot.
The Solution
The Solution
Final Designs
Final Designs
All in all, we made just over four small, iterative tweaks. But the final result are screenshots that are easy to glance over and feel modern. Moreover, none of these tweaks required an innate artistic skill. Studying a handful apps in the App Store helped us to know what issues to look for.
All in all, we made just over four small, iterative tweaks. But the final result are screenshots that are easy to glance over and feel modern. Moreover, none of these tweaks required an innate artistic skill. Studying a handful apps in the App Store helped us to know what issues to look for.
Before
Before
After
After
Explore Other Work
TechHub · Web Design
How Can We Increase Conversion Rates?
TechHub is an e-commerce website designed to provide a seamless experience shopping electronic gadgets online.
Projectify · Web Design
How Can We Optimize Web App Onboarding?
I investigated why there was a 32% drop in monthly active users, 85% bounce rate, and a stagnant 20% sign-up rate.
FinPay · App Design
How Can We Make Payments Easier?
FinPay is a concept app that enables users to seamlessly send and receive payments, make purchases, and track transactions.
TV Guide · App Design
How Can We Improve Movie Discovery?
TV Guide is the ultimate destination to easily and quickly discover what, when, and where to watch, anytime, anywhere.
Homeline · App Design
How Can We Simplify The Booking Process?
Homeline is a concept app that allows people to easily to search and book rooms, apartments, and places all over the world.
Caremerge · App Design
Connecting Family To Senior Care Providers.
Caremerge connects family members to care providers so they can check up on their loved ones in senior care.
School Apply · Web Design
Helping Students Land Their Dream Schools.
School Apply helps students find, compare, and apply to any school or program around the world with consultation and support.
JCCSF · Email Design
How Can We Increase Email Engagement?
I designed and optimized JCCSF's email campaign template to increase clickthough rate and subscriber engagement.
TechHub · Web Design
How Can We Increase Conversion Rates?
TechHub is an e-commerce website designed to provide a seamless experience shopping electronic gadgets online.
Projectify · Web Design
How Can We Optimize Web App Onboarding?
I examined why there was a 32% drop in monthly active users, 85% bounce rate, and a 5% sign-up rate after a UI update.
FinPay · App Design
How Can We Make Payments Easier?
FinPay is a concept app that enables users to seamlessly send and receive payments, make purchases, and track transactions.
Homeline · App Design
How Can We Simplify The Booking Process?
Homeline is a concept app that allows people to easily to search and book rooms, apartments, and places all over the world.
TV Guide · App Design
How Can We Improve Movie Discovery?
TV Guide is the ultimate destination to easily and quickly discover what, when, and where to watch, anytime, anywhere.
Caremerge · App Design
Connecting Family To Senior Care Providers.
Caremerge connects family members to care providers so they can check up on their loved ones in senior care.
School Apply · Web Design
Helping Students Land Their Dream Schools.
School Apply helps students find, compare, and apply to any school or program around the world with consultation and support.
JCCSF · Email Design
How Can We Increase Email Engagement?
I designed and optimized JCCSF's email campaign template to increase clickthough rate and subscriber engagement.