Header Conversion Analysis · June 2026
Program-Page Hero: Current vs. Recommended
Each hero below renders live at a true desktop width and a true 390px phone width, so the responsive behavior is real, not a screenshot. The example content is the Executive Coach Training page.
The core issue: on the current diagonal hero, the coach photo and the testimonial are hidden on mobile, so about a third of visitors land on a faceless wall of text. The recommended options keep a framed face, social proof, and the primary call to action above the fold at every screen size.
About image quality. Most program-page coach photos are only about 900px on the short side (a few are landscape or stock). That is too soft for a full-bleed half-screen hero on retina, but perfectly crisp at the contained card size below. So the two image-forgiving options (Contained Portrait Card, Coach + Alumni Ribbon) lead here, and the full-bleed options are flagged "needs better photos." Plain upscaling adds pixels, not detail; a true Topaz/Firefly pass or a re-shoot is needed to make the full-bleed versions crisp.
Diagonal Hero (current)
The problem we are fixing
What ships today on ~14 program pages. On desktop the face survives via a hand-tuned crop. Resize the desktop frame, or look at mobile: the photo and the testimonial both vanish (they are set to display:none below 1024px), leaving a faceless navy text wall with the CTA pushed down.
Desktop
Mobile (390px)
Contained Portrait Card
Lowest photo risk - works with the current 900px library
The coach is shown in a contained card (about 440px wide), not stretched full-bleed. At this size the current 900px photos stay crisp on retina, so this fixes framing and mobile without needing new photography. The face, the star + graduate-count proof, and the CTA all stay above the fold on mobile. Best fit for the images we actually have.
Desktop
Mobile (390px)
Coach + Alumni Ribbon
Closest to the mosaic look, most forgiving of image quality
A contained coach portrait plus a row of small alumni headshots and a face-attached testimonial. Small circular faces forgive resolution and composition entirely, and it echoes the graduate-stories mosaic John likes without the page-speed cost. The most robust option for a mixed-quality image library, and it keeps the full mosaic special.
Desktop
Mobile (390px)
Anchored Portrait (full-bleed)
Judge score 43/50 - best look, but image-hungry
Keeps the signature navy diagonal with the clip moved to a navy overlay (it can never slice the coach again), and on mobile the photo restacks above the headline with a testimonial chip and proof row. The strongest editorial look, BUT a full-bleed half-screen photo wants ~1800px source images; most current portraits are 900px and will look slightly soft on large retina screens until upgraded or re-shot.
Desktop
Mobile (390px)
Proof-Forward Split (full-bleed)
Judge score 42/50 - strong, but image-hungry
The homepage hero treatment applied to program pages: explicit star rating, the 4,400+ graduates stat, and a testimonial, photo always shown. Strongest pure-conversion logic, but same caveat as Anchored: the full-bleed photo wants higher-resolution sources than most pages currently have.
Desktop
Mobile (390px)
Optional density variant not shown here: a thin row of 6 to 8 alumni headshots (the mosaic’s “lite cousin”) can be added to any program hero for extra social proof. The full interactive 80+ face mosaic stays reserved for the homepage and graduate-stories so it keeps its impact.