Greta BartkuteProduct designer

Case study 03 · UKTV Play at FX Digital · Streaming

UKTV Play 3.0: video streaming for TV, mobile and web

Redesigning a free streaming service across TV, web and mobile to improve content discovery, increase registrations and grow viewer retention.

Role
Lead product designer at FX Digital
Team
1 PM, 2 product designers, UKTV's in-house engineers
Timeline
May to November 2022 (approx.)
Status
Shipped as UKTV Play 3.0 in 2023
Outcome

A new version of the video streaming app for TV, web and iOS, based on research findings. It makes registration simpler and makes content easier to discover.

+56%*

Direct-to-consumer views in 2023, the year 3.0 shipped

+48%*

Monetisable views in 2023

6

Platforms across TV, mobile and web

* Whole-service figures from UKTV (source). Content and marketing played a part too.

About the project

A free streaming service built around four channels: Dave, Drama, Yesterday and W.

My role
  • Led user research and UX design
  • Workshop creation, organisation and facilitation
  • The UX and UI for the mobile app (iOS), TV and web
  • Design system creation from scratch
  • Worked with the PM, a product designer and the main stakeholders
01 · The problem

Nothing new to watch

Research showed people were leaving because they couldn't find new or relevant content. Younger viewers found it dull. Many visited once and never finished registering.

3 challenges
  1. Attract a younger audience without losing the existing linear-TV viewers
  2. Make content discovery feel natural instead of hard work
  3. Make the value of signing up clear, and fix registration and device linking
Hmm, when was this show added? It doesn't look like there's much content to explore.
Francis, lapsed viewer

Weak recommendations and not enough new content.

I don't watch linear TV anymore.
James, younger viewer

Younger viewers found it dull. Channels meant little to them.

I'm running late, I need to leave. I'll have to catch up on this episode later.
Helen, loyal linear viewer

People expect devices to stay in sync. Linking often failed.

Process · How the project ran

Four phases, start to finish

Not interested in my design process? No worries at all. Skip to the final designs.

  1. 1Discover
    • Workshop: vision, success criteria and draft personas
    • Competitor analysis
    • Interviews and contextual inquiry with 27 people
  2. 2Define
    • Affinity mapping
    • Personas
    • Experience maps
    • Prioritisation
  3. 3Evolve
    • Information architecture and user flows
    • Solution sketching
    • Wireframes
    • Key decisions and trade-offs
  4. 4Materialise
    • Usability testing, two rounds
    • Iterative improvements
    • Hi-fi designs, prototypes and the design system
02 · Discovery

One day to agree on success

We facilitated a one-day workshop with the client to agree on what a successful delivery looks like.

Remote discovery workshop board with UKTV stakeholders
Morning

Current product challenges, an optimistic future three years out, and the risks.

Afternoon

Content types and plans, user personas and the future of the brand.

In the room

Product, VOD, digital, marketing, content, insights, advertising and dev teams.

Feature matrix comparing registration, sign in and engagement across Netflix, All 4, BBC iPlayer, Pluto, ITV Hub, My5 and UKTV Play on connected TV
Competitor benchmark, mainly on TV

Registration, login, ads, video player, live channels, TV guide, discovery and retention. Then I compared how the same features worked on mobile and web.

03 · Understanding users

27 people, in their own living rooms

Interviews and observations with current users, lapsed users and people using other streaming services. A mix of ages, backgrounds, accessibility needs and regions across the UK.

A participant's TV filmed through their laptop during a remote session
TV testing

We asked people to set up their laptop 10 to 12 ft from the TV with the camera pointed at the screen. It wasn't perfect, but it showed us how people really use the product.

What we learned
01Not enough new content

Viewers leave because recommendations are weak and new content is limited.

02Linking fails halfway

Device linking often fails when viewers switch to a second device to finish it.

03Channels split the audience

Some viewers only want their favourite channels. Others are open to exploring.

04Devices out of sync

Viewers expect their progress to stay in sync across devices.

05Text on artwork

Text over thumbnails is hard to read for some viewers.

06Low content discovery

On UKTV Play, viewers stick to shows they already know. On Netflix and Disney+, they browse and discover new content.

04 · Define

Three personas, six journeys

Built from UKTV's previous research, third-party survey data and our 27 interviews. Pick a persona to see one of their journeys.

Their journey

05 · Information architecture

Structure, then wireframes

I ran a tree test with 30 people and a card sort with 15, then reshaped the CTV navigation around what we found.

CTV navigation
  1. Search

    • Popular searches
    • Popular actors
    • Recent searches
  2. Home 3

    • Featured hero
    • Continue watching
    • My List
    • FAST channels
    • Recommended for you
    • Most popular
    • Upcoming shows
    • Box set rail
    • Collection rail
    • Channels rail
    • Category rail
  3. Categories 2

    • Crime drama
    • Featured hero
    • New, Recommended
    • Box set and collection rail
    • Comedy
    • More categories…
  4. Channels 4

    • Drama
    • Latest on Drama
    • Live on Drama
    • TV guide
    • Dave
    • More channels…
  5. A to Z 4

    • Select show by letter
  6. My List

    • My List
    • Continue watching
  7. Account 1

    • Account information
    • Parental controls
    • Accessibility
    • Cookies
    • Help
    • Legal

Changed after researchKept

  1. 1One account page. Help, parental controls and legal moved into Account. Only 4% found support before.
  2. 2Fewer places to look. Box sets and collections share one rail. Real Life sits only under Documentaries.
  3. 3A more personal home. Recommended and category rails help people find more to watch.
  4. 4Kept what worked. Channels and A to Z tested well, so they stayed.

Tree test 30 people · 6 tasks

  • 4%found technical support. Most looked in Account first.
  • 48%found Real Life shows. 7 went straight to Documentaries.
  • 57–74%found A to Z, box sets, Channels and UK Drama.

Card sort 15 people

People sorted shows into groups, so we could see how they expect content to be organised before setting the categories and channels.

See the full IA board
Updated CTV information architecture: search, home, categories, channels, A to Z, my list and account
Updated CTV IA. Parental controls, help and legal now sit in one account page.

Wireframes for all three platforms

Web wireframes: home, registration, show page, channels, A to Z and video player, with notes
Mobile app wireframes
06 · Ideation

Sketch together, then decide

A two-day sketching workshop on the journeys that mattered most: registration, channels, search, home page and engaging with content. Then wireframes for all three platforms.

Homepage sketching board: big ideas, sketches, dot votes and what we should test
Key decisions and trade-offs
Content first, but channels still matter

Exploring content instead of browsing by channel, with a clear way back to favourite channels for loyal viewers.

Trade-off

We risked losing some traditional users. The payoff was opening the product up to a younger audience.

Registration and linking in smaller steps

The value of signing up comes first. Device linking got extra attention because it was a major drop-off point.

A design system from day one

Built early, so three platforms could stay consistent and future work could move faster.

Ready for personalisation

The structure lets recommendation rows slot in later. Better editorial and discovery patterns shipped straight away.

07 · Testing and iterating

Two rounds, two fixes

I tested the main journeys with 10 users over two rounds.

The CTV prototype from the tests, with the on-screen remote people used.
  1. Round 1 · we saw

    People struggled to see where they were on the TV. Focus states and nav weren't clear enough.

    We changed

    Bigger CTAs and one aqua focus state across the app, including the nav bar.

  2. Round 1 · we saw

    Registration felt too long, because of a separate success screen after the content-preferences survey.

    We changed

    Merged the survey and the success screen.

  3. Round 2

    Confirmed both fixes. Navigation was easier and registration felt smoother.

08 · Final designs

What changed, and why

High-fidelity designs for CTV, web and iOS, with every screen and component annotated for the dev team.

01

Home

What changed
Leads with featured and exclusive content, with show descriptions to help people choose.
Why
People left because they couldn't find anything new. Descriptions sit beside the artwork, not on top of it.
Home page on TV: Sneakerhead featured, with a numbered Most Popular rail
02

Sign-in and device linking

What changed
Smaller steps, with clear instructions on what to do on each device. The value of signing up comes first.
Why
Many people visited once and never registered. Linking often failed on the second device.
Sign in to watch for free, with three reasons to sign up
Sign in: why sign up, before anything else.
Device linking: three numbered steps and a QR code on TV, next to the phone app
Three steps and a QR code. The phone mirrors the TV.
03

Channel pages

What changed
A one-line description of each channel.
Why
Many users didn't know what the channels were. Loyal viewers still get a clear way to their favourites.
Channels menu with Dave selected and its one-line description
04

Show page

What changed
The show leads, with one clear way to play or resume. Series and episodes sit right under it.
Why
In research, people only found out a series was incomplete once they were already in it.
Big Zuu's Big Eats show page with Resume and series tabs
05

Video player

What changed
Brought up to industry and accessibility standards, with onward viewing to keep people watching.
Why
Subtitles and audio description need to be quick to reach. And the end of a show shouldn't be the end of the visit.
Player with subtitles and audio description controls
Subtitles and audio description, one press away.
End of show: next show suggested with Watch S1 E1
Onward viewing.
06

Search and A to Z

What changed
Familiar patterns from other streaming apps, with filters to make results more personal.
Why
Loyal viewers know what they want and rely on search, often with only part of a name.
Search on TV with an on-screen keyboard, channel filters and results
The same product on web3 screens · desktop
Web home page, signed out: Watch TV Play for free
Home, signed outThe value comes before the sign-up button.
Web show page for Big Zuu's Big Eats
Show pageSame structure as on TV.
Web search with popular searches
Search

And on mobile

5 screens · iOS
Mobile home with a featured show and New comedies
Home
Mobile channel page
Channel
Mobile search results updating as you type
Search
Finish registration, step 2 of 3
RegistrationSmall steps, with a hint for each field.
Pick a few shows you might like
PreferencesMerged with success after testing.
09 · Design system

One source of truth

Built in Figma from scratch for web and CTV: colour, type, icons, grids and components. It kept the three platforms consistent and gave UKTV's developers one source of truth.

Navy blue#141932
Aqua#14DCDC
Red#E66464
Yellow#F5D796
Purple#B478CD
Green#82D782
Navigation and video player icons from the UKTV Play style guide
Featured hero component with its settings and variants: home, channel and signed-out states
Featured hero component. Every state is a setting, so developers could see behaviour, not only visuals.
10 · Learnings

What I'd do differently

Bring engineering in earlier

Involving engineering earlier on some of the more complex CTV interactions would have reduced later iteration.

Small clarity wins move activation

The biggest learning for me was how much small clarity improvements in registration and linking can affect activation.

Ship personalisation sooner

Next I would want to ship personalisation rows sooner and measure content start rate and registration completion more tightly after launch.