BBC | 2022
Navigable key moments, match statistics, and line-ups, while streaming live World Cup matches.
As a UX Designer at the BBC, I steered the UX with support from the Principal.
My role involed:
We worked on the core experience in a small multi-disciplinary team, and collaborated regularly with colleagues across the BBC.
For the UX, we consulted with BBC Sport, Media Services, and the Assistive Technology team.
The larger working group came together on a weekly basis for updates and feedback.
Flexible media is content that supports non-linear, personalised consumption.
Outcomes from the work to date suggested audiences valued flexible experiences.
The goal for this project was to enhance coverage of the World Cup - to provide the user with a more flexible live experience on BBC Sport.
- The ability to view and navigate between key match moments
- View match statistics from any point in the match
- View player line-ups
I met with the Senior UX Designer in BBC Sport to learn more about audience needs and work in progress.
Research outcomes revealed a need for in-depth match statistics. Specifically for important matches like the World Cup, and when attention was divided. Participants also expressed their preferred level of complexity.
In addition, the Designers had made developments in the UI and iconography.
Flexible media was one of 5 R&D workstreams identified as an enabler for achieving long term growth.
The workstreams were identified as part of an OKR to increase experimentation and advance innovation across the product space.
By scaling up experimentation, this project would contribute towards the OKR and stimulate further progress across portfolios.
Overall, we had 2 Months before the first World Cup match.
For the designs, we had 2 weeks to:
- Understand the landscape
- Explore potential solutions to determine feasibility
- Define the experience
- Gather feedback for refinements
I decided to use the first week for exploration and to determine feasibility. And the second week for refining the experience.
Due to time limitations, there was a desire to focus on larger screen sizes.
There were concerns that aiming for the World Cup was overly ambitious. To find a workable solution for smaller screen sizes in that time seemed impractical.
However, a desktop-only experience seemed outdated to me. To serve users a truly flexible experience, small screens needed to be considered.
After discussing it with the team, I considered smaller screen sizes in the exploratory designs, while prioritising larger screen sizes.
The idea was to create a plugin for the BBC's standard media player (which was used across the estate).
The plugin would not be able to affect the existing UI and the enhancements would be layered on top.
There were also two versions of the media player. We could only support the older version.
To understand what users were familiar with and how to approach the designs, I looked at:
- Competitor services
- Previous explorations at the BBC
- How the standard media player functioned on BBC Sport
- Brand guidelines and templates for BBC Sport and the media player
I collated findings in a Figma file, which I shared with the working group.
The file outlined the design process (ie. discovery & understanding, ideation & definition, and iterations) for the uninitiated.
I made the file and all the work in progress available for anyone to view, collaborate, and feed back on.
For the key match moments and chapters, there were existing designs that were created 8 years before this project. There were also some designs created more recently by the Project Manager.
I mocked-up ideas that aligned closely with the designs, but also provided alternatives.
After looking at competitor services and talking to football fans, I:
With mobile, ease-of-use and accessibility in mind, the alternatives I suggested included a carousel and a list of key moments.
Outstanding questions included:
The Project Manager and Head of Architecture had started designing and building options for the information panels. I took these ideas as a starter for ten.
The existing designs explored:
At this point, I focused on exploring:
- The best way to access stats and line-ups
- How the panels would work with broadcast graphics
- Applying BBC Sport's best practice for information design
- Applying BBC Sport's style guide
There were several ideas to consider. I sketched or noted them in my notebook, before creating mock-ups in Figma.
To access the information panels, I considered:
I also explored the potential for a draggable panel - so the user had more control over which part of the match was obscured.
I presented the ideas and explorations to the working group. The feedback helped to define the first design iteration.
For the key moments, we discovered that a carousel or list wouldn't be possible for this launch.
Instead we would use markers to identify key moments. We discussed potential logic to prevent the markers overlapping.
Crucially, we realised that a mobile experience was more achievable than initially thought. Particularly with stats showing significant mobile usage.
For the information panels, we discovered that it wouldn't be possible to add buttons to the existing media player UI. And a draggable panel, might be out of scope for this experiment.
The designs used the light mode colour palette. We decided to change this to dark mode in order to align with the media player UI. This would also create a distinction between the interactive panels and the broadcast graphics.
I created a set of prototypes to demonstrate the first design iteration - with feedback from the team in mind.
The prototypes demonstrated the user journey during a match from build up to post-match content.
In version 1, We used markers to indicate key moments on the timeline. And a set of tabs in the top right of the media player for access to the information panels.
For demonstration purposes, I included video of a football match and a trigger for skipping to the end. I also added micro animations to smooth out the experience.
Before creating the prototypes I sketched out the user journey with empathy mapping to identify any additional design considerations.
In addition to the above, I proposed:
- An experience for small screen sizes
- Ways to obtain direct feedback from users
- States where there's no data to show
- Potential error messages
To adapt the experience for smaller screens, I removed the chapters, and text labels from the information tabs and markers. I also introduced pages to the line-ups panel and arrows to navigate between them.
I suggested adding a way for users to provide feedback.
Initially, we thought this could be done through a survey. But later realised that it wasn't feasible to analyse a large number of text responses.
I proposed the ability to provide a star rating, as this was a component that existed in other areas of the BBC.
During the build up to the match, there would be no data to show beyond line-ups.
For the key moments, I mocked up options to set expectations. Particularly as there was potential for the features to be missed. They were only available on hover or tap (like the rest of the media player UI).
For match stats, I mocked up the default behaviour used on BBC Sport at the time.
For potential errors, I mocked up a message with placeholder text. (Later, it was decided to remove the plugin entirely in these cases).
In addition to the visual prototypes, I documented the screen reader experience and requested a dedicated session to focus on the unique requirements.
I presented the prototypes and screen reader experience to the team for discussion. There were a few minor interactions that weren't possible for this launch, but overall the reception was positive.
Most of the feedback included iconography and text changes. There were also requests for additional features, such as player statistics in the line-ups panel.
To gather feedback from football fans, I set up four 1:1 sessions.
I asked participants to imagine they were about to stream a football match on BBC Sport. And prompted them for their thoughts as they went through the prototypes.
The feedback helped to refine the interaction and gave us more confidence in the iconography, text changes, and designs for smaller screens (which couldn't display the full experience).
In addition to testing the UI and interaction design, I also asked participants which key moments and stats they expected to find.
I sent out a survey following these sessions to gather more data that could inform the content.
I created a survey (Google form) to ask respondents about their viewing habits, preferred key moments, and preferred match stats.
Consulting with the UX Principal, and a Senior User Researcher helped to refine the wording and formatting.
We used a card sort style to understand preferences and received 36 responses.
With previous research from BBC Sport, the data gave us enough confidence to prioritise certain key moments and match stats. Particularly on mobile, where space was limited.
I liaised with the Project Manager and Engineers to deliver the necessary assets. I was also on hand for any questions related to the interaction.
Fortunately, there were no big surprises. However, the Engineers had begun work on the front-end earlier than anticipated. I refined iconography for the key moment markers in parallel.
Some icons were established and used on BBC Sport, but others (like the icons for missed and scored penalties) required custom work.
The Project Manager and I looked at competitor services to optimise familiarity for audiences. And I made sure they aligned with the existing icons and style guide.
As the Engineering team were low on resource, I offered to help with the front-end development.
I then worked on refining the CSS and accessibility for the different breakpoints, including:
As live events were required for accurate testing, we conducted tests during the Women's Super League and FA Cup (before the start of the World Cup).
I contacted the Assistive Technology team to help with improving accessibility.
After setting up a meeting to go through the project and general accessibility considerations, I asked the Tester to attend one of the live test events. They provided a summary of their findings, which we used to make the experience more accessible.
We all tested the experience across multiple devices and provided screenshots of our findings.
The results helped to define tasks and next steps for implementation.
We initially considered an A/B test, but in the end, the experimental features went live to the entire BBC Sport audience.
Engineers in BBC Sport were on hand to monitor all products and tools, including the experimental plugin, during the live World Cup matches.
The features had over 950,000 unique users (an average of 47,000 users per game), and 30% returned to use the features again.
Over 16,000 users rated the experience, with an average of 4.1 stars (out of 5).
To understand preferences on a deeper level, Researchers in R&D used a Human Values framework to collate qualitative insights.
They interviewed a diverse group of 12 participants 4 times over the course of the World Cup.
Overall, participants appreciated the ability to consume match content while honouring other commitments.
In addition to reducing screen time, while consuming match content, researchers found there was a positive impact in:
Participants also provided us with valuable feedback on the interaction, UI, and data visualisations, to develop the features further.
The BBC has been on a mission to create a positive impact with digital experiences - this project demonstrated the ability for flexible media to do just that.
The response from this project was overwhelmingly positive - from both audiences and BBC staff.
There have been several projects following this success, including experiences for Winter Watch bird feeder cameras, and Eurovision.
Flexible media has been transitioning fully from R&D to the product space, and there are plans to develop the features for use across the BBC estate, including iPlayer.
Personally, I found working on this project a joy. I'm proud to have been part of a team, that made such a big impact at the BBC.
I was able to steer the UX, aswell as improve my coding skills. It was also a great opportunity to learn more about the strategic elements that bring projects like this to life.