A lot of broadcaster homepages represent land grabs from different departments within organisations, that clutter the design and lose focus. Through audience research we discovered that the highest percentage of visitors to the ITV homepage went on to watch catch-up on ITV Player. The new design had to serve this need first.
Other user needs we discovered were: streaming live TV on the web, exploring more about a show they've been watching and finding out what's coming up on TV.
Idea generation through sketching and keynote prototyping
A few quick sketches from a sketch workshop
Using the user needs as a starting point we then held a series of sketch workshops to rapidly generate a range of approaches to solving the problem. Within hours we started translating these ideas into prototypes we could test. We use keynote as it's fast.
Some of these approaches were based around changing layouts to reflect the time or day of the week. Others were to surface what was trending on ITV and to use longer scrolling pages with dedicated areas for content. We tested these prototypes with users to understand which approach worked best.
Exploring how time or day of the week could contextualise content.
Wall of keynote prototypes.
Responsive Web Design
Visitors to ITV.com from mobile and tablet devices are increasing all the time. This shift in usage pattern meant a responsive design was the only approach to take. This allowed us to restyle content to better suit screen size or device, providing a more consistent user experience.
Early sketches of how content could adapt to screen or device.
Showcase for the brand
The homepage leads with immersive photography.
Visually, the site needed to be a poster child for the new ITV brand. We worked closely with the design and branding teams at ITV to develop a new visual language, that echoed and built upon elements from the TV rebrand.
The site leads with immersive programme photography, being bold and proud to showcase this content. For the rest of the page the design is modern and light. It uses white space to define clear content areas and makes use of ITV's new web font - Reem by Fontsmith.
What's on guide echoes TV elements of the rebrand.
Circular image cropping for shows re-enforces TV junctions and stings.
The project has been fantastic to work on and we're very excited to see how the homepage will continue to develop. It's been great to have played a part in bringing ITV's new branding to their homepage and helping them take their first steps into responsive web design.