Redesigning The World Cup 2014 Brazil

By Guus ter Beek, Tayfun Sarier, Jordon Cheung and George Grace

Guus ter Beek
6 min readJun 24, 2014

We would like to see a different World Cup

From a football perspective this is a great World Cup, but from a designers perspective it’s not that great. Please let us explain: The World Cup of 2014 in Brazil is at its peak, and so far we have simply been spoiled with great goals and surprising results. But when it comes to the visual way of games appearing on our TV screens, we can’t hide the fact that we’re disappointed in the outcome.

To begin with, we’ve all seen the World Cup 2014 brazil’s unpleasant logo. To quote designer Felix Sockwell, “the fingers are frog-shaped, and the gradients are ham-fisted”. In addition to that, the bevel is making it look smudgy and quite old school.

But it gets even worse when we take a good look at the interfaces of all the big football broadcasting channels. The abundance of clumsy gradients actually makes the score harder to read (certainly from far in a crowded pub), as well as the unmatching color combinations, which Sky Sports, BBC Sports and many others are guilty off. Nowadays, we see our score displayed in various shapes and sizes and none of them stand out. ‘That’s a nice football interface!’ — said no one ever.

Our flat design solution

We decided not only to mock the present-day interface design, but to make a contribution to improve watching live football. We decided to call the talented Jordon Cheung for help, who is an illustrator specialised in flat design illustrations. We knew he was the right guy for the job when we saw a tweet from him criticizing the kerning of a big sports channel’s headline. We then decided to give his agent George a call, and soon after the four of us gathered around the table to talk about creating a flat design interface for football television. We hope you’ll enjoy our concept.

Designing a clear score

The first area of improvement is the clock. We noticed that it’s very hard to create a unique design which is both appealing and clear at the same time. It shouldn’t be taking a lot of space on the screen. Also, time needs to be as clear as can be, because a lot of squinty eyes will be focusing on it during those precious moments.

A closer look

Our score’s design has a clear hierarchy, with time being its most important element. We have taken in consideration the fact that gamblers would like to see a clear time display, because for them every second counts and can decide whether or not they’ll be coming home with the big bucks.

We also believe that the color of the teams is crucial. How many time did it happen to us to tune in on a match and have no clue who’s who? Most sports channels just show a national flag, but this can be rather confusing as some national colors can be represented in both teams’ outfits. By showing teams’ colors in the design, you can immediately distinct them from each other and circumvent the problem of not knowing who’s who.

The Clock

We love a clear time indication, and Helvetica seemed to be the clearest typeface for our display. Also, we’ve added a white timeline around the clock which will give you a visual image of the exact time. This way, whenever you’ll tune in you’ll immediately have a sense of how far you are in the game.

Stoppage time

As most interfaces are just too static, we wanted to add a bit of interactivity. We thought it could be interesting to add some useful informations without distracting you from watching your game. That’s why we added a visual timeline in red to express a sense of urgency and to accentuate those final seconds.

In-game notifications

Our illustrator Jordon Cheung has put a lot of effort in creating flat design icons for our in-game notifications. These white and black colored slates will slide into the screen at any given point, for example when a yellow card is given or when players are being substituted. Those icons are kept as simple as possible, and in a square format which really works well on television. Have a look below at our selection of important football moments explained with icons.

Presenting the fun facts

We’re big fan of infographics, and about how they quickly became part of our everyday life. It’s not just a trend: infographics, pie charts and diagrams participate in your daily inspiration. Our vision of a good interface would integrate all the fun and interesting facts of the World Cup. For instance, most places in Brazil are really, really hot, and at the beginning of the game it would be great to see exactly what temperature our supporting team is struggling with.

In-game infographics

We see ball possession as a very interesting factual information, and we would definitely like to see more of that during the World Cup. For example, we could see the possession popping up during the middle of the first half. In the below case, we’re showing Brazil having the overhand in possession while France is losing it.

Formation screen

We had a go at the formation screen too. It is so important for us, because this is where the excitement begins when you watch a match. What most viewers want to do is to quickly analyse the opposition and discuss their own formation. So why wouldn’t we try to make this special moment before the match kicks off look good?

We hope big sports channels notice us

We would like to get noticed for football’s good sake. We need good design, especially on television and certainly on channels where drop shadows still roam, and gradients are abundant. Let’s go forward and make football interfaces smart and a pleasure to look at. This way football fans will have more insights in the world cup and gain more focus on the beautiful sport that is football.

This is a concept by

Guus ter Beek — Creative

Tayfun Sarier — Creative

Jordon Cheung — Designer

George Grace Represents —Digital illustration agency

--

--