Making it seamless to watch more - or not.
Company
BBC
Platform
Web
Date
2022
The challenge: re-design the autoplay video experience for the BBC's standard media player (SMP), a shared component used across all of the BBC's web products.
The outcome: an updated and modernised autoplay feature that allows users to easily discover more content - or cancel and stop watching.
How did I have impact?
01
I collaborated with stakeholders to lead the design within a cross-functional team
02
Working with a user researcher I planned and facilitated qualitative research sessions
03
I collaborated with designers across the BBC to ensure the design solution was scalable
Reviewing the previous design
USER NEED
Make it easier to cancel
Working with a user researcher I helped plan, run and facilitate qualitative research sessions to understand usage of the existing pattern. We found that users were overwhelmed by the recommendations, and struggled to find the cancel button in the corner of the screen.
It needs to tell you it's counting down... I was panicking... I didn't have enough time
Some typical things we
heard from users...
USER + BUSINESS NEED
Visual design outdated
The visual design looked outdated and slightly clunky. The BBC also underwent a large-scale brand update throughout 2021 & 2022, and the design required updating to reflect this new look and feel.
BUSINESS NEED
New media player interface
A new player was rolling out across the BBC and the UI featured centralised controls on mobile breakpoints. The previous autoplay design would clash with the centralised controls, so an update was required to ensure they worked together.
The new media player (bottom) had centralised controls that would not be compatible with the previous autoplay panel (top)
Design exploration
I worked with one other designer to converge on the research findings by running remote ideation workshops. We sketched lots of ideas, before refining them into wireframes using Balsamiq. I then worked alone to refine the ideas with the most potential into higher fidelity explorations and prototypes.
After refining the wireframes and user journey, I explored two design directions*
*OK there was a lot more than two,
but these were the best!
BREADTH
This direction gives the user lots of different recommendations when the current video ends. However most of the benefit of this direction was seen when in fullscreen playback, and from digging into stats I found that only 7% of users entered fullscreen - so I decided to explore another direction.
DEPTH
DEPTH
DEPTH
DEPTH
This direction kept it very simple and only surfaced one recommendation to the user. It aimed to give more context using a larger promo image, and providing metadata on when the content was published. It used a high prominent cancel button to make it very easy to cancel.
Prototyping interactions
I then prototyped how the interaction of cancelling would feel on desktop and mobile (using proto.io). I made the design decision that if the user cancels the autoplay countdown, then additional recommendations would be surfaced. This would prevent an overwhelming number of recommedations all at once, as we found in the previous autoplay pattern.
The above prototypes explored how the cancel mechanism would work. The pattern was largely the same across desktop and mobile.
Iteration + handoff
I initially placed higher visual priority on the 'cancel autoplay' button. However after sharing with stakeholders, we felt it could risk a drop in consumption. Therefore I switched the visual emphasis to the play button (it appears white on a dark UI overlay), whilst increasing the size of both buttons, and simplifying the labels (based on user feedback), to ensure it was still straight forward to cancel if needed.
I collaborated with a developer throughout the design process, as well as a BBC accessibility specialist to ensure the design was as accessible as possible - something that was of paramount importance when considering autoplaying videos. I then created detailed screenreader documentation, as well as full implementation specs of the designs.
Outcomes
Improved experience
New experience is more engaging whilst also making it easier for user's to cancel
Updated
brand
Updated and modernised visual design which aligns with the new BBC brand
New tech integration
The new design enables integration of the new media player technology and UI