ANODA Discuss your product

Mobile TV guide, faster than the ad break

TV24 is a TV guide for viewers in the UK, Ireland and the US.We redesigned it for phones and tablets, from research to handoff.

TV24 on a tablet: What’s on for Monday, with SVT 1, SVT 2 and Channel 4 schedules side by side, a sponsored card and Netflix’s recent films; TV24 on a phone: What’s on for tomorrow at 10:00 am, with SVT 1, SVT 2, Eurosport and TV8 and a live golf broadcast
79+
screens phone and tablet, from set-up to settings
18,000+
channels in the US line-ups the guide had to keep readable
3
experts from research to handoff

TV24 helps people in the UK, Ireland and the US decide what to watch. The client asked for the guide to be redesigned and rebuilt from scratch. We did the design: the phone and tablet apps for iOS and Android, from research and user flows to a new logo , a dark and light interface with one design system , a clickable prototype and developer handoff.

What a viewer meets, from set-up to a reminder

One path, from the first launch to never missing a match:

  1. Set up

    • Postcode
    • TV provider
    • Streaming services
    • Channels

  2. What’s on

    • Now
    • Any hour
    • Any day of the week

  3. Channel

    • Today’s schedule
    • Live progress
    • Next channel

  4. Programme

    • On TV
    • On streaming
    • Cast and ratings

  5. Find

    • Search
    • Sort
    • Filter

  6. Mine

    • Saved
    • TV calendar
    • Reminders
All channels My channels
Thousands of channels exist; each viewer sees only the ones they get, in the order they chose.
Broadcast Streaming
One programme page says where it is on TV and where it is streaming now, instead of two separate guides.
Listings Sponsors
The app is free and supported by ads, and sponsored cards sit between channels, marked, without pushing schedules off the screen.

One channel’s day, in the order you read it

Found
A day on one channel is a long list of times and titles. Without an order, what is on now looks the same as what finished at lunchtime.
Decided

The channel and the day sit on top, the next channels one tap away, and the list runs from what has finished, dimmed, to what is on now, marked Live with a progress bar, to the rest of the evening.

Each row carries the time, title, year, genre and rating.

For the user
A viewer sees in one glance what they missed, what is on now and how long it has left.
TV24 SVT 1 channel page: Today, a strip of channels, Lord of War dimmed at 14:50, Windfall live at 15:50 with a progress bar, then Masked Singer, The Mentalist, Die Hard 3 and The Tonight Show
After: the SVT 1 channel page in the final design

  1. Channel and day

    Which channel and day, with the next channels one tap away.

  2. Finished

    Dimmed, still there to check.

  3. On now

    Marked Live, with how far it has run.

  4. Later tonight

    Time, title, year, genre and rating on every row.

  5. Tabs

    What’s on, films and series, search, sports and your account.

How the work progressed

From how people choose tonight’s TV to a system developers could build, one question closed at a time.

  1. Discovery

    What a viewer needs to answer “what’s on?”, and how line-ups differ by country, provider and postcode

    Artifact Competitor and product analysis of TV guides

  2. User Flow

    Every path from set-up to a reminder: provider, services, channels, schedules, programmes, search and the account

    Artifact Information architecture and user flows

  3. Wireframes

    What each screen holds before colour: the schedule, the channel page, the programme page and the account

    Artifact Phone and tablet wireframes

    Grey wireframes of What’s on, a tablet schedule grid, a programme page with a trailer, and the films and series list with its filters

  4. UI & Design System

    One look out of three directions, then one set of components for phone and tablet, dark and light

    Artifact Three visual directions, the final UI and the design system

    Three visual directions for What’s on, each in dark and light: orange, teal and blue accents on the same schedule and sponsored card

  5. Palette revision

    Where the accent colour looked weak or lacked contrast in light mode, and two ways to fix it

    Artifact Two palette options, the second recommended

    The recommended palette option in light mode: What’s on with the date list open, the SVT 1 channel page, channel set-up and the subscription sheet

  6. Delivery

    What the client’s developers needed to build both apps without guessing

    Artifact A screen map, a clickable prototype and the handoff

Set-up and settings, mapped before they were drawn

Found
Set-up decides whether the guide is right at all: the wrong provider or a missing channel and every schedule after it is wrong for that home.
Decided
Set-up became a few short steps: postcode and provider, streaming services, then the channels, with the popular ones already on. Everything set there can be changed later in Settings, including the order of the channels. Five tabs hold the rest of the app.

  1. First launch

    A welcome, then provider by postcode, the streaming services you pay for, and a channel list with the popular ones pre-selected.

    Open the full map
    First-launch steps: Welcome to TV24.co.uk over a collage of film posters with a Let’s go button, providers found for a postcode with TV4 AB selected, streaming services with Netflix on, and 205 channels with 25 pre-selected

  2. Settings

    The provider, services and channels chosen at set-up, all changeable, and the channel order you see on What’s on.

    Open the full map
    Settings with dark mode, subscription, notifications and calendar reminders; Add or remove channels with widgets and toggles; Re-order channels with drag handles
The TV24 tab bar five times, with What’s on, Movies & Series, Search, Live Sports and My Account active in turn

Five tabs

What’s on for schedules, Movies & Series for films and shows, Search, Live Sports, and My Account for saved programmes, the calendar and settings.

  • Information architecture
  • User flows
  • Screen map
  • Clickable prototype

Three jobs the guide does every evening

Find something to watch, know where and when it is on, and never miss it.

Finding something to watch

Found
Viewers arrive with a vague idea: something at nine, that film from last week, anything good on Netflix. Scrolling a grid of thousands of channels answers none of it.
Decided
What’s on jumps to any hour and any day. Search starts with what others look for and matches as you type, across films, series and channels. Films and series open on today’s additions, on TV or streaming, and sort by popularity, date or rating and filter by category, genre and year.
What’s on with the time list open, from 08:00 am to 02:00 pm, over the SVT 1, SVT 2, Eurosport and TV8 schedules
Search with popular searches: Windfall on Netflix, Fight Club on Disney+, and SVT 1 with its next three programmes
Search results for Windfall: a 2022 thriller rated 5.7, on Netflix
Movies & Series: picks for tonight, a TV and Streaming switch, and today’s additions Windfall, Lord of War, The Mentalist and Die Hard 3 with year, genre, IMDb rating and where they stream
Filter for films and series: sort by popularity, newest or IMDb rating, and filter by category, genre and year

One page for where and when

Found
A programme can be on three channels this week and on two streaming services right now. Viewers used to check each one.
Decided

A programme page opens with the trailer and the essentials, then lists every showing on TV with its channel and a reminder button, and the services streaming it now.

A match page does the same for sport: where to watch it live, where later, and the teams. An actor’s page lists their films on TV this week and where they stream.

Series page for The Mentalist: trailer, rating, next season countdown, three episodes on SVT 1 with reminder buttons, and Netflix and Amazon Prime under Streaming
Match page for New York City vs Colorado Rapids: kick-off time, sponsored odds, Watch It Live on Channel 4, DAZN and ESPN, Watch It Later on Channel 4 and ITV1, and both teams
Actor page for Bruce Willis: his photo, Die Hard 2, Die Hard and Live Free or Die Hard on SVT 1 this week with reminder buttons, Watch it now on Netflix, and a row of his films with IMDb ratings

Never missing it

Found
Finding a programme is useless if the viewer forgets it by Thursday; too many alerts and they turn them all off.
Decided
Saved programmes and reminders land in a personal TV calendar, which can show only the reminders. Notifications are set per source: new films on Netflix, for example, only when they are rated 7.5 or higher.
My Account, TV Calendar tab: today’s Daily Recap on CNN, Hollywood Housewives, New York City vs Colorado Rapids and Fight Club, with a Show only reminders switch
Notification settings with the Netflix – Movies sheet open: all new movies selected, or only movies rated 8.0, 7.5, 7.0 or 6.5 and higher

A logo that reads as TV at icon size

Found
The redesigned app needed a mark that works as a tiny app icon on a crowded home screen, and a colour the interface could carry.
Decided
We drew TV24 inside a broken ring: grey arcs like a clock face, and an orange smile under the letters, the colour the app then uses for its buttons and the active tab.
The TV24 app icon three ways: on dark grey, on teal and on white, the letters TV inside grey arcs above an orange smile
The TV24 logo in white and grey with an orange smile on a dark background
The TV24 logo mocked up as a three-dimensional sign on a white brick wall

One system for phone and tablet, dark and light

Found
Reminders, channel rows and sponsored cards appear on almost every screen, on two platforms, two device sizes and two themes. Drawn differently each time, the guide would feel like several apps.
Decided
One design system: channel and programme rows, sponsored cards, sheets, toggles and the tab bar, each with its states, in dark and light, used across phone and tablet.

The same reminders block, wherever you are

Automatic reminders are one component: on a series they follow new episodes and repeats, on a match they follow the sport, the league and each team.

  • Automatic reminders on a series page: New episodes (TV+Streaming) switched on, Repeats (TV) off
    On a series: New episodes and repeats.
  • Automatic reminders on a match page: Football on; Major League Soccer, New York City and Colorado Rapids off
    On a match: The sport, the league, each team.

When something goes wrong

A wrong password, a postcode the guide can’t use, a reset sent: each says what happened on the screen where it happened.

  • Log in with the error Incorrect email or password. Try again, and both fields outlined in red
    Wrong password
  • Select your TV providers with the postcode field outlined in red
    Postcode not found
  • Reset Password: Success! We’ve sent a new password to your email, with a Log In button
    Reset sent

The same guide on a phone and a tablet

Kept
The rows, the sport filters, the sponsored card and the tabs stay the same, so nothing has to be learned twice.
Changed
The tablet shows three days of sport side by side instead of one, and names every tab instead of only the active one.
Live Sports on a phone: today’s matches with a sponsored Match of the day card between them
Phone · Live Sports Today, one list.
Sports on a tablet: three columns for today, tomorrow and 15 April, with the sponsored Match of the day card in the first
Tablet · Sports Today, tomorrow and the day after, side by side.

Where the product ended up

A TV guide redesigned for iPhone, iPad and Android phones and tablets: set-up by postcode, provider and channels, schedules for any hour and day, programme and match pages that say where to watch, search and filters, reminders with a personal calendar, and room for sponsors and an ad-free subscription.

All of it on one design system in dark and light, with a new logo, a clickable prototype and a screen map for the client’s developers.

screens in the design
79+
experts on the team
3

In the client's words

The design direction gave the TV guide a more consistent way to present programmes and channel information. We appreciated the attention to browsing and navigation, so the guide could be reviewed as one connected experience.

Tomas Mazowski Co-Founder, TV24 Group

5.0

Adding a feature that could bury what people open your app for?

TV24 had to stay the fastest way to find tonight’s TV while sponsors, streaming and reminders moved in around the schedules. Show us what you are adding, and we’ll show you where it fits without pushing out the core.

Discuss your product Explore more case studies

What we brought to TV24

The product

The interface and the work