If your hero section isn’t converting, it’s usually not a copy or color issue. It’s an attention problem. People are looking at the wrong things first. This tutorial shows you how to predict where eyes go on your page.
Set hero’s single goal
Decide the one action you want visitors to take in the hero section (your primary CTA).
Example: increase engagement on “Start Trial”.
Sign in and prep for clean redesign
Sign in to Google Stitch. You’ll later start a fresh session for the redesign (Web design).
Capture above-the-fold screenshot
Grab a screenshot of your hero section (just above the fold). Try to capture it in a realistic view.
- Use a common laptop viewport
- Include headline, subtext, CTA button, and hero visual
- Avoid popups/banners if possible
Generate predictive attention heat map
Go to Google’s AI Studio and generate a heat map using your screenshot. Update the CTA text to match your site.
Prompt example:“Create a predictive attention heat map overlay for this landing page hero screenshot. Indicate where first-time visitors are most likely to look in the first 3–5 seconds. Highlight the highest-attention zones and identify elements pulling attention away from the primary CTA button labeled ‘Start Trial’.”Review what’s stealing attention
Quickly check whether the heat map supports your CTA or distracts from it.
Look for whether the CTA is getting attention, and what elements (images, badges, nav, extra links) are competing.
Redesign in Google Stitch
Begin a Google Stitch session, toggle to start with a Web design, then add both your original screenshot and the heat map.
Prompt example:“Analyze the hero screenshot alongside its predictive attention heat map. Redesign the hero section to increase clicks on the primary CTA ‘Start Trial’. Use the heat map insights to reduce distractions, improve visual hierarchy, and focus attention on the headline, support line, and CTA while keeping the brand style consistent.”Compare and iterate
Compare original vs. redesign: does the eye land on the CTA quicker and more clearly? If not, run one more iteration with a tighter instruction like:
- “Make the CTA more dominant without changing copy.”
- “Remove or downplay competing elements above the CTA.”
Note: Put your strongest proof closest to the CTA (one short line, one badge, or one stat), not a full list.