Champions Journal Online Magazine
About the project
GOALS
Transform the unique visual style and expressiveness of the physical magazine into a digital experience that feels just as bold, premium and editorial.
Evolve the site from a simple storefront into a holistic platform — combining immersive articles, competitions, e-commerce, and multi-tier subscription packages under one cohesive system.
CHALLENGE
The existing site already had over 1,200 CMS items spread across multiple collections — with content ranging from shop items to long-form editorial pieces. Untangling that structure and preparing it for a much larger, more complex platform was the first hurdle.
On top of that, each article came with its own mix of stories, visuals, and interactive elements. I had to design a flexible Design System that could adapt to all of it — while staying scalable, easy to use, and future-proof for the editorial team.
Solution
I started by breaking down the physical magazine — translating its layouts, typography, and structure into flexible components that could live online. From paper to page, the goal was to capture the editorial feel while adapting it for responsive, accessible design.
On the technical side, I built out a robust CMS system in Webflow — with tightly structured collections and cross-referencing that allowed for dynamic content sorting across the site. This made it possible to offer a tailored experience for each article, without losing the consistency and scalability of a templated system.
Let's Jam
Research & Design System
The first step was to study the physical magazine and break down its visual DNA — how it used space, typography, layout, and pacing to create that distinct editorial feel. The goal was to carry that essence into the digital experience in a way that felt intentional and gave the website a unique look and feel.
I created a design system rooted in the magazine’s core principles — defining colour usage, typographic hierarchy, and layout rules that could adapt across screen sizes and content types. This formed the visual and structural backbone for the rest of the site.
In parallel, I analysed user behaviour in Google Analytics to understand which pages needed the most attention. This helped prioritise design effort and identify where visual upgrades would have the biggest impact on engagement.
Structure & Navigation
Navigation and discoverability was a very important point in this project. Having so many articles across different issues and categories, meant we need a good way to organise, navigate and search the website.
I started by mapping the core sections such as articles and issues - to allow users both to read content online, go from one article to another (within similar or suggested topics), and to shop the physical magazine. At the end of the day we didn’t want the digital product to replace the physical one, but rather compliment it.
From there, the focus shifted to user flow — thinking about how to guide users through the site in a way that felt natural but also aligned with business goals.
Wireframing
In the wireframing stage, my focus was on structure, flow, and flexibility. I needed to ensure the layouts could adapt seamlessly across breakpoints, that content had space to breathe, and that the navigation patterns we mapped out would hold up once put into context.
I spent time exploring different article layouts — testing how imagery, text, and interactive components could come together to create an immersive reading experience without compromising clarity. I also built a flexible grid system to support article previews across various pages, and introduced sticky behaviour in the shop view to keep key information accessible without interrupting the browsing experience.
This phase was all about testing ideas fast — putting structure and interaction to work before stepping into full visual polish.
High Fidelity & Article Layouts
Moving into high-fidelity design, the focus was on translating the bold, expressive energy of the magazine into a digital format. I leaned into big typography, strong imagery, and purposeful whitespace to give the layouts the same editorial presence as the print version.
This phase was about pushing the wireframes with the design system — bringing everything together into a cohesive, confident visual language that felt sharp, elevated, and distinctly Champions Journal.
I created a set of modular article layouts to accommodate different types of content — from in-depth interviews and cover stories to photo-led galleries. Each layout was designed to support interactive elements like sticky headers, scroll-based transitions, and image reveals — adding subtle motion and engagement without overwhelming the reading experience.
Webflow Development and CMS
To complete the end-to-end process I took the designs from Figma all the way through to a fully functional, live product by building it in Webflow.
One of the biggest challenges was working with over 1,200 CMS items across multiple collections. I spent time reworking and expanding the CMS structure to support the new design — setting up cross-referenced content that allowed for varied layouts while keeping everything easy to manage for the editorial team.
On the technical side, I made sure the site was fully responsive, performance-optimised, and SEO-friendly — with structured data, alt tagging, and optimised assets handled cleanly across CMS pages.
Social Media
