A headline has a job: earn the next moment of attention. The rest of the hero needs to help people understand the offer and take a useful next step. Ours had the right ingredients. They were competing for the same moment.
Version note: This case study documents an iteration published on 4 November 2026. The homepage hero was subsequently restored to its previous version at the owner’s request. Evidence status: This is an implemented self-review, with recommendations checked against published guidance. It is not a conversion experiment or an eye-tracking study. We have not measured a commercial uplift.
01 · Identify
The action was present. Its priority was less clear.
Business objective: help visitors discover the review relevant to their business. Visitor task: understand the offer and select an industry.
The original hero combined a strong headline, a lengthy introduction, a large peach statistic, an outlined industry selector, and two supporting links. The statistic sat before the primary action. Those are observable layout facts. The possibility that this competes with the intended next step is our expert diagnosis—not an observed user failure.
02 · Diagnose the opportunity
Give the next step a clearer place in the story.
Visual hierarchy uses scale, contrast, and grouping to signal importance. NN/G’s guidance supports those principles. Our opportunity was to apply them more deliberately: explain the value quickly, make the selector prominent, and keep proof available as supporting context.
The intended reading sequence is headline → value → industry selection → proof → optional links. That is a design intention. We are not presenting it as a measured eye path or claiming everyone scans in one fixed pattern.
| Callout | Before: what we identified | Opportunity and recommendation |
|---|---|---|
| 1 · Value | A long description introduced the full product name before the next step. | Keep the strong headline. Use a short offer-and-benefit sentence: “An expert website review. A clear plan to help grow your business.” |
| 2 · Proof | The peach 67% statistic carried substantial visual weight above the selector. | Move it below the action and reduce its emphasis. Keep its source and ecommerce population clear. |
| 3 · Action | The dark selector blended with the dark panel. | Use a peach fill and dark label, giving the industry selector stronger prominence and a full-width target within the panel. |
| 4 · Alternatives | Supporting links competed with the primary route. | Keep them available, smaller and below the primary control and supporting evidence. |
03 · Provide an evidence-supported recommendation
Make the change. Check the implementation. Be precise about validation.
Now: shorten the supporting copy. Next: promote the selector, reduce the statistic’s emphasis, and tighten the group. Those changes are implemented in the after capture.
Why these recommendations are supported: NN/G’s visual hierarchy guidance explains how contrast, size, and grouping communicate priority. Its first-party eye-tracking research on scanning supports distinct, descriptive headings, and scannable content. It does not establish that this exact hero will convert better, or that peach is universally the best action colour.
Accessibility verification: the selector retains its label, keyboard operation, and visible focus. We check the chosen foreground/background colours against WCAG text-contrast requirements, and inspect responsive layouts. These targeted checks do not establish whole-site accessibility conformance.
Proof needs context: the 67% figure concerns leading ecommerce websites in the cited Baymard research. It is not a finding about every industry, or a result delivered by CXPR. Moving evidence into a supporting position must not remove its meaning or source.
What remains unvalidated: whether visitors understand the offer faster, find their industry more easily or complete more enquiries and orders. Those are outcomes to assess with people and relevant site data. A cleaner screenshot cannot prove them.
The evidence behind the recommendation
- Kelley Gordon, NN/G — Visual Hierarchy in UX: Definition (2021). First-party design guidance; supports hierarchy principles, not a predicted lift.
- Kara Pernice, NN/G — The Layer-Cake Pattern of Scanning Content on the Web (2019). First-party eye-tracking research; transfer to this hero is expert interpretation.
- W3C — Understanding SC 1.4.3: Contrast (Minimum). Accessibility guidance: 4.5:1 for normal text and 3:1 for qualifying large text.
- Baymard — Desktop Ecommerce UX research. Source context for the existing ecommerce benchmark; separate from the hierarchy recommendation.
Sources checked 4 November 2026. Recommendations combine published evidence, the task in context, and expert judgment.