Hero redesign across three brand sites · 2026 · UX direction, interaction design and implementation
Giving the homepage room to work
A compact, expressive hero with its own publishing controls, taken from design to working code in less than a day.
Hero redesign across three brand sites
Paul Wilshaw · UX direction, interaction design and implementation
Design and build: less than a day, including a bespoke CMS module
An interactive version of the hero, and of its CMS module, is on this page when JavaScript is on.
The existing hero banner filled the entire mobile screen. Mobile accounted for 84% of traffic, yet fewer than 20% of visitors scrolled below the fold. Most people never reached the other content on the homepage.
I redesigned the hero to take up less space while retaining its presence and personality. The aim was to give people more opportunities to discover what the business offered beyond the featured promotion.
Giving other content a chance
The business had more to offer than visitors could see on arrival. Its mobile layout gave the hero almost all the attention, leaving discovery of other products and services dependent on scrolling.
That made hero clicks an incomplete measure of success. A banner can attract attention while the surrounding experience struggles to be seen. I wanted to understand what would happen if we gave that space back to the rest of the homepage.
Hypothesis
We believe the mobile hero is too dominant. It fills the screen, takes most homepage clicks, and fewer than 20% of visitors scroll past it.
If we replace it with a shorter banner that brings more offers above the fold, attention will spread across the homepage.
We expect hero clicks to fall.
We'll know it worked if more homepage visitors use an offer (make a last click) within a day, on each of three member discount schemes.
- Primary metric: % of homepage visitors making a last click within a day
- Secondary metrics: share of last clicks from offers below the hero; number of different offers used
- Guardrails: hero click-to-last-click rate; commission per visitor, if available
- Set-up: 50/50 split of registered members, 12–15 November 2026, staff excluded, each scheme read separately
Less space, more character
The new hero is more compact, making room for content beneath it. To keep the featured promotion inviting, I gave the artwork depth and movement.
Layers respond to the pointer or finger, a soft shine catches the artwork, and the card gives a little when pressed. Neighbouring promotions peek in from either side, with navigation that responds to interaction.
These details give the smaller banner a tactile quality and personality. It can still make an impression while allowing other parts of the page to attract attention.
Practical to publish
The experience also had to work for the people creating campaigns. Bespoke animation work for every promotion would make it difficult to sustain.
I kept the production approach close to the team’s existing Figma workflow. Artwork can be exported as layers to create depth, or as a single flat image. Editable text layouts offer another route for simpler campaigns.
The bespoke CMS module gives the team control over content and presentation. A preview shows how the banner looks across screen sizes and warns when copy does not fit. The reusable component handles the interactions.
Designed and built in less than a day
The full design and build took less than a day, including the bespoke CMS module. I raised the pull request, reviewed the implementation with engineering and merged it to production.
Being able to work across design, brand, engineering and the existing design system let me make those decisions together and carry the idea into working code. The customer experience and the publishing workflow were developed as part of the same solution.
The carousel uses the wider design system’s colours, spacing and responsive rules. Performance, reduced-motion preferences and controls for automatic rotation were part of the implementation.
Results
Early results, after two days running. Hero clicks fell on all three schemes, as the hypothesis expected: on Health Service Discounts from 3.86% to 2.63% of visitors, on Discounts for Teachers from 5.36% to 2.35%, and on Discounts for Carers from 9.77% to 3.30%. The main measure, whether more homepage visitors go on to use an offer, will be read when the test ends.