BBC iPlayer: Screen Framework
Evolving iPlayer’s screen framework to promote content discovery
Year
2015 - 2016
Deliverable
Web, TV Platform
Role
UX Designer, working with multiple UX Designers & Creative Director
Contributions
UI/UX Design
Background
iPlayer is the BBC’s streaming service, giving users the ability to watch BBC content on-demand or live as it is broadcasted. iPlayer receives billions of streaming requests a year from its UK-based audience, who enjoy the service across multiple apps and platforms.
As part of iPlayer’s ambition to offer its users a premium watching experience, this project sought to evolve its screen framework design - seeking to infuse the user experience with a sense of liveliness, immersion, and the curiosity to discover more.
—
See below the live experience launched 2017-18
An interaction framework that seamlessly guides users from browsing, playback, and onto content discovery.
Key Outcomes:
The framework
Exploring the framework for TV screens
A more immersive way to discover
The framework
A platform-agnostic interaction around the watching experience that fluidly transitions UI components to re-enforce a user’s mental model for either browsing, playing, pausing or discovering.
Key features
Includes UI details like the ‘play’ call-to-action transitioning from a static enlarged state into the play/pause button for the player controls.
Timeliness for triggering the display of more episodes or related content as the credits begin to play.
Exploration of vertical vs. horizontal browsing: Ability for the user to explore more episodes of the same programme by scrolling horizontally from the current episode being watched, and by contrast, a user scrolling vertically to browse different programmes.
—
See below a low-fi prototype demonstrating UI transitions between different modes of watching
Considerations
iPlayer Design Principles
Design explorations were developed through the guidance of the iPlayer design principles. The resulting experiences are seen through the responsive way the UI fluidly responds to the mental mode of the user as they engage with the playback experience.
Alive - flexible designs that adapt to reflect the user’s mental mode
Immersive - drawing users into the content experience through seamless UI and removing distractions
Timely - providing users with what they need at the moment they need it
‘Functional geography’
Evolving iPlayer’s screen framework was done in partnership with a dedicated design team working on the platform-agnostic AV experience design. This AV team introduced early principles around the ‘functional geography’, which referred to designated areas in & around a video playback experience that consistency provided a particular function to a user. For example, having consistent placement of share functionality in the top-left corner, and player controls anchored to the bottom.
While all prototypes on this page were specifically created by Josephine Lie, the iPlayer Screen Framework project was worked on by a wider BBC User Experience & Design team. The visual explorations shown here built upon & added to the collaborative cross-team initiative.
Full credits