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.
1 million more people engaged
Theirworld now has a far more coherent, engaging website, with a content strategy integrating campaigns into social media and tied to actions. Since launch, a million more people have taken action in support of Theirworld campaigns.
A flexible publishing platform
We created a publishing system that enhanced Theirworld’s workflows. An easy-to-use CMS now helps authors and journalists tell the success stories and highlight the voices of the people Theirworld are helping across the world.
A singular digital presence
We translated the identity into digital presence, amplified the Theirworld brand and brought their campaigns under one roof. We created a vibrancy and approachable feel, and provided pattern library to ensure consistency.
The Full Story
How do you apply a theory of change?
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.
Brand language, messaging and vocabulary
We ran a series of interviews and workshops with the charity to really get to the bottom of what Theirworld is all about.
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.
Structure, content and gap analysis
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.
Digital branding and interface design
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.
CMS and front-end development
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.
The work continues
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.