Live on the BBC.
Re-designed.
Company
BBC
Platform
Web
Date
2022
Challenge: improve the media player UI for Live content across the BBC's responsive web products.
Outcome: a simplified and more usable live video experience, that lays the foundation for future innovation.
How did I have impact?
01
I collaborated with product managers, developers and designers across teams to lead the design
02
I aligned stakeholders across multiple teams to agree on a cross-platform solution
03
I positively influenced the org structure by presenting successes and failures to senior management
Why was this project important?
From the Beatle's in the 60's, to the 2012 Olympics Ceremony, to Glastonbury and Wimbledon today, live broadcasting is at the heart of the BBC. However 85% of time spent with the BBC is still with linear broadcast output. Optimising the live web experience was an opportunity to reshape user behaviour from linear to digital-first.
The Beatle's live Top of the Pops performance at BBC Television Centre, 1966
Research insights
Working with a UX Researcher I carried out research to understand usage of the current media player UI for live content. We discussed user's live viewing habits, before asking them to undertake a number of tasks around live playback. I helped to shape the recruitment brief and discussion guide, as well as stakeholder communications.
8 participants
Userzoom platform
Live viewing habits
INSIGHT 01
Timestamps are confusing
One of the clear themes that emerged was that user's were confused by the timestamp. The component represented the time the broadcast started and ended, whereas user's understood it to mean the duration of the current programme. This meant they couldn't accurately orientate themselves within the live stream.
The time doesn’t make sense. I don’t know if I’m 11 minutes into the show or it’s the time?
Research
participant
INSIGHT 02
Scrubbing is confusing
Users found it difficult to navigate within the live stream using the scrub bar. This is because the user can rewind up to two hours of a live stream. This means if there are multiple programmes broadcast within this time period the user can easily end up scrubbing into a different programme.
Design exploration
Based on the research insights, and reviewing the live experience across the BBC, I began exploring solutions. I explored core playback features and the user journey of rewinding, restarting and navigating within live broadcasts. This also involved investigating button styles, schedule data and interaction patterns.
From my explorations I then moved to creating initial designs. I took influence from a playback UI framework created by our team and then added additional elements required for the Live UI such as schedule metadata, a 'Live' indicator and 'start' / 'live' buttons.
After creating the initial designs, I explored two different design directions
01
This direction made use of large restart and live buttons, enabling the user to easily tap to restart a programme, or go back to the live edge if they have rewound. The 'go to live' button would only appear once the user had rewound.
02
This direction featured live and restart buttons incorporated within the rest of the controls, meaning we could offer them at the smallest breakpoint. This direction also prevented any potential clashes with subtitles. For these reasons I chose this direction over the first one.
Solving scrubbing
The research had told us that user's were having difficulty with scrubbing and orientating themselves within a live stream. One of the potential solutions I explored was to add chapter points to the scrub bar. This would allow user's to easily see where different programmes started and ended within a live stream.
I explored this idea by using low-fidelity prototypes (made with proto.io) to understand how the interactions could work. Allthough this idea was later de-prioritised due to the technical difficulties of implementation, I shared the explorations with the wider product team and we added it to the backlog for post-MVP.
This VERY rough prototype was useful to explore future features and to demonstrate to stakeholders where we might focus our efforts after the MVP launch
Improving time
Research had also told us that user's were struggling to understand the way that timestamps were presented within the UI. With the new design I simplified the experience by removing the timestamp and replacing it with a 'LIVE' pulsing indicator.
Timestamp iterations
Despite removing the timestamp as a permanent feature within the UI, user's still required a timestamp when scrubbing or seeking within the live stream. I explored different formats of time, and collaborated with a developer to build some variants in code to test with user's.
Usability testing
As mentioned above, I collaborated with a developer to build prototypes for user testing. This made the experience feel realistic and meant we were able to show real live streams to research participants. Some of the things we learnt -
- New player design was easier to use
- New start button was easy to use
- Adding a back to live button was well recieved
- Removing timestamps helped with usability
- We iterated the design based on two findings about timestamps and scrubbing
There were no significant usability issues with the new restart button
Adding motion
After iterating where necessary based on the second round of research, I was able to work closely with a developer to implement motion design within the UI. This was based upon a set of motion principles I had helped create for the SMP, and which I helped to incorporate within a wider BBC Motion Design Principles guide.
The Motion Design Guidelines (above), and how they were applied to the live video interface (below)
Cross-platform experience
Allthough I primarily focused on the responsive web platform, I also worked with the relevant designers and teams responsible for BBC playback experiences on Android, iOS and TV. We were able to collaboratively ensure that the research findings, and new features introduced within the web platform were carried across to native and TV, to ensure a consistent experience across all platforms.
Clockwise from top: BBC iPlayer live experiences shown on TV, web, iOS, iPad OS
Outcomes
0% drop in playback
We launched a brand new media player without negatively impacting playback metrics
Improved usability
The new player was found to be more usable in qualitative research sessions
Brand new features
An array of new playback features all built on a brand new tech stack
See what we shipped*
*This link will only work in the UK, apologies if you are viewing internationally!