Hero Component.
Designing the new homepage hero component for Nationwide.
The Challenge.
Nationwide set out to increase brand distinctiveness on its homepage without compromising accessibility or design system consistency.
As part of this initiative, I led the design of a new hero component that could scale across viewports, integrate cleanly with the existing design system, and support evolving content needs.
​
The component needed to balance strong brand expression with the constraints of a large, regulated organisation, ensuring it was immediately usable by multiple teams while remaining flexible enough to support future campaigns.
Strategy & Design.
I focused on amplifying existing brand assets rather than introducing new visual language.
The solution deliberately dialled up simple UI elements and re-used familiar brand cues, including Nationwide’s core colour palette and the pill-shaped container derived from the logo.
​
Structurally, I constrained content from both sides of the viewport, allowing the hero imagery to bleed horizontally across the page.
This approach achieved two outcomes:
-
Increased visual impact at the top of the page without increasing vertical height,
-
Freed up horizontal space, solving a recurring internal issue around content density and truncation.
​
By extending the container width, the component could accommodate richer content without introducing additional variants or one-off layouts, reducing future design and development overhead.
Responsive & System-Ready.
The component was designed to work consistently across all breakpoints, maintaining prominence on desktop while adapting gracefully for smaller viewports.
Optional add-ons, including secondary CTAs and supporting brand logos, were built in as configurable options rather than bespoke variations to help the component work more globally.
​
This ensured the component could be reused across homepage states and future campaigns while remaining compliant with system constraints and accessibility standards.
The Solution:
Throughout the process, I worked closely with the website team, brand team, and design system team to align on constraints and implementation details.
Regular reviews ensured feedback was incorporated early, allowing the final component to be shipped as a production-ready pattern rather than a one-off design.
​
By the time of delivery, the component was immediately usable across teams, reduced the need for custom hero layouts, and strengthened brand consistency at the most visible point of the Nationwide website.