Zero Emissions World - Branding

Branding Zero Emissions World

Creative Direction, Branding, Design & UX/UI

Creative Direction, Branding, Design & UX/UI

Zero Emissions World is a climate-focused NGO where dedicated individuals and organisations are banding together to speed up the achievement of the Sustainable Development Goals (SDGs) and protect Earth from climate collapse.

Society, public figures and organisations can contribute to meaningful small projects all over the world. The funds stays fully transparent, so everyone can see exactly how it's being used and how positive impact is created.

ZEW character with flag

Summary

Behind the scenes // process

Behind the scenes // process

The problem
Zero Emissions World wanted to use a gamified approach to their strategy and branding by turning donations into a collaborative community-driven game. However, when I joined, they lacked a clear brand strategy, identity and outline of how the game and platform should work as they began building the website.

The goals

  • Create a foundational brand strategy & identity for ZEW that stands out from its competitors in the climate space, while being easy enough to produce with the help of volunteers.
  • Develop the marketing strategy, incl. messaging, channel-specific content development ideas, timelines and execution plan. 
  • Create an outline of the mechanics and rewards systems for a simple yet fun game that lets users progress over time through donations and missions, akin to an RPG character.
  • Create new (pitch) decks to use for fundraising, convincing potential influential partners and organisations to join with specific missions.
  • Develop potential additional income streams to increase the revenue that could go towards impact missions and sustain the organisation' overhead.
  • Comply with established guidelines and be aware of anything
    that can reflect negatively on the organisation' reputation.
  • Ideally use the established color palette, art direction & tone of voice.
  • The game should be playable in both English and German.
  • The game should be playable within ~1h by 3 to 6 people in a relaxed
    setting while still providing a clear take-away of info & understanding.
  • The physical element should be easy to (re)produce, resist
    basic scratch damage and lends itself to be dismantled for storage.
  • The game should be playable in different settings & environments,
    with various lighting conditions that can affect object tracking. 

My role

As the creative director, I've led & collaborated with the company' designers, developers, marketers, internal + external stakeholders and other volunteers. I led the brand strategy workshops, crafted the strategy & identity pieces, collaborated & mentored volunteers and contributed to the overall business strategy to make it as impactful as possible.

  • Comply with established guidelines and be aware of anything
    that can reflect negatively on the organisation' reputation.
  • Ideally use the established color palette, art direction & tone of voice.
  • The game should be playable in both English and German.
  • The game should be playable within ~1h by 3 to 6 people in a relaxed
    setting while still providing a clear take-away of info & understanding.
  • The physical element should be easy to (re)produce, resist
    basic scratch damage and lends itself to be dismantled for storage.
  • The game should be playable in different settings & environments,
    with various lighting conditions that can affect object tracking. 

The process

  • Brand strategy workshops to distill the essence of what we wanted to be(come) and align everyone on the team with the mission and vision for the organisation and it's brand.
  • Agile development, mixed release cycle due to volunteering time. Short sprints with small groups to keep tasks manageable and transferable between volunteers if needed.
  • Continuous user testing with user groups. Incl. journey mapping, (paper) prototyping, focus group testing and A/B tests.
  • Comply with established guidelines and be aware of anything
    that can reflect negatively on the organisation' reputation.
  • Ideally use the established color palette, art direction & tone of voice.
  • The game should be playable in both English and German.
  • The game should be playable within ~1h by 3 to 6 people in a relaxed
    setting while still providing a clear take-away of info & understanding.
  • The physical element should be easy to (re)produce, resist
    basic scratch damage and lends itself to be dismantled for storage.
  • The game should be playable in different settings & environments,
    with various lighting conditions that can affect object tracking. 

The outcomes

  • Created a unique brand that stood out from its competitors.
  • User testing with the target audience showed high interest in the outlines of the game, creating an increased willingness to donate.
  • Potential influential partners and organisations showed interest in joining the platform as donors and affiliates.
  • Comply with established guidelines and be aware of anything
    that can reflect negatively on the organisation' reputation.
  • Ideally use the established color palette, art direction & tone of voice.
  • The game should be playable in both English and German.
  • The game should be playable within ~1h by 3 to 6 people in a relaxed
    setting while still providing a clear take-away of info & understanding.
  • The physical element should be easy to (re)produce, resist
    basic scratch damage and lends itself to be dismantled for storage.
  • The game should be playable in different settings & environments,
    with various lighting conditions that can affect object tracking. 

Molding the core brand strategy

I created & facilitated multiple brand strategy workshops with the core members & key stakeholders to surface how we wanted to position the org in the market, who the target audiences was, how we would want to stand out from competitors, what the overatching goals are, what the tone of voice + look & feel should be, etc.

With newfound clarity on what we wanted to be and become, we used the core principles as a starting point when heading into designing. It also made it a whole lot easier to create new concise pitch decks and have talks with potential investors given everyone on the team had a shared vision in mind.

ZEW brand strategy exercise sheet
ZEW brand exercise sheet
ZEW brand exercise sheet
Eye icon

Vision

We collaborate to create a
world with net-zero emissions.

Dart board icon

Mission

We empower people to take action
on our emission-reducing missions.

Mountain icon

Purpose

We strive to create a habitable
bright future, one step at a time.

Defining the brand identity

Defining the brand identity

Together with fellow designer, Natasha Fallas Calderón, we explored a few directions for the brand identity through styleframes. We tried to figure out the balance of imagery, colors, typography, tone of voice and how much inspiration we should take from videogames, while staying clear that it's a climate organisation.

Throughout the process we took inspiration from games like The Journey, Firewatch, and other games with a minimal yet expressive artstyle. We mimicked these styles as it was subdued enough to make it not feel like a full-fledged game whilst making it more feasible to create imagery & assets for in terms of production speed and budgets.

ZEW stylescape
ZEW stylescape
ZEW stylescape
ZEW stylescape
ZEW stylescape

Logo revamping

There were already some (re)designs of the logo, but it didn't exactly match the new direction. The old ones also caused issues within a design system as it couldn't adapt to different use-cases, formats & platforms well. So we set out to create a new one.

We went through a bunch of iterations to find a versatile symbol & look that would stand out compared to other NGO's with a similar mission. We eventually landed on an abstract Z-shape with an incorporated zero & percentage mark.

We animated it to resemble the emissions we're trying to reduce. While unused, we created multiple versions of the gas-shape logo that could be used as a alternative for specific countries or types of projects e.g., creating a more dynamic identity. 

Logo revamping

There were previous iterations of the logo, but it didn't match the new direction. They also caused issues within a design system as it couldn't adapt to different mediatypes and platforms well.

ZEW old logo
ZEW old logo
ZEW logo explorations
ZEW logo explorations
ZEW final logo buildup
ZEW new logos panels

Crafting the Zewmans

Just like in games, we wanted users to have their own avatar which they could personalise and level up every time they'd contribute to a project. After researching and testing what would be a fitting character, we settled on creating our own version of a Kodama; a Japanese folklore figure that was said to be the protector of the natural land.

We made out version slightly more humanoid in it's proportions and gave it a customisable mask so it's easier for users to self-identify with it (Somewhat similar to The Legend of Zelda - Majora's mask).

Studio ghibli kodama characters

Kodama's as seen in Studio Ghibli's movie; Princess Mononoke.

ZEW character illustrations
ZEW characters sketch
ZEW character illustrations
ZEW character 3D turnaround
ZEW characters
ZEW concept art landscape
ZEW landscape sketch

Quick layout sketches before going to final rendering

3D idyllic landscape with blue characters

3D key-visual for the website' splashpage by Studio Nuts.

Zero Emissions world Account Settings

Mockup of a Zewman's customisation page

Depending on what type of project you'd support, you'd unlock theme-related items.

Share a post about a rainforest restoration project and get a forest-themed staff, donate to a water-cleaning project and get a limited edition water-themed mask, etc. Albeit simple, its a mechanic that works well to keep people engaged and give them a sense of ownership.

Making it tangible

Together with Elena Kyriakou I designed & guided the creation of wireframes and screens for the final website. A lot of NGO websites tend to have a pretty overwhelming amount of content, lack good UX and tend to have a too serious tone of voice compared to what we wanted to go for. So we took inspiration from other sites that were more lean, had clearer call-to-actions and contained more fun copy, like Netflix, Oatly and Alphaputt.

Once we had some flows done, we'd align together with the developers and the core staff to get initial reaction and see what's feasible. Afterwards Victor Isichei user-tested it with the target audience to see if what we came up with would work in practise.

ZEW website wireframes

Flow structures for sponsor advertisement tiers

ZEW website mockup

Homepage flow tests

ZEW website sign up page

Bringing it all together

After we laid out the foundation and got everyone on board, we created a brandguide to capture the essence of Zero Emissions World. Instead of going overboard with nitty-gritty details, we distilled the core essentials so that any internal or external person could craft something that was in line enough to pass the test. 

We wanted to give staff and vendors some wiggleroom to experiment. This way we could adapt & refine the brand identity over time based on real-time feedback from both staff and, perhaps more importantly, the actual users. As Marty Neumeier stated before; "Your brand isn't what you say it is. It's what they say it is."

ZEW brand guide cover
ZEW brand guide spread
ZEW brand guide spread
ZEW website on laptop
ZEW character with telescope

Wow, you made it all the way here!

Wow, you made it down here!

If I can help you with a similar project, let's talk.

Other projects

Saving Lives with Mixed RealityImmersive CPR, firefighting & medical courses

Covid-19 RapidpassAlleviating the Philippines' medical system

The future of energyHow to create a sustainable energy grid

Molecules to MedicineAn AR journey through innovation

Managing the GridInto the future of rail logistics

Infectious FanaticsDedication as an understatement

Daily RendersCadence of Pixels

Daily UIInterface exploration

3D PlaygroundExploring polygons

Tangible LettersFont vibes visualized

Fading BoundariesHumans x Digital

LinkedIn
Medium
Dribbble