• second screen application

    UEFA Champions League

    cl.zdf.de

To accompany the soccer tournament of the UEFA Champions League, the second german TV channel ZDF planned to launch a tool with statistics and additional informations of the games.

My role

I was responsible for the user experience design of the responsive web application and for leading the visual design team and the development team together with the technical director Andreas Hug.

Merken

The Challenge

The application needed to run on mobile, tablet and desktop devices.
The webapplication should be able to serve 1 million users with different use cases, for example at home in front of TV but also on the way with only a mobile device at hand.
It was necessary to do a priorization of the large feature set and also to define how the application should automatically modify during the tournament.

THE APPROACH

user interviews

user interviews

At the beginning, I conducted interviews with 10 soccer fans to gather information about favored features and possible use cases.

personae

personae

I created 3 different personae for the design. I also did a definition of use cases aswell as a priorization of the feature set. For our design, we focused on people in front of TV, people on the way to a public viewing and people who are at work while their favourite game is on TV.

wireframing

wireframing

I started to create an overview about the screenflow of the application. Then, I did the wireframing for the mobile version and adapted the design later for tablet and desktop accordingly.

creating moodboards

creating moodboards

To inspire the visual design team and to get the buy-in from the product managers, I was researching for best practice application designs. I developed different moodboards for the visual design team accordingly.

specifications for development

specifications for development

The application needed to automatically modify during the tournament. Therefore, I created a roadmap of the application to brief the development team. I also created specifications for each feature and handed them to development with the wireframes.

organizing the team

organizing the team

To organize the team of 18 people, we conducted a daily stand up meeting with the design and development team. We used a Kanban board to discuss the feature development of the day. Specifications, concepts, wireframes and visual design got uploaded and combined with the daily tasks in Redmine. The technical director and me attended a weekly meeting with the product managers and the external statistic deliverer to discuss next steps and get the buy-in of all stakeholders.

The result

Users were able to use the website on all devices. Even if it was a web application, we tried to include navigation and interfaces with HTML5 and CSS3 which allowed a user experience like a native application would do.

 

Merken

Home

Home

On the home page, you see the upcoming game on top. Users can choose between an overview of the tournament with announcements of the upcoming games and game statistics or a list with all features of the application.

Timetable

Timetable

In the timetable you see a list of the games including the current results of the games.

Statistics

Statistics

Users can compare teams or single players and get an insight about goals, ball contacts, player strength and penalities.

Newsfeed

Newsfeed

The editorial team of the ZDF could integrate live informations about the games into the app like comments, videos, pictures and polls.

Live Ticker

Live Ticker

Users can follow their favourite games in the live ticker. You can choose the games you want to display aswell as the information density you want to see.

Dieter Gruschwitz

Chief editor sports / ZDF

"The 'Web-Tribüne' brings the TV and online experience of the premium product Champions League closer together. To check interesting additional information on your smartphone while watching TV is meanwhile a common user scenario. Now you can use the 'Web-Tribüne' to find interesting content, no matter if you're at home or in a bar with friends."

Björn Zaske

CEO / Moccu

"Especially regarding the responsive design and the usability, we can be proud of the application."

MEDIA

Our app in www.horizont.net

Our app in www.wuv.de

Merken

Merken

Merken

Merken

Merken