a new hero section for a broader audience
Product Designer
Feb 2024 -March 2025
Product Owner, 2 Engineers, QA, UXR
the problem
The old homepage was built for one type of user called 'the reader'. Our new strategy required it to work for customers, prospective authors, corporate partners, agents, and established authors. The hero section was the most visible place to fix that.
business need
Meet the needs of multiple user profiles like customers, corporate advocates, prospective authors, agents, and established authors all from a single entry point.
approach
Built a bento box grid component that signposted different sections of the site based on user intent, replacing a static editorial hero with a navigable, multi-path layout.
outcome
29% increase in user journeys ending in a retailer click
100% increase in homepage traffic
15% reduction in reliance on search since launch
Navigation use down 60% as users found other routes through the site
1.
discovery
Legacy page
the old hero wasn't serving most of our users
Analytics made the gap clear: users kept going straight to the menu and search bar to find what they were looking for. The homepage wasn't part of their journey, it was an obstacle.
60% bounce rate
Typical journey: home → search → back to home which I took as a sign users couldn't find what they needed
Homepage played almost no part in clicks to retail
Most-visited destinations: company pages like 'Work with us' and 'Get published', and brand pages like Penguin Classics
None of that was being surfaced. The old site was optimised for editorial content like reading lists, author interviews that served a niche audience while ignoring everyone else.
2.
approach
design goals
signpost more, assume less
The answer wasn't a smarter editorial strategy. It was giving different users a visible path from the moment they landed. A bento box grid let us surface up to 8 different sections at once: books content, corporate pages, the Penguin Shop, social impact links, and campaigns.
The 8-box first, 6-box later trade-off
My initial design was a 6-box grid for the homepage. But because of dev resource constraints, we prioritised the 8-box version first. It was more versatile across other pages like the Discover Hub and Social Impact, meaning more teams could use it sooner. The 6-box is planned for later in the year with the 4-box shipping already.
It was the right call for delivery, and the component was designed with all three grid variants from the start so nothing had to be rebuilt.
3.
design
🚀 shipped design
🎨 design decisions
1
gradient backgrounds for readability
One of the biggest constraints was keeping all text readable across any image. I added a linear gradient on each card and a drop shadow on the letters to this keep the text accessible and WCAG-compliant without restricting the content team's image choices.
2
hover states that communicate clickability
The old site was very static and gave users little feedback. On hover, the gradient expands and an arrow appears to send a clear signal that the box is a link, and an invitation to click through.
3
a consistent back-end experience
Content editors and admins needed to be able to manage this component confidently. I worked with the content team and PO to make the back-end match conventions already used across the site — clickable preview, sidebar controls, clear labels. With a lot of different people managing content, consistency here reduces errors and training overhead.
4.
impact
more users reaching the right places
Funnel analysis showed a much cleaner journey to retail. 29% more visitors reached high-conversion pages from the homepage, compared to near-zero before.
The company and publishing pages tell an even sharper story. Visits to 'Work with us' pages went from 9 to 3,924 over four months. The podcast page went from 0 to 1,500 visits over the same period. These aren't just traffic numbers — they're users we weren't reaching at all before.
5.
learnings
the 8-box grid may be too much choice
Hick's Law in practice: presenting users with 8 options adds cognitive load and likely contributes to the bounce rate increase. My instinct is that the 6-box version — fewer choices, more focused — will perform better on the homepage specifically. That's the hypothesis we'll test when it ships.
personalisation could make this much more powerful
We're currently testing using the bento box to surface personalised content for returning users. If someone has visited genre pages before, they see related articles in their grid. Early results are promising — 50% uptake from users interested in history. If that holds, it changes the component from a static signpost into something that gets more useful over time.