Champions Journal is a publication driven as much by its stunning design and photography as it is by its writing. Each feature in the print magazine jumps off the page, so encapsulating that style and energy in digital format was always going to be a challenge. That is unless you’ve got Rebecca and Zdravko – or Z as he’s known in the studio – on deck to meet it head on. Here, the two digital designers talk through the concept and process behind the magazine’s exciting new website – champions-journal.com

What were the key elements that needed improving from the old website?

Z: We first did some testing on the old website, what works and what doesn’t work and where we can add more flair. It looked static and didn’t really display the style of the magazine, so we wanted to make it more immersive.

Rebecca: Champions Journal is a very aesthetic magazine, and since it’s all about lifestyle, fashion and culture, the images are such a massive part of that and the website needed to do it justice. From that point of view, it was just about showcasing that imagery a bit more.

Did you have a vision for how it would look and feel?

Rebecca: Before we started, we did a lot of research looking at the physical copies of the magazine. We highlighted a lot of pages that we felt could translate quite well into digital. So, we took photos of the magazine, scanned them in and thought how they could work in a web layout.

Z: Especially something like the contents page, it’s very digital-friendly so we wanted to bring that into the grid system that we set up for the articles – a bit asymmetrical and off-beat. The Short Passes and Long Balls intros would also work great, because they are big blocks of colour with big bold typography. We looked at a lot of different websites, but realised we already had what we needed here in the magazine. We did look at some of our competition, but if you copy your competition you’ll only end up as good as them or worse!

From a user point of view, what did you feel needed to improve?

Z: We wanted to move to more of a digital focus for the magazine. People don’t buy as many magazines but you’re always on your phone, right? So, we wanted to provide a better way of going through the magazine and reading it on your phone or on your laptop. We extracted out a lot of our categories, popular tags and the way to navigate to the articles which gives a feel to the website that you’re actually reading the magazine. We also introduced a search bar, which obviously makes it a lot easier to find relevant content.

Rebecca: We also decided to add a date onto the articles, because that wasn’t prominent before. So just being able to know when an article is actually from is useful considering the content is from a printed magazine.

What were the biggest challenges you faced?

Rebecca: The brand was a big thing. Compared to the magazine, how the brand is being used digitally is very different. It’s quite neon heavy. Trying to get the balance of using the colours with imagery was tricky.We really struggled with the pink, not overkilling it with graphics. Obviously, we want the graphic language to come through, but I think if you overuse the colours, with the sort of imagery we have as well, it just looks so intense. So, it was about finding the right balance. What we find from doing projects is designing them in Figma and then translating them into Webflow while building them doesn’t always work how we want it to.

Z: The sheer number of articles was also a challenge.We had 968 articles when we picked it up, so any change we wanted to make would have to change across 968 elements. It was about making these changes in a considerate way, to not change the CMS setup and how things are connected so it can work on everything we’re inheriting, so as to not mess up the things people are already used to.

‍

How did you combine your strengths to get through this project?

Rebecca: A lot of calls! It’s a very collaborative process between the two of us. Occasionally, of course, we’ll have a list of tasks and divide them up.

Z: Yes, once we share the vision we can divide the work, but before we share the vision it’s very much like we need to be together doing this. And with the tools we use, we work on the same artboard at the same time even if we’re not in the office together we can be collaborating in realtime. That really helps us settle on a vision and once we have a vision we’ll be like ‘OK set a timer, put some lo-fi hip-hop on, race through these tasks!’

Rebecca: When it comes to the actual build part of the process, Z tends to cover more of that, and if there’s asset creation, that will fall on me.

‍

‍And was there an overarching vision beyond this redesign?

Rebecca: I think it’s ultimately very community focused.We really wanted to lay the foundation to give people ways to get involved instead of just saying, “Here’s an article about so and so.” So, it’s just adding small things like that that show there’s actually people behind the project.

Z: This project started two years ago, it was one of the first things when I joined. We had a few meetings and we were really ambitious about what we wanted. Realistically, this is more of a stylistic upgrade rather than a full update. Hopefully now more people will be on the site and we’ll have more time to devote to it. The next steps are to look at more subscription models and how we can improve the per article experience. We’re yet to tackle expanding the community and how we can make the ultimate ChampionsJournal web experience. Much work to be done!