The Paris Olympics served as the centrepiece of the ‘Summer of Sports’ initiative to solidify the newspaper as a premier source of sports coverage. With the Visual Journalism team, I delivered a range of interactive and visually-striking tools that engaged readers new to the Olympics and life-long fans.
Project overview
My role
I solely led end-to-end product design throughout from ideation and research, to QA and delivery. Collaborating with three designers on the visual identity, and journalists, engineering, and cross-departmental stakeholders throughout ensuring alignment on business and user goals.
Challenges
The project aimed to enhance reader engagement by providing a real-time companion that complimented watching on TV or in person. Creating dynamic and digestible tools that met user needs and converted anonymous readers into subscribers while maintaining the Telegraph’s trusted analytical voice.
Research and findings
Discovery
Foundational user research on past events: qualitative reader panel and subscriber feedback analysis was conducted with the Insights & Analysis team to establish baseline knowledge of historic user behaviours and desires. This allowed me to outline a product strategy.
I hypothesised there are three distinct viewer segments: casual enjoyers who want to be told what to watch, enthusiasts who want to watch all events for a specific sport, and Olympic fans who want to plan their day around watching as many events as possible.
Benchmarking
Recognising the competitive landscape, I conducted audits of major publishers seeing how they approached past Olympics. I also looked at their live sports treatment more generally to inform our positioning.
Initial research revealed that a large portion of readers visit BBC Sports or Google for schedules and scores and return to the Telegraph for analysis after the event. This insight focused my vision early on to provide an all-encompassing platform. This garnered strong internal support and guided the project.
Internal focus groups and alignment
To better understand diverse perspectives and ensure alignment I facilitated two internal focus groups, supported by a product manager and product designer, bringing together key stakeholders to brainstorm ideas and pinpoint their plans, goals and success metrics for the Olympics. Collectively we refined user personas, user journey maps and developed a digital experience strategy. Grounded by research and backed by senior stakeholders.
Bringing people from across the newsroom
One of the generated personas
User journey maps
User personas
User personas hyper-specific to the project were generated from three sources: distinct viewer segments identified during discovery, pre-established Telegraph user personas based on average readers, and those co-created with stakeholders during design sprints. Doing so unified user needs and stakeholders with the overarching business ambition.
User flows
Based on the findings from various stakeholders, a range of user flows and workflows were made for different teams, culminating in a network of flows that intertwined the Paris Olympics proposed coverage.
Key insights
Readers typically digest sports in frequent, short bursts skimming for updates, stats and replays before switching focus.
Readers value the Telegraph’s expert analysis and live coverage which must be directly intertwined with current user behaviour.
Olympic viewers often use multiple screens, usually their mobile phone, and tools should be easily accessible from start-up.
Subscribers have a preference for following Team GB. Solutions should focus on their progress.
Solutions
Timetable
Offering an easily-accessible and dynamic homepage timetable that kept users engaged with real-time updates of live events and key moments from the day’s live blog. Effortless navigation to key pages allowed users to find the journalism they were after. It transformed throughout the day, growing in detail with more content to engage with. Towards the end of the day, it offered a preview of tomorrow. The homepage was focused on live events only.
When used in-article, an advanced version was deployed with filtering, so readers of all interests and knowledge could find relevant content or discover something new. This lived with a full schedule page that was written by the Sports desk with suggestions for viewers who were mildly interested or after key people/events to watch this year.
Schedule
Introduced late in the project from user testing and senior stakeholder input, I designed a TV-guide-style timetable, the full monthly, which readers could return to and filter to find the exact event they wanted.
Medals and results
The Medals page, a hero page during Tokyo, was made into the Olympics hub for Paris, celebrating athlete successes and offering vital navigation across the coverage generating over 1m page views. A medals carousel provided immediate updates after events. Users were able to deep dive into current and historic data of Team GB and other countries, comparing between them.
A daily image carousel was considered, each day having a hero image curated that could act as a time capsule at the end. Unfortunately, this was built but killed days before the opening weekend due to limited resources to effectively manage it.
Visual identity
Design ideated in parallel with my initial exploration on the visual identity for the Olympics to lead key articles, social media and the Sunday Telegraph Sports supplement. Helping align the Olympics to other initiatives, and identifying ways to bridge the gap between digital and print.
Article lead asset graphics
Olympics coverage logo
Index page branding
Design system
This project forced us to re-consider how information is presented in-app and the homepage. With my experience leading Particles I was able to define all-new styles for the design system. Dense information cards became the new standard for the homepage, slotting neatly throughout to complement headlines and evolve glanceable storytelling.
This offered an opportunity to standardise elements, including flags, team names (countries) and leaderboards. Now in the Figma asset library with production-ready components and tokens (SCSS variables) reduce development time. This was the deployment of the Frosted Glass which became a key design language going forward, allowing for improved depth and visual interest.
Build
Working closely with Digital Innovation engineers from the outset, I ensured their early involvement in defining the final product and addressing potential issues. Collaborating with SEO, defining key page structures to ensure visibility on Google and Apple News.
This initiative introduced new functionality throughout and challenges. One of the original ideas was to provide live event data for readers in Paris but was ultimately removed, rather, guiding journalists to write key information in live blogs which would surface on the homepage in the timetable. This too was a major challenge but was overcome, allowing the homepage to feel lively and bring significant value.
Results
Outcome
The opening weekend exceeded expectations with over 10 million page views, 1,600 registrants and 500 new subscribers, surpassing the entire Tokyo Olympics coverage. The homepage Particle drove over half a million visits to the Medals & Results page, the particle had ~30s average engagement. This validated research as readers interacted in short bursts to complement their viewing habits utilising strong navigation to articles and tools.
Retrospective
Early developer involvement proved critical but involving them in focus groups offered a unique perspective to limit scope within technical boundaries. The visual identity development revealed collaboration opportunities between Design and Product as finalising creative took longer than expected. Collectively, these highlighted process improvements for future large-scale live events.
Project credits
Creative
Olga Petrusewicz
Lead Designer
Ryan Nevill
Senior Designer
Kathryn Tonks
Designer
Jake Cook
Motion
Digital Innovation
Oliver Edgington
Director of Innovative Product
Florin Bratescu
Lead Developer
George Loakeimidis
Lead Developer
Alexander Ivanov
Senior Developer
Miles Barriball-Saw
Senior Developer
Product
Ben Rubinsztein
Senior Product Manager
Kevin He
Product Designer
Visual Journalism
Rachel Jones
Head of Visual Journalism
David Stevenson
Head of Visual Journalism
Rachel Matthews
Senior VJ Editor