Editorial Web Design & UX Redesign for Empire Magazine
+48s
Longer sessions
Session duration increase post-launch
25%
Lower bounce rate
Article pages: 68% → 51%
138%
Signup lift
Newsletter conversion: 0.8% → 1.9%
6wk
Full delivery
All page designs, mobile + desktop
Case Study
Empire Magazine is a cultural publication covering music, style, and creative entrepreneurship — a voice for artists who build their own lanes. When I worked with the Empire team between 2019 and 2021, the challenge was making a digitally-native magazine feel as intentional and curated as a print publication.
The Challenge
The goal was specific: redesign and rebuild the editorial web experience to increase average session duration by at least 30 seconds and reduce bounce rate on article pages by 15% — both measured over a 90-day post-launch window. The site needed to feel editorial-grade on every screen size without sacrificing the fast-load behavior readers expected.
My Role
As Web Designer, I owned the visual direction of every reader-facing page — article layouts, category pages, the homepage editorial grid, and the newsletter capture experience. I worked alongside editorial and the backend team to ensure designs were developer-handoff-ready and CMS-friendly from day one.
What We Achieved
- Average session duration increased by 48 seconds post-launch, exceeding the 30-second target
- Bounce rate on article pages dropped from 68% → 51% — a 25% reduction against a 15% goal
- Designed a modular article layout system accommodating long-form features, photo essays, and quick-hit news without template sprawl
- Newsletter signup conversion on article pages improved from 0.8% → 1.9% with a redesigned inline capture unit
- All page designs delivered at both mobile and desktop fidelity within 6 weeks of kickoff
How We Got There
Discovery
Audited 3 years of editorial content, benchmarked competitor publications, and mapped reader journeys to identify the highest-leverage layout changes.
Design
Defined a modular article layout system — feature, photo essay, and quick-hit — with a shared typography and color foundation that worked across all editorial formats.
Handoff
Delivered developer-ready specs with annotated Figma files, responsive breakpoints documented, and CMS field mapping for every template variant.
QA & Launch
Ran a two-week QA pass with the backend team, addressed rendering bugs found on real content, and coordinated launch timing with the editorial calendar.
Measurement
Tracked session duration and bounce rate weekly for 90 days post-launch, confirming both targets were exceeded within the measurement window.
Lessons Learned
Editorial hierarchy is a performance tool
Every layout decision that made articles easier to scan also kept readers longer. Clear hierarchy and generous whitespace reduced bounce rate more than any technical optimization.
Modular systems prevent template sprawl
Designing three article templates instead of one per story type let the editorial team move fast without requesting custom layouts — the real measure of a reusable system.
Measure what matters before you start
Setting the 30-second session-duration and 15% bounce-rate targets before design began meant every decision had a clear success criterion to evaluate against.