Rebuild It: Turning a Weak Hero Into a Four-Component Hero
Objective: Take a real weak hero section apart and rebuild it component by component, in the formula's fixed order, producing a finished hero ready for a designer to lay out.
You're a conversion copywriter brought onto Allbirds' site team to rebuild the hero section for a new product line launch page. The current draft is generic and untested.
Rebuild the hero from scratch across all 4 components, in the formula's order, and justify each choice against the lesson's data.
Before you start
What you'll need
Free path (everything below is enough to finish)
Free, and keeps the before/after comparison in one place for stakeholder review
Free tier covers a single-page mockup with stock or uploaded imagery
Paid upgrades (optional, faster/deeper)
Better for teams that need exact spacing and responsive breakpoints specified
No access? A Canva mockup with clear component labels is enough for most handoffs
The process
3 steps
Step 01 of 03
The lesson's stranger test, plus the subheadline's job: name who this is for and how the outcome is delivered.
The current draft headline is 'Introducing the New Allbirds Collection.' Rebuild it and its subheadline from scratch.
Procedure
- Write the outcome the new product line actually delivers for the visitor
- Draft the headline naming that outcome directly, no product-launch language
- Draft a 1-2 sentence subheadline naming the audience and the mechanism (the material, the fit, the guarantee)
OLD: 'Introducing the New Allbirds Collection' NEW HEADLINE: 'Shoes That Actually Feel Good After 10 Hours on Your Feet' NEW SUBHEAD: 'Made from merino wool and eucalyptus fiber, for anyone on their feet all day at work.'
Healthy
The headline names a concrete physical or emotional outcome; the subheadline names the audience and the mechanism without jargon.
Unhealthy
The headline announces a launch or collection name instead of an outcome.
What this means
'Introducing' language answers a question the visitor never asked. The formula only works when every word answers 'why should I care.'
So what do I do about it?
| Symptom | Action | Effort |
|---|---|---|
| The headline uses launch language ('Introducing', 'New') | Replace it with the specific physical or emotional outcome the product delivers | 5 min |
Step 02 of 03
The lesson's CTA rule: one button, labeled with the outcome of clicking, not a generic verb.
The current draft CTA says 'Learn More.' What replaces it, and what happens to any secondary link on the page?
Procedure
- Write a CTA label naming the specific next step ('Shop the Collection', not 'Learn More')
- Remove or visually demote any second button competing with it
- Place the single CTA where it's visible without scrolling on mobile
OLD CTA: 'Learn More' (with a second equal-size 'View Lookbook' button beside it) NEW: single button '[ Shop the New Collection ]', 'View Lookbook' demoted to a small text link below the fold
Healthy
One clearly-labeled button carries all the visual weight in the hero, visible on mobile without scrolling.
Unhealthy
Two buttons of equal visual weight both sit above the fold.
What this means
25% of startup hero sections in the Ofspace analysis had major mobile usability failures with CTAs pushed below the fold — mobile placement is not optional.
So what do I do about it?
| Symptom | Action | Effort |
|---|---|---|
| The CTA is not visible without scrolling on a phone-width mockup | Shorten the headline/subhead block or move the CTA higher until it clears the fold on mobile | 30 min |
Step 03 of 03
The lesson's rule: the visual must reinforce the headline's promise, not contradict it — show the product or the result, not a generic stock scene.
The current draft uses a stock photo of people jumping on a beach. Does it match the new headline about all-day comfort at work?
Procedure
- Check whether the current image supports or contradicts the new headline's claim
- Replace it with a product-in-use shot: someone wearing the shoes in a real work setting
- Confirm the final mockup shows headline, subhead, single CTA, and visual together in the formula's order
OLD VISUAL: stock photo, people jumping on a beach — contradicts 'all-day comfort at work' NEW VISUAL: photo of someone wearing the shoes on a warehouse floor, mid-shift FINAL MOCKUP: headline → subhead → single CTA → contextual visual, in order
Healthy
The visual shows the specific outcome or context the headline promises.
Unhealthy
The visual is a generic stock scene unrelated to the headline's specific claim.
What this means
Visitors process images before text — a mismatched visual creates doubt before the visitor even reads the headline properly.
So what do I do about it?
| Symptom | Action | Effort |
|---|---|---|
| The hero visual doesn't obviously connect to the headline's claim | Replace it with a photo or screenshot that directly shows the promised outcome | 30 min |
Final deliverable
A finished hero mockup showing the rebuilt headline, subheadline, single CTA, and contextual visual together, plus a before/after comparison sheet documenting why each change was made.
See a reference example
Duolingo for Schools hero rebuild (excerpt) OLD: 'Welcome to Duolingo for Schools' + 2 competing CTAs + generic classroom stock photo NEW: 'Every Student Speaking a New Language in 15 Minutes a Day' + single CTA '[ Start My Free Class ]' + screenshot of the actual teacher dashboard
Success criteria
You're done when you can:
- Rebuilt headline names a concrete outcome and passes the stranger test
- Only one CTA carries primary visual weight and is visible above the fold on mobile
- The new visual directly supports the new headline's specific claim