Redesign of the largest online football platform

During my time at Voetbal International as a UX designer, its sluggish website transformed into a future-proof platform during one of the most intensive projects in my career.

1-0 down

Voetbal International, VI for short, is the oldest magazine about football in the Netherlands. I joined VI in 2015. Back then, the high traffic website was not built responsively, and it wasn’t performant. From a business perspective VI’s digital platform didn’t satisfy either. The cumbersome content management system was not flexible enough to provide room for new editorial initiatives and, moreover, developers struggled since there was virtually no documentation or a decent environment they could work in.

On top of that, VI had to cope with a steep downward trend in magazine subscribers. Naturally, one of the priorities during my time at VI was to come up with ideas to generate new income.

A motivational half-time speech

To drastically change VI’s situation, it was decided that almost everything tied to it’s online website should be redesign and rebuilt. It all started with the search for a new content management system. We found one in Magnolia thanks to a perfect pitch (pun intended) by Info, which came to be our partner in the process.

During the first few weeks of us working together, we made an inventory of requirements, needs and wishes for both editors and users. It was insightful to watch the editors’ workflow and question them about possible pain points during the observation. We also interviewed a handful of users who gave us a better understanding of their needs and frustrations. Full of inspiration on how to turn things around, I started working on wireframes.

A partially completed knockout bracket for the World Cup 2018 in Russia that adopts key branding elements from that tournament. — The lack of flexibility in anticipation of big football events was a major pain point . In the end, we were able to create themed webpages with custom styling and elements, such as a knockout bracket for the World Cup.

A wireframe with 4 columns containing data about match results, league standings, player rankings and a player of the week for the Dutch Eredivisie. — Wireframe for a shelved feature: showing competition standings and statistics on the homepage.

Wireframe of 4 highlighted articles in a grid layout. — Concept layout for highlighted articles on the homepage: a grid of three images with a ratio of 3:2 and a single image with a ratio of 4:3 (in portrait mode).

Screenshot of the original design for the homepage. — The original redesign of the homepage accommodated editors with highlighting content on the left side, and frequent visitors with the latest news on the right.

2-0 down

A reorganisation happened. My colleague who was responsible for digital design got laid off, and I took on the challenge of taking over his task. I felt confident I could deliver. Following the atomic design principle, I created a modern look and feel and ultimately, visual mockups for several key pages:

An article page that displayed the core editorial content (VI publishes 50+ articles per day), and an accompanying overview of all news.
Data driven pages, such as competition standings, team information and (live) match data, and overviews for all.
A media overview and detail page for non-textual content.
A homepage, where most of this information came together in both curated and chronically ordered lists.

Comeback

A fast, responsive, more flexible and scalable platform was built. It’s launch went hand in hand with the kick-off for VI PRO, a digital subscription for new, premium content. While I particularly enjoyed working on its branding (except its logo): I sketched, crossed out, made HTML prototypes [example 1, example 2] and dotted the i’s.

Registered users could read 5 PRO articles per month for free, and subscribers can even share full articles with their friends. This helped to double the amount of subscriptions within five months after its introduction. Subsequently, each milestone was celebrated in the office.

A discarded concept for VI PRO’s branding.

A screenshot of the top of a PRO article, clearly showing its unique design elements. — The final design for a PRO article.

Winning goal in stoppage time

After the redesigned site went live, my team and I started working on improving the homepage experience. A new feature dubbed ‘topics’ enabled editors to create collections of news articles. Highlighting topics instead of several related news articles lead to more variety in content on the homepage. Moveover, implicit relations between articles were now made obvious to users.

Additional editorial freedom in homepage layout was added to overcome its somewhat static appearance. I designed a handful of grids, varying in the amount of items, whether or not space is reserved for a widget —either a topic or data-driven content such as match results— and if the arrangement of items within should be mirrored.

Put together, this resulted in a highly flexible homepage I’m very proud to have contributed to.

A screenshot of an improved version of VI's homepage, that introduced new features and flexibility. — The introduction of collections and grid layouts made editors even more flexible in curating content on the homepage.