Watch the Olympics 2020 experience only on Eurosport.
Eurosport provided an extensive coverage for the Tokyo 2020 Olympics across its products. I led the design experience from start to finish across Web, Mobile App, Connected TV App and helped bring to life a premium viewing experience for 47 million unique users.
Project: Olympics 2020
Company: Eurosport
Sector: Sports Media
Role: Senior Designer
Duration: 1 year
Completed: 2020
Native Mobile App | Phase 1
Eurosport partnered with an ad agency to create a style guide and unique branding.
My job was to bring that experience and re-design the mobile app to reflect the spirit of the olympics. The unique and challenging part of this project was to divide the experiences through a master switch which would direct users to regular eurosport content and olympic content.
Switching from Olympic to Non-Olympic Content (aka App Inception)
The most essential part of this project was to create a seamless transition between Olympic and Non Olympic content. This master switch would bring users to a different part of the app, similar to switching an app within an app. The default stage during Olympics period would be Olympic app. However if a user wanted to see regular Eurosport content they would simply tap on the floating toggle and be redirected there.
User Research Phase
We held three different rounds of research to understand how users interact with the switcher and if they can easily access it and wether they understand the difference between the two hubs (app within an app)
User Testing Round 1
User Testing Round 2 + 3
Design + Ideation Stage
Post research phase I looked into how to apply the style guide elements on the toggle. Through multiple color studies and font explorations I settled on a yellow and black icon which was accessible in both hubs and would be easily identifiable by our users.
Final look and feel of the master switch (toggle)
Connected TV APP | Phase 2
Eurosport Player is the live and on-demand multi-sport OTT service available on Connected TV. During Tokyo 2020 Olympics, Eurosport Player also created a separate hub to host all Olympic related content.
Switcher
Following the same approach from Web and Mobile app - Connected TV created a hub to host only Olympic content. Once a user launched the app they would be taken to a master switcher which would allow them to choose between the different hubs.
Using the existing style guide, I led the design rebrand of CTV by managing other designers ensuring that all designs were consisted across all three platforms (Web, App and CTV).
Ensured all designs were consisted with the IOC (International Olympic Committee) guidelines and successfully launched all products in Summer 2021.
Web Responsive | Phase 3
Following the same direction in order to create a cohesive experience through out platforms.
Main goal of this project was to create an Olympic Hub Destination within the existing website of Eurosport.com. This Olympic Hub would include a different branding, different data components such as medals table, athlete profiles, schedule and latest results however the biggest challenge was how to differentiate the two platforms.
Key Features
Manga Branding
Navigation Switcher
Smart Header
Medal & Results Homepage
Multi Data Components
Previous Homepage Design for PyeonChang ‘18 Winter Olympics
Tokyo 2020 Olympic Homepage
Medals & Latest Gold Results
Introduced a new component which would be seen on the below the page fold on the Homepage that would show latest medals.
Multi Data Components
Through user research however I found that users wanted to access fast and easily the latest medal results instead of going through the Medals hub or scrolling for the widgets seen above. Thus, I introduced a new component which would sit beneath the main navigation and would show the latest medals by countries and latest gold by athletes.
Additionally the Daily Key Events Widget was introduced as well which would show: Live, Upcoming and Finished events.
Web, Tablet and Mobile Screens showing the new Medal Results banner widget
A tab approach was adopted at the top navigation which the users could select to view Olympic Sports or go back to home and see Non-Olympic content.
Additionally there were clashing requirements for the hero page from multiple stakeholders (advertising, commercial, editorial and senior management.) I was able to define a "first half" of the home page fitting the different elements and satisfy the requirements under a smart hero which emphasised a key video/article page - with 4 articles that made the hero come above the fold of the page so it would not be lost. The prominence of the banners and the premium content lead to the increase in banner consumption and subscription.