3D idyllic landscape with blue characters

Zero Emissions World - Branding

Branding Zero Emissions World

CREATIVE DIRECTION • BRAND STRATEGY • BRAND IDENTITY • 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

Challenges

Behind the scenes // process

Behind the scenes // process

  • The org lacked a cohesive brand strategy & identity.
  • The gamified donation platform lacked a clear structure and mechanics.
  • The platform's development didn’t have a defined vision & direction.
  • No brand presence to effectively engage new donors and partners.

Goals

Behind the scenes // process

Behind the scenes // process

  • Develop a unique brand strategy for ZEW to attract new users.
  • Create a marketing plan with messaging, content ideas & timelines.
  • Design a simple game with rewards for donations and missions.
  • Develop fundraising pitch decks to attract potential partners.
  • Explore additional income streams for sustainable operations.
  • 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. 

Outcomes

Behind the scenes // process

Behind the scenes // process

  • The distinctive new brand highly increased user donation interest.
  • Attracted multiple new potential partners and organizations.
  • The development & design process was streamlined to optimise results.
  • 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. 

Role

Behind the scenes // process

Behind the scenes // process

  • Led the creative team & stakeholders.
  • Developed the brand strategy & identity.
  • Mentored a dozen of volunteers.
  • Shaped the overall business strategy.
  • 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. 

Process

Behind the scenes // process

Behind the scenes // process

  • Conduct brand strategy workshops.
  • Agile dev with mixed release cycles.
  • Have short sprints with small groups.
  • Conduct continuous user testing.
  • 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 FanaticsStories of intense fans

Daily RendersCadence of Pixels

Daily UIInterface explorations

3D PlaygroundExploring polygons

Tangible LettersFont personalities visualized

Fading BoundariesHumans x Digital

LinkedIn
Medium
Dribbble