HR Grapevine
Head of Design. Editorial redesign and template system.
HR Grapevine needed a clearer route from reading an article to finding the next one or subscribing. I designed and coded an eleven-template system, with shared styles and a sidebar that changes with the page.
Design and code complete. The templates shown have not been deployed
The brief
HR Grapevine is an established editorial site, so the redesign had to improve engagement while keeping its brand recognisable.
The templates had to work for very different pages: a homepage, a standard article, five topic hubs and four article formats, from the big interview to live coverage.
- Year
- 2026
- Team
- I lead the design team across three brands
- My contribution
- Information architecture, template design, front-end code and the design specification
Give the sidebar a clear job.
I put newsletter sign-up and relevant reading into a shared sidebar. Its content changes with the page, while its structure stays consistent across the templates.
On the homepage, the daily briefing sign-up sits beside the lead story. Elsewhere, the same sidebar can hold related articles, popular stories, events or partner content.
Keep the templates working as one system.
The templates share one stylesheet, with the same spacing rules and the brand's type pairing: Inter for the interface and Lora for article text. A topic hub can organise content differently from an article page without adding another set of design rules.
I documented what each layout is for alongside the code, so future changes have a clear starting point.
Include the page structure in the build.
The templates include semantic landmarks and structured data for articles, events, breadcrumbs and the publisher, so search engines can tell what a page is and where it sits. The specification covers this alongside the visual design.
Where it stands
The eleven templates and their design specification are complete. They have not been deployed, so this work has no measured engagement result yet.
I also led an earlier overhaul of the live site. Its engagement results belong to that earlier work, not to the templates shown here.
What I delivered
- An eleven-template system and shared stylesheet
- A sidebar that adapts to the page and its content
- A design specification covering layout, brand rules and structured data
Next, Funky Design Tools.
A batch cropper that grew into a free collection of browser-based design tools.
Rron Imami, London.