The First Screenshot Rules Everything: How to Design Your App Store Hero
Users decide whether to tap your App Store listing in under half a second — almost entirely based on your first screenshot. Here is how to design a hero that converts.
There is a hierarchy in your App Store screenshot set, and it is not subtle. The first screenshot is worth more than screenshots two through ten combined. It appears in search results before a user has opened your product page. On a typical phone, it occupies roughly a third of the visible area in search — right next to your icon and app name. It does more persuasion work than any other asset on your listing.
Most developers know this in theory. Far fewer apply it in practice. Their first screenshot is whatever the designer produced first, or the screen they were most proud to ship, or a habit inherited from a competitor without thinking about why. This guide covers what the first screenshot actually needs to do — and what gets in the way.
Why the first screenshot is different
Screenshots two through ten only appear after a user has already opened your product page. At that point they have some interest — you already did some of the persuasion just by getting them to tap. The first screenshot has no such runway.
In search results, your listing competes with multiple other apps displayed at the same time. Users scan vertically, their eyes moving fast. Eye-tracking research consistently shows that screenshots in search results get glanced at for 300–500 milliseconds on average — not read, not studied. You get a glance.
The search result thumbnail is tiny
On an iPhone 15 Pro in portrait, your first screenshot displays at approximately 130×270 points in search results. Any text in it must be readable at that size without zooming. A large phone mockup with the app UI and no caption is effectively blank at that scale.
The second reason the first screenshot is different: it is the only one that does double duty. On search results it is a thumbnail competing for attention. On the product page it is the hero visual that determines whether the user scrolls to see more or leaves. Same image, two completely different contexts, both requiring it to work independently.
The five jobs your hero has to do
Before designing anything, write down the one thing a user should understand from your first screenshot alone. Not a list of features — one thing. If you cannot express it as a single sentence, the screenshot will not be able to express it as a single image either.
A strong first screenshot does all of the following simultaneously:
- Communicates the core value proposition — what the user gets, not what the app does.
- Establishes the visual identity — sets the tone, color, and design language for the rest of the set.
- Passes the thumbnail test — remains coherent and readable at 130 points wide.
- Creates curiosity — gives the user a reason to open your product page to see more.
- Fits the category context — does not look out of place next to the other top apps in your category.
If your current first screenshot fails any of these five, that is where to start. Most hero screenshots fail the thumbnail test and the value proposition test simultaneously — they show a UI screenshot that looks impressive full-size but is unreadable at 130 points.
The two hero archetypes that work
Benefit-first (caption-led)
A large, bold headline occupies the top 25–35% of the canvas. Three to five words, maximum. The phone mockup sits below or behind it. The background is a solid color, a simple gradient, or an AI-generated image with a clear focal point and enough negative space for the text.
This archetype works because the caption does the persuasion work immediately, even at thumbnail size. A user who cannot read the UI screenshot can still read "Sleep better tonight" or "Track every expense" in large type. It also works well for apps whose UI is not inherently self-explanatory — if you need a label to explain what the screen is showing, a caption-led design says it directly.
UI-first (interface-led)
The phone mockup is very large — filling 70–80% of the canvas height. The interface itself is the visual argument. A short caption (often at the very top or bottom, not overlaid on the UI) provides context but is not the primary element.
This works when the interface itself is a strong signal of quality. A beautifully designed dashboard, a crisp data visualization, an elegant input form — these communicate competence visually. It also works well in productivity categories where sophistication signals trust. It does not work when the UI is information-dense and unreadable at thumbnail size.
Pick one and commit
Hybrid hero screenshots — big caption AND big UI both competing — tend to fail both tests. The caption is too small to read at thumbnail size; the UI is too compressed to be persuasive. Pick a primary element and let it lead.
Caption strategy for your hero
If you go with a caption-led hero, the copy decision matters more than the design decision. The fastest way to find a strong hero caption: write 20 versions, eliminate everything over five words, then eliminate everything that could apply to a competitor.
What remains should be specific to what makes your app different. "Organize your life" could be Notion, Todoist, Fantastical, or a notes app. "Grocery lists that actually work" is narrower and more honest. "Never forget what you need" is benefit-first but still broad. "Scan, sort, done." is specific to a single workflow.
- Avoid superlatives ("The best app for...") — they trigger skepticism and read as generic.
- Avoid questions ("Tired of forgetting things?") — they use up space without making a promise.
- Favor present tense and active verbs — "See every expense clearly" not "Your expenses, visualized."
- Use \n line breaks to control where the type wraps — do not leave this to chance at different screen sizes.
The thumbnail test
Before committing to a first screenshot design, run the thumbnail test: export the design and shrink it to 130 pixels wide. What do you see? If the answer is "a blur of color and indistinct shapes," the test failed. If the answer is "a clear color, a readable word or two, and a recognizable shape," it passed.
The easiest way to run this: open your design in Preview or Photos on a Mac, zoom out until the image is roughly 1.5 cm wide, and look at it from a normal reading distance. Or drop it into a mock search result with two competitor thumbnails and see how it competes. This test reveals problems that are invisible at full size.
What the first screenshot is not for
A common mistake is using the first screenshot to show onboarding, the welcome screen, or a sign-in flow. Users do not want to see what happens before they can use the app — they want to see what they get when they do use it. Show the value, not the door.
Equally common: using the first screenshot as a feature showcase — a screen with five or six labeled UI elements, each with a small callout bubble. This reads as technical documentation, not a persuasive visual. Feature grids belong on screenshot five or six, after you have already convinced the user to keep scrolling.
The first screenshot is not a summary of your product. It is an argument for why someone should want your product. That is a different kind of writing and a different kind of design.
How to test if your hero is working
The only reliable way to know if your first screenshot is performing is an A/B test using Apple's Product Page Optimization. Set up a treatment with a meaningfully different hero — different copy or different archetype, not just a color change — and give it enough traffic to produce a statistically significant result (usually 2–4 weeks for most apps).
Watch the conversion rate, not the impression count. A hero that attracts more clicks but converts worse at the product page level is not a win. The metric you care about is the percentage of users who tapped "Get" out of everyone who saw the listing.
Design and test your hero in Boom Screens
Boom Screens lets you create multiple screenshot variants and export them localized for all markets — ready to upload directly to Product Page Optimization in App Store Connect.