The challenge

To re-develop the award-winning broadcaster’s digital approach to their on-demand, current and future programming.

Our vision came in a creating a new digital hub that would bring together Channel 4’s existing brand websites, providing a more coherent experience in viewing and discovering content online, crossing over to their multiplatform products via mobile, TV and gaming devices. With many restrictions including designing on top of a non-responsive platform, pre-existing meta data rules and online advertisting obligations we first looked at the brand information pages (BIPs); the core area of each programme and the new brand Hub.

The make up of each BIP page varies depending on the programme, whether its a multiple or long running series, flattened brand or just a one-off episode so the carousel navigation and subsequent series/episodic information had to be flexible to contain this. The active episode highlights in the centre, with the episode information and synopsis directly below. Any related short-form content then sits to the right, reinforcing the discovery of extra content for consumers.

To house all other content such as social media feeds, galleries and further short form content on a BIP, we constructed a system of flexible content blocks to use throughout the brand Hub.

The global navigation and footer were re-designed to provide a simplified experience of discovering content and legal links. Originally the concept was to merge Discover and Search together but we were restricted by existing Flash player requirements.

Although the Hub is built on a non-responsive platform, the design has catered for the future development of this in its flexiblity of the content blocks, navigations and general styling throughout.

Another new feature was to include the use of growl notifications. These will display in various scenarios on various user-defined actions, using the individual channel and BIP colour schemes. The programme guide was also redeveloped in HTML, displaying the up-coming two-week TV guide and catch up functionality. Selected programmes are then shown fixed at the bottom to provide further episodic information.

Throughout the design of the Hub, I created detail specsheets of all pages, not only as a visual aid for the development team but also as the basis for the new 4EG digital styleguide that would be created in the future. Additional pages we created were Categories, Catch Up, individual channel Aggregation pages, Galleries & Articles and My FOUR - a dedicated section where consumers can view their previously watched, favourite and downloaded programmes.

Credits

Agency: Ostmodern

Role: Lead UI Design

Creative Director: Tim Bleasdale

Lead Interaction Design: Matthew Kay