Home
10:18 AMGuideMyTVTV Shows
Death in Paradise
BBC One
JUST STARTED
Death in ParadiseSeries 7, Episode 3
Broadchurch
Broadchurch
Derry Girls
Derry Girls
The Yorkshire Vet
The Yorkshire Vet

Next Gen YouView

YouView · Lead Interaction Designer

Overview

YouView is a TV platform that blends free-to-air digital TV with On-demand services.

I was the Lead Interaction Designer on a team designing the ‘Next Generation’ YouView. A complete redesign of the platform covering backend services, front-end technology and user experience.

I worked with Product Owners and Tech Leads to redefine the product and transform how YouView develops software.

Outcome

Next Gen YouView launched in 2016.

It saw increased customer satisfaction, increased viewing and garnered four industry awards.


My responsibilities

Design specifications, Information architecture, Interaction design, Prototyping, User journey mapping, User research, Wireframes

Other team members

1 Product Manager, 3-4 Engineers, 1 QA

The redesigned YouView Main Menu overlaid on live TV, with Guide, Players & Apps, MyTV, ISP Area and Discover tabs above a row of On Now programme tiles

Design principles and objectives

At the beginning of the project, we created a set of high-level design principles and objectives to guide the design process.

Principles

  • More intelligent
  • More visual
  • More intuitive
  • More scalable
  • More relevant

Objectives

  • More viewing
  • Positive user feedback
  • Scalable
  • Futureproof
  • Competitive

User mindsets

In addition to the design principles and our objectives, we used the following mindsets to guide our design decisions:

  • I know what I want to watch
  • I don’t know exactly what I want, but I’ll know it when I see it
  • I have no idea what I want to watch.

Concept development and key user journeys

We created concepts that demonstrated some key aspects of the user experience. These were based on preliminary user research, competitor analysis and an understanding of how people were using the existing product.

A storyboarded user journey — 'I want to continue watching Breaking Bad from last night, so I'll go to My TV which lets me easily resume where I left' — laid out as six annotated screen steps

Patterns, interaction design and flow diagrams

We created a set of design and interaction patterns to ensure consistency across the product and to speed up the design process.

As part of our documentation we also created interaction specifications, examples of different UI states and flow diagrams.

An interaction specification for the Action Panel and Brand-Series Area, with numbered callouts on each screen keyed to written notes on titles, actions, synopsis, series navigation and episode tiles
A three-step interaction pattern: the Action Panel, the user pressing the DOWN button on the remote, and the resulting Brand-Series Area with the episode highlighted
A flow diagram for deleting a recording, branching on whether the episode is locked and whether the confirm-deletion setting is on

User research

At the beginning of the project, we conducted a lot of exploratory research and used some existing personas to help focus our design efforts. As the project progressed, we needed to create more realistic prototypes that reflected actual content. After all, with a product like YouView, the content is the main focus.

As part of our research toolkit, I set up a system where the research moderator could see a visualisation of the remote control key presses.

A research moderator's view: the participant's YouView screen alongside a live visualisation of their remote control key presses and a camera feed of the participant

Prototypes

We created prototypes throughout the project for user research and as ‘living’ documentation.

This is an example of a prototype I created in Framer for a user journey focused on finding programme information and other episodes. It was also used to help convert some of our motion design into code.

The 'Action Panel to Brand-Series Area' prototype open in Framer Classic, with CoffeeScript on the left and the live TV preview window on the right

Key outcomes of the redesign

Redesigning YouView was only possible through teamwork and collaboration, not only within the design team but also with other teams, such as the Product Team and Development and Test teams.

Here are some highlights of key outcomes for areas of the product where I led the User Experience Design.

The redesign transformed the Main Menu from a series of links into a shop window for content. It allows users to browse the latest content without disrupting their TV viewing, which is crucial.

Early on in the project, we identified that users want to browse while still keeping one eye on their current viewing, and the Main Menu is the cornerstone of this philosophy.

Our data shows that not only does the Main Menu help users get to their favourite content quicker and has also been successful at promoting lesser-known content.

YouView Main Menu — After
YouView Main Menu — Before
Before After

Programme information (Action Panel and Brand/Series Area)

When users want to learn more about a programme, they can access a series of screens that present them with information and actions. In addition, if the programme is part of a series, they can navigate through the series and episodes.

In the old design, the ordering of episodes was often unclear, and it caused confusion. Our research has shown that users find the order of episodes in the redesign to be much more apparent, making it easier to navigate.

YouView programme information — After
YouView programme information — Before
Before After

MyTV

MyTV allows users to save their favourite content by recording live TV or adding On Demand shows to their Watch List.

The redesign created a more visual view while fitting more content onto the screen (the previous list view only showed nine items per screen).

While the redesign has split opinions among the user base, it has resulted in some unexpected feedback. Diary studies showed that children found the screen much easier to use because of the imagery. Similarly, we have had feedback from users with accessibility needs who found the redesigned view more straightforward.

YouView MyTV — After
YouView MyTV — Before
Before After

Awards

The redesign has resulted in higher customer satisfaction levels, won several awards and created a platform for YouView to build on for the future.

Four award badges: T3 Awards 2017 Best TV Platform; The Connies 2017 Winner for Contribution to User Experience and Best TV / Video Service Update or Launch (silver); TV Connect Awards shortlisted for Best Cloud Based Video Service and People's Choice; Content Innovation Awards 2017 Winner for Advanced TV Innovation of the Year