Reimagined ITV homepage goes live

16 January 2013
2 comments

ITV Homepage

It's required a lot of secrecy here at Made by Many to keep it under wraps, but we're excited that the new ITV homepage went live earlier this week. Part of a complete rebrand of ITV, this has been a great opportunity to highlight the depth and breadth of ITV's content - showcasing the best of ITV right now whilst simultaneously reinforcing the broadcaster's new brand position: at the heart of popular culture.

The homepage is a result from collaboration between Made by Many and the in-house design and development teams at ITV.

Discovery

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.

Keynote prototypes.

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.

Contextual content Exploring how time or day of the week could contextualise content.

Keynote wall Wall of keynote prototypes.

Responsive Web Design

Responsive prototype

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 mobile sketch Early sketches of how content could adapt to screen or device.

Showcase for the brand

tablet view 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.