Work

Daniel London — Lead UX Designer based in Sydney, Australia

TV Guide

Responsive TV guide for Australian Free to Air and Cable TV channels.

au.tv.yahoo.com/tv-guide/

New and improved design of the Yahoo7 TV Guide. Designed from the ground-up with a focus on mobile usability and responsiveness the new TV guide features a user-friendly and seamless experience. Conceived with full-functionality in mind, it was initally released to a MVP feature-set. Subsequent features could then be built on top due to it’s modular design. Since it’s launch it’s seen page views improve by seven-fold, and session duration up to five times longer.

ForYahoo7 RoleLead UX Designer
Date2017

The Problem

The TV guide at the time had been built a few years earlier and wasn’t optimised for mobile and tablet devices. It also lacked any responsiveness for a differing desktop resolutions. Users also identified it to being ‘clunky’ and unintuitive to use. Navigating throughout the days and show times was slow and cumbersome as it required pagination rather than the ability to scroll through the timeline without delay. Visually users found it difficult to seperate and distinguish the competing elements on the page and were slow in identifying the current show airing. The existing TV guide also lacked any integration with the Plus7 catch up TV product.

Solution

In order to have an ongoing evolution of the TV guide we really needed to start at square one. A complete redesign and rebuild with an MVP in mind would allow us to iterate the functionality over time and massively improve the underlying architecture and interface. A rebuild would also allow us design with full responsiveness in mind. In deciding upon an MVP feature set we really needed to understand what our users needed most initially then have a fast followers in the backlog for which we could subsequently build. We then would access based on user feedback what additional functionality we’d add in following sprints.

How the scrolling system works across multiple breakpoints

The TV guide home for Desktop and Mobile.

Timeline Navigation
In our research we quickly determined that what makes a TV guide grid most usable, is how responsive it is to a users input when navigating. Scrolling through time should be fluid and fast. Stopping to load additional show data was grating to the user-experience and would leave the user frustrated. Therefore we ensured that all data for the rows were loaded in advance and the user could easily scroll throughout the day without delay. The timeline also worked in real-time, meaning that if left open, would advance in time automatically. For additional usability we made it so the show cell labels automatically shifted into visibility to the left of the grid when scrolled out of view.

Introduction of a sticky timeline, that allows you to change the date, time segment and scroll the time from the one section.

Now and Next View
In interviewing our users we found that many liked the simplicity and convenience of having a view that listed currently airing shows and what’s following. The reduction of data on the screen improved the clarity for mobile devices which don’t have much horizontal space available in portrait mode. The now and next functionality could also be utilised with it’s small form factor in right-hand rails for the desktop.

Mobile view of the Now & Next functionality.

Drill-down pages
To provide additional details to a selected show, channel or search query I designed a set of drill-down pages to provide more specific information. This also had the added benefit of creating thousands of indexable pages with show names for improved SEO to the site.