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.

The top of a match detail page, informing about score, goal scorers and an event timeline.


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.

The top of a VI PRO article

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.

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.

The top of a match detail page, informing about score, goal scorers and an event timeline.


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.

The top of a VI PRO article

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.

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.

The top of a match detail page, informing about score, goal scorers and an event timeline.


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.

The top of a VI PRO article

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.