This is the story of how we worked with Theirworld to create an entirely new web presence, one that helped their rich flow of news, resources and campaigns improve children’s education and human rights across the world.
Theirworld is an innovative campaigning charity set up by Sarah Brown in 2002 with the aim of helping children across the world fulfil their potential. Their first big campaign, A World at School, was a huge success but as a brand was much more widely recognised than Theirworld itself. Theirworld had plans to make more impact beyond this first campaign. The charity needed raise its own profile, start reaching out to a wider grassroots audience and have a bigger influence on decision makers across the world. Our challenge was to design a publishing platform and content strategy for Theirworld to have a greater impact on the world.
We’ve ended up with a site which we’re very happy with. There has been loads of very good feedback from across the organisation.
When working with a client, we need to understand their goals for the changes we are about to start making. But we can’t honestly design effective solutions without knowing the objectives of those goals. To extract our objectives we considered the sequence of consequences - sometimes known as the theory of change - that Theirworld needed in place to make their planned impact.
Theirworld works by influencing and persuading policy makers at governmental level to make changes. Policy makers respond to opinion in their constituencies. Growing an audience of supporters and activists will lead to more people to taking action, mobilising more people in constituencies, and thus have a bigger effect on policy makers.
Armed with a truer understanding of our objectives, we were able to provide Theirworld with a content strategy and a new CMS platform. This helped them make better use of digital to streamline their campaigns, and leverage the resulting groundswell of grassroots support to making tangible change at a governmental level.
We ran a series of interviews and workshops with the charity to really get to the bottom of what Theirworld is all about.
It was hugely collaborative. This was so much more than just a website build. This was an opportunity for Theirworld to examine real core issues, like who we are as an organisation, who our audiences are, how do we be more creative in how we work, how do we introduce new forms of storytelling to get our messages across. So, there was some very, very deep conversations throughout the organisation with Clearleft internally.
Workshops included audience identification and prioritisation to develop user archetypes (proto-personas), which we did in part by involving the client filling out empathy diagrams - they found it very useful to think about their audience in such detail.
Gaining such an understanding enabled us to develop better messaging for the personas, adapt the tone of voice for each one and start identifying what pieces of web of social would be most useful.
Further workshops, led by our Lead Content Strategist, included drawing out differentiators and defining a common vocabulary. The latter was particularly important as the organisation is rife with multiple terms including cause, campaign, action, movement and coalition. Having the vocabulary helped us tie everything together and develop a concept diagram to illustrate the moving parts of the charity. In some ways this is really a visual version of the vocabulary.
Our theory of change, user archetypes, and concept diagram led us nicely into the most pivotal part of the transformation - content inventory and gap analysis. Through persona development, stakeholder interviews and a basic content inventory, we’d identified the kinds of content and functionality currently produced and the content and functionality required. We then mapped and prioritised the content against a prioritised list of audience types. This allowed us to create a heatmap of what content we needed for the site.
It was clear most of the content still needed to exist, but now we had a clear priority which could influence information architecture, user journeys and interface elements.
Our first job was to take a brand identity which had been developed primarily for a print context and consider how this could be adapted and evolved for use across Theirworld’s digital touch-points - primarily their website and social media channels.
Evolving and appropriating a brand for digital use is something that we often undertake with clients - print and digital requirements are usually very different and considering how the various elements can scale and flex within any given interface or application is key to a digital brand’s success. In Theirworld’s case we needed to understand how they wanted to be perceived by their audience, and help them explore how different brand and visual language could help support this - enter the process of design collaboration and iteration. Working closely with the team we ran a number of exercises designed to tease out appropriateness and desire to inform early design and brand direction. It’s much easier to talk about brand and visual language when you have points of reference, and activities such as the 20 second gut test encourage open conversation by exploring a range of possible directions.
Using the output from these collaborative workshops as a starting point, we then explored the visual direction using a modular approach - ‘element collages’ help form the basis of key elements such as colours, typographic treatment and common page components without getting bogged down in page-level details and layout. This method helps gain consensus on an overall visual direction - a creative vision - in an efficient manner whilst allowing allowing plenty of scope for iteration and course-correction if required.
Once Theirworld were happy with the ‘vision’ we continued this systematic design approach to expand the visual direction into a full set of page-level components for development, producing key page layouts for context and to demonstrate the support of the design vision.
Clearleft designed multiple content elements which we could pull into our news stories, so that the storytelling was freed up by a library of elements that we can use in any of our articles. That took a lot of research by Clearleft into what we were trying to do as an organisation.
The content strategy guide formed a useful specification for developing the content management system (CMS). Our chosen platform was Craft, for its flexibility and ease of use.
Ahead of CMS configuration, integration, testing and deployment, we created a front-end pattern library built in Fractal so we could leave Theirworld with a system they could use and pass on to third parties. With a global audience, including many users in remote areas, we put a lot of focus on accessibility and speed of the codebase, removing any need for heavyweight frameworks.
We have 500 youth ambassadors in eighty-five countries. Many of them can't even respond to emails for days at a time because they have poor access to internet. But they’re telling us that the page load time on the website works well, visually it works well on all devices. The feedback has been very positive from them.
We are continuing to work with Theirworld, and that includes a recent redesign of the homepage and news section to reflect a change in emphasis away from the need for news reporting and more to people success stories.
You can listen to Ewan (Theirworld) and Ellen (Clearleft) talk through more of the process on the Responsive Web Design Podcast.