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.
Add reminder flow
Example of development documentation
The search results template was the first area of the site to be built responsively.
I redesigned the sign in and registration areas of the website and consolidated the two sections into a tabbed interface.
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
Dmax Germany Next
All 4 TV apps