Enhancing the usability of Live TV & Schedule pages for channel expansion

My Role

Requirement gathering and discovery research
Ideation and solution design
Prototyping
Usability testing
Feasibility considerations
Development collaboration i.e specs & snagging

Tools

Figma
Notion
UserTesting
FigJam

Background

As part of wider product appeal efforts, the number of channels that STV Player offers increased by up to 3x, with the introduction of several new sports channels. This significant growth presented an opportunity to enhance the mobile app’s usability while ensuring users can easily discover, explore, and access content on all channels.

The Live TV and Schedule (aka TV Guide) pages are central to this experience, serving as key user interfaces for channel navigation, live programme discovery, and planning viewing for upcoming programmes. It was essential to evaluate how well these pages support user needs in their existing state.

Specifically, I aimed to determine if users could:

Easily discover live programmes across all channels.
Navigate seamlessly through an expanded channel lineup.
Effortlessly plan and schedule viewing for upcoming programmes.

Business goal

The primary business goal was to ensure that the expansion of our channel lineup enhances the user experience, rather than overwhelming or confusing users. This was so as to encourage users to explore and discover new channels and programmes, therefore increasing content consumption and overall improving our MAUs (monthly active users).

Scope & Success criteria

The scope of this project was limited to ensuring that the live channels and programmes in their schedule are easy to discover with the expansion of channels on the platform. As such, key success metrics for evaluating the effectiveness of the Live TV and TV Guide pages were defined, which are:

Average time taken to discover programmes on live channels.
Number of interactions (clicks, scrolls, searches) required to find a specific channel or live programme.
User feedback ratings specific to the Live TV and TV Guide experience.

Design approach

This project as most I work on, followed the Double Diamond design process, a structured yet flexible approach that balances divergent and convergent thinking to drive effective problem-solving. The four key phases (Discover, Define, Develop, and Deliver) provided a clear framework for progression.

Divergent thinking enabled broad exploration of ideas and possibilities, while convergent thinking helped refine and prioritize solutions based on user needs and project goals. The iterative nature of the Double Diamond allowed for continuous cycles of exploration, testing, and validation, ensuring that the final solutions were both innovative and user-centric.

Discovering the problem

After the brief was well understood, I kicked off off the project starting with discovery research, I delved into credible articles such as articles from Nielsen Norman Group among others, and videos to understand best practices and patterns for designing interfaces with an expansive set of equal items. This helped me with a clear initial understanding for creating a user-friendly and engaging interface that could enhance a feature discovery.

Current live and TV guide pages evaluation

The Live Page and TV Guide Page on the mobile app was evaluated to identify potential pain points. This evaluation aimed to uncover design or functionality issues that could hinder user experience and to generate actionable insights for improvement.

Identified issues were labeled as pain points, providing a clear framework for further investigation during behavioural testing.

While scope creep was tempting, I maintained a focused approach to understanding user needs specific to the project. At the same time, I documented other potential issues, creating opportunities for more targeted and impactful design improvements in the future.

Here are some noted potential issues:

Live TV page

Schedule page

Competitor analysis

A comprehensive competitor analysis was conducted to evaluate how both direct and indirect competitors design their Live Channels and TV Guide pages. The primary objective was to identify best practices and industry standards for competitors with several channel offerings.

During the analysis, several competitor platforms were reviewed in detail to understand their features, design choices, and interaction behaviours. Key elements such as layout, ease of navigation, clarity of program schedules, and the integration of live and on-demand content were evaluated.

This process allowed the me to identify strengths and weaknesses in our existing designs and provided actionable insights to ensure our platform aligns with user expectations and competitive trends while addressing gaps in the current design.

Live TV page

Key Findings:

Channel logos: Widely implemented, aiding easy recognition of channels.
Channel switching: Easy channel navigation during live playback on the UI is common.
Live and next show information: Displaying basic info about ongoing and upcoming programs.
Channels context: Display of programme info on other channels.

Schedule page

Key Findings:

Call-to-Actions (CTAs): Neatly presented links to watch live or access other features such as programme synopsis.
Layout: Single channel scroll except some platforms like Amazon prime video with multiple channel scroll.
Auto-scroll to Live: Most platforms automatically highlight or scroll to the currently airing show.
Channel Logos: Present in almost all platforms for easy identification.

Behavioural testing

As this project was heavily user centred, behavioural test was carried out to observe and understand how users interact with the existing live and TV guide pages. This phase focused on identifying direct user pain points and barriers to seamless navigation and goal completion.

The tests comprised of 3 areas based on the project goal. These were areas backed up by findings from previous and recent relevant research:

Discovery of live programmes: Discovery of live programmes directly impacts users’ engagement and satisfaction. If users struggle to locate live programs, they may lose interest that diminishes their perceived value of our offerings.
Switching to another channel: Recent focus group insight shows that users want to switch between games if the one they are watching is boring. They need to be able to change channels quickly, easily and see what’s coming on next.
Finding upcoming programmes: Recent focus group insight shows users are ready to drop a subscription immediately if they do not see further value. They need to easily find the upcoming programmes so they can plan their viewing.

#Test 1 - Discovering a game

When entering the Player to watch a live game without prior knowledge of the channel, most users navigated directly to the Live page on their first click. Although users quickly identified the right section, discovering the game itself took time due to the live channels layout.

#Test 2 - Switching a channel

When users wanted to switch channels to another live games, the majority wanted to leave the Live page and go to the Sports page on their first click. This choice was influenced by previous negative experiences with discovering games through the Live page.

#Test 3 - Finding a game on the schedule

They primarily wanted to search rather than go through all separate channels. Their next choice was to scroll through the first page before eventually using the channel picker to find the game information.

What participants were saying about the existing live TV and schedule pages...

“Quite inefficient, having to look through all of these channels to see what's live”

“it doesn't entice you enough to look at what's live on all the different channels”

“Goodness me, does that mean I have to scroll through each schedule until I find what I’m looking for?”

“if this wasn't a test, I probably would've got discouraged and maybe given up on looking for the schedule to watch the game on this particular app”

Defining the problem

User pain points

Based on the discovery research I carried out, user pain points were identified and formulated from key insights. Some of the pain points are:

Users find it difficult to discover live games because there’s no way to see what’s live on all channels simultaneously.
Users struggle to plan their viewing for upcoming games across all channels because each channel has it’s own separate TV guide.
Users are frustrated by the need to scroll through multiple channels individually to find live games, leading to time-consuming navigation.
Users struggle to easily identify which channel is airing a specific game, leading to confusion and wasted time searching for the correct channel.
Users find it difficult to quickly recognise and select channels from a long dropdown list, slowing down their ability to navigate efficiently.

How might we statements

After establishing user pain points, How Might We (HMW) statements were developed. These statements reframed user needs and challenges into opportunities for innovation, sparking creative problem-solving. It encouraged a solutions-oriented mindset and that ensured that the design concepts directly addressed the core user pain points identified during my discovery research.

HMW help users discover live games across all channels simultaneously, so they can easily see what’s airing without searching individually for each channel?

Idea: Create a consolidated view that shows all live programs across channels in one place for easy navigation.

HMW simplify the process of planning for upcoming games across all channels, so users can easily access the schedule of all channels?

Idea: Offer a single, easy-to-navigate TV guide that displays all upcoming games across channels, enabling users to plan viewing in one unified interface.

HMW make it easier for users to identify which channel is airing a specific programme to reduce the time spent searching for the correct channel?

Idea: Display clear visual indicators, such as icons or banners, to show which channel is airing a specific programme, or use a “Now Playing” section for easy identification.

HMW improve the channel selector, so users can quickly recognise and select channels, optimising navigation efficiency?

Idea: Simplify the channel picker by improving button proximity and using easily identifiable channel logos to make channels quicker to locate.

Developing the solution

Wireframes

The next step involved rapidly creating wireframes to structure the Live TV and TV Guide pages while directly addressing key user pain points. These wireframes provided a visual framework for improving navigation and enhancing content discoverability. This way, the initial focus was on structuring the pages effectively before investing in creation of high fidelity designs.

High fidelity explorations

I then created high-fidelity designs that represented the intended user interface for the pages. During this phase, multiple design concepts were explored and refined to align with user needs and expectations. Once the designs were finalised, usability testing was conducted to understand how users would interact with the new interface and to identify any areas for further improvement.

Usability testing

The high fidelity designs were prototyped so as to carry out usability tests. For the test, I wanted to draw comparisons to the currently existing pages so I retained the structure of the initial tests to get accurate comparisons. The existing pages and proposed redesigns were placed side by side with their results.

#Test 1 - Discovering a channel

As before, users entered the player to watch a live game without prior knowledge of the channel. However, the redesign was 48 seconds faster than the existing page from previous test.

#Test 2 - Switching the channel

With several ways to switch the channel, majority of users decided to go back to the channel list page to switch, proving this new feature to be very valuable to users.

What participants were saying about the live TV page redesign...

This time, the participants had only positive things to say about the new live tv interface

“I thought it was very well signposted, straightforward and intuitive.”

It was very straightforward, that's how kind of any service I'd use would work very similarly.

“I knew exactly where to go to, found it quite quickly”.

“It took just few seconds, very easy”.

#Test 3 - Finding a game on the schedule

For the schedule page, it was important to carry out test on 2 ideas that tried to solve the problem in their own ways. There was:

The vertical approach which organised the schedules of all channels from top to bottom, offering a broader view of the programs.
The Horizontal approach which arranged the schedules of all channels from left to right, offering a broader view of the available channels.

The test remained the same as the previous schedule pages for these 2 designs. For the test as with the previous one, participants knew the game and that it was later today but not the channel or exact time.

The horizontal approach (option B ) however performed better than the vertical approach (option A).

What participants were saying about the schedule page redesign...

“I would definitely say B (horizontal) is easier. It allows you to see more channels at the same time which is more important than seeing more programmes at once”.

“It (horizontal) was a bit easier because you naturally read left to right, it’s all lined up rather than scrolling back up on other channels.”

“It was easier on B (horizontal) because you can see more channels at the same time”.

“(Horizontal) It’s better formatted this way as i’m used to it like on some other services.”

There was a very significant difference overall when compared to the existing schedule page.

Accessibility considerations

Accessibility considerations were essential for providing an inclusive design. For this,

I ensured there was sufficient contrast between logos, texts and background in line with current WCAG (Web Content Accessibility Guidelines) to improve readability, especially for users with visual impairments.
I ensured that text was scalable and legible across different screen sizes and resolutions. The legibility was tested especially for smaller font elements such as on the TV guide page.
I ensured that the new buttons and interactive elements were accessible for users with motor impairments as per current WCAG (Web Content Accessibility Guidelines). A minimum size of 44x44 pixels was maintained for elements which also was in accordance with Fitts’s law.

Delivering the solution

The deliverables addressed the noted users’ pain points and best practices to improve the user experience within the STV Player live TV and schedule pages in regards to the channels expansion.

Live TV page

Schedule page

Channel programme pop-up

Design QA

Design QA with developers was carried out after the design handover and development. This was necessary as:

It ensured that all design elements such as the colours, fonts, spacing, and layout were aligned with the original specifications for consistency.
It verified that interactions were accurate, smooth, and intuitive, enhancing the user experience.
It confirmed design consistency and functionality across various screen sizes, resolutions, and devices, improving responsiveness and adaptability.

Post handover insights

Usability testing and stakeholder reviews have shown improvements in navigation, content discoverability, and overall user experience. Participants reported finding live games and upcoming programs more easily, with reduced friction when browsing and switching channels. Accessibility enhancements, such as improved text legibility and larger interactive elements, have also been well received. Stakeholders provided positive feedback on the refined structure and functionality, noting its alignment with user needs and business goals.

While the project is still in production, these initial insights serve as a strong foundation for optimising the user experience and fulfilling the project goal post deployment.

Learnings

For projects like this, scope creep can be a significant challenge, as there are many tempting areas to improve that, while valid, may not align with the specific project goals. To mitigate this, I ensured the scope was well-defined with clear success metrics, allowing me to stay focused on the intended outcomes.

Any additional areas for improvement were documented as future considerations, ensuring they could be addressed separately without derailing the current project. This approach helped keep the deliverable aligned with its success criteria, on track with the roadmap timeline, and within the available development resources.

Next steps

The next phase will focus on optimising the Live TV and TV Guide pages for the web platform, ensuring seamless interactions across both desktop and mobile.

Also, I will continue collaborating closely with the development team throughout the production phase as well as monitor post-deployment insights to identify further refinements or iteration opportunities.

Other projects

Page updated

Google Sites

Report abuse