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.