CODES

The Coalition for Digital Environmental Sustainability

Context

CODES is a member-based coalition building the global framework to accelerate digital sustainability. As the flagship initiative of this kind for the United Nations, CODES coordinates over 1300 members, including over 450 cross-sectoral organizations. Their mission is to set the global agenda and priorities for advancing a sustainable, digital transformation, and to create opportunities for dialogue through activations in tandem with events such as the UN Environmental Assembly, Web Summit, Stockholm+50, and the Internet Governance Forum.

Roles

Visual Design
Webflow Development
Content Strategy

The Challenge

The CODES website previously consisted of long-form text integrated into a landing page on SparkBlue, a community management system with few options for organizational features or custom branding. But CODES was poised to scale, and needed a new platform to help them get there. The new site would need to accommodate a range of bandwidths, and to convey CODES' mission clearly to those reading it for the very first time.

To prepare CODES to scale their work to new audiences while maintaining autonomy over content updates, All Purpose set out to re-platform their site onto Webflow, and craft a visual system evolved from their existing aesthetic. We built our strategy with foundational principles of digital sustainability, to ensure as much alignment as possible with CODES' mission. Concurrently, we implemented a collaborative approach that allowed for deep discussion and democratic decision-making with a large group of highly invested, geographically dispersed leaders.

Discovery and distillation

Our project commenced with full-depth immersion into the world of CODES. We pored over documents and reports, presentations and webinars, and delved into hundreds of member feed posts in the online CODES community. We complemented this research with a landscape analysis, in-depth interviews with key participants and leaders, and an extensive member survey to gather critical insights. Ultimately, we were able to conjure up the various versions of CODES' identity as expressed through their own documentation and anecdotal perceptions. This illuminated points of contention, contradiction, and coalescence. From there, we distilled our recommendation for the most resonant language to take forward as core brand messaging.

With a firm grasp of the mission and scale of CODES, we then embarked on expanding the visual system and developed a sophisticated messaging guide and content framework. With these tools, we intended to strengthen communication between CODES and it's growing membership.

We developed eight personas in four sectors to help align CODES stakeholders on audience needs.

From discovery to delivery

With a firm grasp of the mission and scale of CODES, we embarked on expanding the visual system and developed a sophisticated content framework. With these tools, we intended to strengthen communication between CODES and it’s growing membership.

Expanding the original colour palette

We began by levelling out the saturation points. Then we divided each shade into 20% increments of brightness. This allows for a robust starting point where each hue enjoys a complimentary family of shades.

We balanced with warmth and vibrance

Many warmer shades were tried. In the end, the exciting relationships between the yellow and magenta were selected as bridge colours. They work well with each primary hue and earn their place in the palette by connecting the hues together.

Establish a strong family of grey

Neutralizing the saturation to a consistent 3% provides a helpful array of corresponding greys. These grey’s enable greater subtlety and elegance when composing with the palette.

Build the gradients

Exploring combinations within the palette to provide depth and energy led to the creation of gradients.

Expand the gradients

An additional (secret) tangerine hue was discovered to support a more optimistic tone.

The finished palette

The finished palette is designed to feel familiar across many mediums and emote a diverse message by adhering to a unifying root of hues, saturations and brightness.

It is bold and true, appropriate for an organization such as CODES to express their work.

A sustainable planet in the digital age

Ultimately, we created a dynamic new home for the CODES community. Hosted on Webflow, the site enables enough autonomy for our collaborators to take confident ownership over content management for their new digital hub. CODES' mission is clear and consistently stated throughout the site, and complex information related to both their initiatives and to their collaborators at the UN Global Compact is organized intuitively.

During our discovery phase, we encountered a bold through line in many of our interviews: the Coalition's work, at the end of the day, is all in service of protecting our beautiful planet and its brilliant communities, human and otherwise. Whether in sprays of brightly coloured lines, bold ombre of magenta and indigo, or kelp beds and swing-sets, the aesthetic identity of the CODES site endeavours to reflect that sense of vitality, and of hope.

Outcome

The CODES organization gained new communication tools to help them work towards their mission. They are more empowered than ever with full control over their message and it’s medium to engage with and expand the CODES community.

This important independence was our goal - and a key success metric for All Purpose. The CODES project was a precise example of why All Purpose exists. To amplify and support the missions of organizations whose work is critical to a more sustainable future.