Viasport — the creation of a sports product

Viasport is an advertising based sport news service with over 500k visitors every month. Viasport is owned by media giant MTG and has the Nordic rights to a large number of premium sports content like Premier League, Champions League, NHL, NFL, PGA Tour and many others.

For us the journey started with a meeting in april 2014. Like many other digital products the project grew from its original scope which was to create the UX and design for Viasport Rio Olympics 2016 project.

In the end we were responsible for the UX and design for the entire responsive website, the app and the editor CMS.

One of us is a sports nerd — the other one didn’t even know the difference between Champions League and Premier League in the start of the project. A problem? No, on the contrary, this turned out to be a perfect match!

The problem with a lot of sports sites seems to be that it either is built by sports nerds (think news, stats and content) or by designers (think white space, large images, and flat icons).

We wanted to mix these both perspectives to find a solution where the actual sports are in focus and where a modern design approach would help the user in browsing and exploring the content.

Simply put: to create a modern-looking sports product — with lots of content but without the clutter.

The users

We knew that a lot of the visitors arrived from social media, and that many of them used their mobile. The problem was that they didn’t stay long. They arrived, read an article (or watched a video) and then left.

At the same time, we also knew that the editors at Viasport pushed out a lot of up-to-date, high-quality content which you couldn’t find anywhere else.

We also took into consideration that some users want to get a quick overview of the latest news, others want to dig deeper into their favorite teams, players and leagues.

What we did

Viasport is present on several markets including Norway, Denmark, Finland and Sweden. First of all, we wanted each market to have the same structure and navigation. We placed the actual sports in the top navigation. Every sport got their own start page and their own sub navigation. Most users are there for one type of sport and the top navigation helps to filter out what they’re not there to see.

Each market can decide which sports they want to display in the navigation, for example handball is bigger in Denmark, Hockey bigger in Finland etc.

Prototype of navigation created with principle.

Since most users arrive directly to an article or video page we created a continuous scroll where related articles and videos are stacked upon each other. On the desktop, we created a story navigation in the bottom of the page. The story nav serves the purpose as both a progress bar and navigation within the related articles. It also exposes the user to more content which makes them watch/read more.

Story nav prototype.

We divided the page into three areas on the desktop. On the left side is the connection to social media & login. The area in the middle is the main content area, and on the right side is the broadcast area. The broadcast area connects to Viaplay where the live sports are shown.

Grid and layout of the framework.

We also had the opportunity to create the UX for the editor CMS. We started with interviewing the editors from all countries to get a better understanding of what they lacked today and how they wanted the new CMS to function like. We got rid of unnecessary links and functions and focused on the main flows. Also, we wanted the editors to create their content in one place, having access to all related widgets exactly where they were, instead of moving them to different places whenever they wanted to add a video or a widget to their story.

Viasport CMS

The project had a strict MVP approach but still with the goal to launch a complete product as the first version. We like to refer Cupcake model.

Cupcake model” which means to launch a smaller yet complete product (which can be built upon) instead of first releasing a dry cake and then the icing and the filling.

MVP launch

We saw the immediate improvement in both visited pages and duration of each session! Users stay longer, surf more pages and share even more than before!

Results after launch.

We are currently working on both small fixes like updating the Video pages to bigger projects like creating a logged in version for the users. We’re baking our wedding cake, so to speak.

Lessons learned

Stakeholders

One of the key factors to a successful product is to have a product owner who can build and push the team forward. We had the pleasure to work directly on site with a dedicated product owner who both had a vision and the internal mandate to change things around.

Change of scope

Be prepared for changes in the project scope. In our case, we started with the Olympics project but ended up doing the entire web, app, and CMS. This meant big changes especially when it came to the navigation and structure. What worked for one part of the website (Olympics) may not work for all the parts (Olympics, Football, Hockey, Motor etc).

Involve all markets

If a project is to be launched in more than one market it’s important to get out there and listen to all of them as soon as possible. Otherwise, the risk is you get important information too late.

We had the opportunity to meet stakeholders from the different markets at an early stage, which meant we didn’t have to make late adjustments to specific markets in the end of the project.

Idea backlog

During a creative process, some ideas must always be put on hold. Instead of losing them through the process; create an internal backlog of good ideas. After releasing the first version — ”the Cupcake” — you can always go back to your bank of ideas and see if they’re still worth bringing into the project.

Visualize your idea

When you are cooking an idea always try to visualize it. Set your level based on who you’re going to present for. For design savvy people a rudimentary sketch can do the trick. For less design oriented people increased fidelity is often needed. This way you ensure that everyone has the same idea and are referring to the same things as you discuss the viability of the feature.

Thank you for reading, follow us on Medium to hear more of our ideas. ❤️