second screen application
UEFA Champions League
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.
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.
At the beginning, I conducted interviews with 10 soccer fans to gather information about favored features and possible use cases.
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.
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.
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
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
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.
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.
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.
In the timetable you see a list of the games including the current results of the games.
Users can compare teams or single players and get an insight about goals, ball contacts, player strength and penalities.
The editorial team of the ZDF could integrate live informations about the games into the app like comments, videos, pictures and polls.
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 GruschwitzChief 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 ZaskeCEO / Moccu
"Especially regarding the responsive design and the usability, we can be proud of the application."