Fiona Mayfield — Freelance UI/UX/Product Designer based in London, UK

Channel4.com

I worked with Reason and the delivery team at Channel 4 to adapt the site to a responsive layout. It’s a great challenge as it’s a complex site with all sorts of content and scenarios to consider. Accessibility compliance was also a consideration in all designs.

RoleResponsive UI/UX design ForReason Ltd
Date2016 Tools UsedSketch, Invision, Zeplin, Keynote

I worked with another designer to re-design all of the programme home, information and player pages on the Channel 4 site so that they would work effectively on all devices. This involved looking at all modules within the CMS and also applying new branding to specifically Channel 4 content.

‘Brand hub’ – Topics, Twitter, Articles

Brand hub responsive modular slices

An interesting challenge for responsiveness was the in page/full screen player, built in Flash. Although video can scale easily there were overlays for sign in, parental controls and other user states and elements within these could not scale. There is a ‘watch next’ panel that appears at the end of the stream or on user interaction. To adapt the content for less space, my solution was to use a simpler full screen approach with subtle transitions on the elements.

Player – in page template

‘Watch next’ panel – full screen with series navigation

We adapted the TV Guide (or EPG) so that it worked from mobile screens upwards. A challenge was to reduce view options at the top to a small enough area so that content was visible. A list view approach was decided on for small screens with the content switching to a grid format at tablet size.

TV guide

Add reminder flow

Example of development documentation

The search results template was the first area of the site to be built responsively.

Search results

Documentation

Documentation

I redesigned the sign in and registration areas of the website and consolidated the two sections into a tabbed interface.

Registration

Sign in

I worked on a UI styleguide for development that documented all aspects of the redesign - fonts, palettes, IU elements and interactions

UI Styleguide example – forms

UI styleguide example – modal behaviour

UI styleguide – messaging examples

UI styleguide – link states