Sports hub

TVP Sport is a sports dedicated channel of Polish National Television. Being succesfull broadcaster for most of the major events (Olympics, World Cup etc.) it was lacking the streaming and live results focus on its main page.

My role

  • Headed design for Pyeongchang Olympics and FIFA World Cup event pages, rebuilding sports portal,
    building and managing team (5 designers)

  • Portal has jumped into the top five most visited websites (increase by 10%)
    in this category and the majority of team I built keep working to this day

Pyeongchang Olympics, following existing patterns and grids.

Background

Before setting up the brand new main page - sport.tvp.pl - two separate projects were done:

  • Pyeongchang Winter Olympic Games

  • FIFA World Cup

Thanks to that a lot of knowledge was gathered, a lot of testing was done, not only design wise, but most important, the development. TVP Sport, being a part of the huge organization that TVP is, was unfortunately affected by years of building things separately, differently and without the common approach or structure. Therefore a lot of challenges appeared and great effort was put on overcoming all the obstacles. At the beginning even a simple carousel could be the issue, not to mention all the streaming capabilities we were planning to do.

Both Pyeongchang Olympics and FIFA World Cup 2018 were following the existing patterns, components and grids. This was a wise move to point out all the things that won’t allow us to upgrade.

These were:

  • the grid - 880px width, forcing to squeeze the content as much as possible

  • two column scheme with no horizontal breaks make users get bored quickly (content is very similar or even the same no matter how far I scroll)

  • lack of streaming/live modules on the main page

  • no streaming/live on mobile

  • things such as typography & branding - “skinability” of the page

Outcome

Bringing streaming to front, allowing users to watch games live worked as a charm. Numbers of people online tripled its size even during Pyeongchang Olympics. For FIFA World Cup these went skyrocket - football is super popular in Poland. Quick win, just by adding the live modules helped a lot.

FIFA World Cup 2018, using the same scheme as Pyeongchang.

Timeframe

Pyeongchang Olympics ux&ui was made within 2 months and developed almost simultaneously with wonderful, 5 person development team. I was the only designer working on it back then.

For FIFA World Cup I was able to recruit 4 additional ux designers and the whole design took us 5 months.

 

TVP Sport main page

During Winter Olympics and World Cup, we were observing user flows, their actions and patterns. All the information we gathered, helped to come up with the redesign of TVP Sport main page.

Key goals:

  • going wider, changing the grid

  • keeping the user focus, dropping off the infinity scroll, building containers based on the content type, not the opposite

  • making variants of the main page - live, regular, weekend editions with content organized differently according to purposes

  • connecting social media - TVP Sport has YT, FB and Instagram pages with hundreds of thousands followers, many journalists are what we could call “stars” on social media

  • mobile version created with mobile in mind, not being scaled down desktop; dedicated mobile app for those who’d install

Flexible main page

Keeping the main page alive was achieved by building it around the current events.

Let’s say there’s a Champions League going. The page will reorganize its scheme to focus on this one particular. Social media modules would come in place, allowing to jump into discussion instantly. Results would show up as a separate column and articles or any other fixed sections (videos, photos of the day) are all presenting content related to the Champions League.

Want to summarize the event? Or just the week? There’s a special module at the very top of the page (above the navigation), working as a summary issue.

Weekend edition in place, dedicated module at the top of the page, summarizing the week (or event).

User interests

Making the page flexible means the page will keep changing - not rapidly and not extensively, just enough for all frequent users to get the “fresh content” feeling and never feel bored. At the time the design was made there were no plans to have user profiles on desktop - so it was on journalists team to decide what would show up.

In this example we have a breaking news (LeBron James leaving Lakers), 3 additional ones and underneath there’s the module for the ongoing event in Berlin. If there was no breaking news, then the whole Berlin related section would become the very first.

However, mobile app was built with user interest as a core - categories, topics, even specific teams or countries, all could be selected and work as a filter for what’s being presented. Fully customizable app.

Results

TVP Sport desktop & mobile app combined went high in the ranking of the most popular sports related pages in Poland. During streaming days, especially those with polish athletes, it’s to this day the leader.

Tools

Sketch, Adobe Photoshop

Previous
Previous

Music magazine

Next
Next

DnD Beyond