UNICEF UK

Clearleft helped this children’s charity bring its content to a mobile audience.

UNICEF UK is a charitable organisation that raises money in aid of children and children’s rights. Like many organisations, UNICEF has seen an increase in mobile traffic, with mobile devices accounting for approximately 20% of site visits. Having recognised the need to support small-screen devices, a limited mobile version of their website had been produced. However, much of the information about their vital work remained on the desktop-orientated site, which featured large imagery, complex interactions and small text.

From desktop-first to mobile-first

With a constrained budget and tightly scoped brief, our task was to express the existing content and information architecture in a way that could be understood by users on smaller screens. The site also needed to degrade gracefully on older mobile devices, and take into account the often imperfect nature of cellular connectivity. Put simply, we needed to employ mobile-first design principles with desktop-first content, rationalising and simplifying wherever possible.

With this in mind, we asked key stakeholders on the project to dissect the home page and a key internal page, placing component parts in order of importance. We also worked withUNICEF’s content editor, to pull out common patterns, noting those which were essential, and those that were superfluous. We then sketched the relevant patterns on a whiteboard, imagining how they would adapt on smaller screens. These could then be interpreted asHTML and used as the basis for the front-end build. This pattern based approach allowed us to simplify what was already there, rather than starting again from scratch.

We experimented with different ways of simplifying way-finding around the site, removing unnecessary interactions and invoking less taps. We removed layers of navigation, and advocated including more links within body copy. We also moved breadcrumb navigation to a slide out menu, where users could orientate themselves within the site.

We spent considerable effort to ensure performance didn’t suffer at the cost of excessive design. UNICEF’s extensive brand guidelines helped in this respect, with their identifiable cyan brand colour and emotive photography providing enough identity. We opted to use the Roboto typeface. Similar to UNICEF’s brand font Univers, this font was specifically designed for Android, so we knew it would render well on mobile screens. Its condensed nature also allowed for more comfortable line lengths on narrower screens.

A firm foundation to build upon

We were able to create a design language that could encompass the various template types, that clearly delineated between areas of navigation and content. Although a mobile focused project, we had a secondary ambition to design an experience that is better than the desktop site – even on a desktop. In time, it is hoped this responsive mobile design will form the foundation of a fully responsive site, accessible from all devices, large or small.

What we did
, , ,
Team members
Ben Sauer, Paul Lloyd
Project duration
8 weeks

m.unicef.org.uk


Related Projects

Kew Gardens

Kew Gardens

Clearleft created a responsive pilot, helping bring information about visiting Kew Gardens to its rapidly growing mobile audience.

Channel 4 News

Channel 4 News

A marked increase in mobile traffic after our responsive re-design with Channel 4.

Wellcome Library

Wellcome Library

Clearleft helped the global medical charity Wellcome Trust bring its extensive collection to a digital audience.

DACS

DACS

Clearleft helped this non-profit arts organisation deliver its content in an inspiring and persuasive way.