Ecosia has been struggling with its identity for years. A disjointed experience between product and marketing, a lack of visual direction, and a weak brand personality were among the main pain points frequently highlighted through user insights, stakeholder interviews, audits, and workshops. Ecosia felt outdated compared to its competitors. While the existing identity may have felt optimistic and eco-centric, it was too generic and lacked a strong connection to the broader brand. It became clear that the company needed a change — and a strong brand strategy..

It took time for Ecosia to enter into a partnership with an agency. In the months leading up to it, I worked intensively to ensure both our design system and our contributors were prepared for the challenge. We chose to closely pair Ecosia’s internal team with Koto, and in mid-2021, we began working on a new look for Ecosia.

Brand phase

Product exploration

Extremely satisfied with the results of the brand phase, we decided to take a chance and extend the agency’s support to help translate the new brand identity into our product space. Unfortunately, we were not satisfied with the outcomes of this particular collaboration. As a result, we made the decision to cut the phase short and bring the product exploration back in-house. Having been involved in every step, I observed that the core issue during this phase was a lack of senior expertise—particularly in systematic thinking and a deep understanding of our product.

"A sustainable brand should also simply be a good, modern, attractive brand." - Johann Laeschke, Managing Director Koto

Once we signed off on the new look, the design system workstream—led by me—became the early adopter. I took ownership to make sense of all the delivered elements, translate them into our existing system, and develop a plan for how teams across marketing and product would adopt the new visual direction through the design system.

Foundations

Colors - I focused on mapping replacements to minimize visual losses and ensure a smooth, effortless transition that would deliver immediate impact. I used the rebrand as an opportunity to expand semantic colors into iOS and Android apps. At the same time, we were laying the groundwork for light and dark modes. The insufficient color guidelines provided by the agency made it difficult to deliver immediate solutions to interface issues.

Typography - Our primary font needed to perform well, support multiple languages, and work across platforms. We chose Inter to meet these needs,  iOS app used system font. The brand font selected by the agency was Founders Grotesk by Klim, offered with an attractive licensing model. In the design system, we were able to retain the existing type scale with only a few size adjustments. This upgrade allowed us to simplify our typography structure and significantly reduce the number of type styles in use.

Spacing - Unhappy with the previous set up, we decided to follow common guidelines using 4px base unit. This allowed us to align visual look more closely across platforms (Web, iOS, Android) while still relying on different grid systems.

Visual Assets

Trees - Ecosia plants hundreds of species of trees, the idea was to represent the diversity around the world. Trees presence aimed to be a reminder of the brand purpose. We turned them into components to use in different layouts, following color combinations.

Waves - A new element that soften visual look and blended naturally into pages. Waves rather than sharp cuts aimed to resemble nature. We provided them as components to easily apply inside layouts.

Icons - We used external library. The main challenge was to replace one by one keeping exactly the same naming convetion as we used to have for our previous assets.

Components

Dark mode & accessibility

Dark mode was planned to be implemented after the release; however, we needed to support the iOS and Android apps with at least a basic version of it. In collaboration with the Native Apps team, we analyzed possible translations of the design. Although it was far from ideal, it was a solid starting point. Work on the dark theme has continued, but unfortunately, we haven’t been able to secure enough resources to improve it.

Through rebrand we were able to increase accessibility scores. Each Product Designer and Front-end Developer in charge of the contribution, would be responsible to run accessibility checks. In addition we would also host a couple sessions with accessibility experts who would test and provide us with feedback on new designs. 

The experience I gained prior to the rebrand was a game changer in shaping the process this time. Cultivated rituals, qualitative research, practiced management, and mentoring and empowering the teams—all of these came into play.

The handover from the agency left us with a few uncertainties around the visual direction, which required us to embrace an iterative approach and foster close collaboration from day one.

Rituals have always been a strong part of both our design system culture and our product culture. To support coordination and execution, I organized weekly collaborative catch-ups with engineering leads, bi-weekly sessions with the creative lead, weekly check-ins with product designers, and regular critique sessions. We used a dedicated Slack channel (#rebrand-ds) for announcements, learning sessions to boost adoption, and bi-weekly demos to share and celebrate milestones.

Collaborative bridges

While working with my team, I ensured that product teams continued to collaborate with us and with each other. Components like the header navigation, search field, and buttons were shared across teams and platforms, requiring alignment. We ran ideation sessions, used Figma for feedback loops, and Storybook for component testing. Our roadmaps were adaptable, evolving based on the input and impact of the product teams.

Testing environment

Setting up a dedicated rebrand branch was a key part of our adoption process. We used it for instant testing, QA, and to monitor the impact of changes across the entire product. A theme toggle allowed us to switch between light and dark modes, making it easy to observe how semantic colors behaved during transition.

To support the adoption and delivery process, we regularly evaluated the state of our progress, ensuring we communicated any blockers or potential risks early. Keeping our teams engaged and motivated was a top priority. Each team shared their status during demo sessions to keep everyone informed and aligned.

June 2022 arrived quickly—Ecosia officially launched its new identity. The first release included the Search platform (excluding two verticals), landing pages, the personal counter, mobile apps, and a marketing package covering financial reports, campaign pages, and social media channels.

Launch in numbers

After the launch we observed ad revenue growth on desktop by 20%,  30% on mobile. The search volume stayed the same. Search activity did not change. Notably, mobile referrals doubled overnight. Page load performance was negatively impacted due to font implementation issues, which took the team some time to resolve..
Overall, the volume of user feedback increased. The perception of the new brand was largely positive, although some users expressed difficulty connecting with the new logo. Beyond the visual identity, our manifesto and positioning around "green search" received encouraging response.

Design system success

The design system passed its test as a tool used for smooth brand update. Within just three weeks, we translated all design tokens, and within the first two months, 70–80% of existing components were updated. We improved our accessibility scores and simplified the code for several components, leading to better overall performance. The process also brought greater clarity and helped bridge the gap between product and creative teams. Collaboration during this phase strengthened cross-team relationships, expanded our network of advocates, and trained new contributors to carry the design system story forward.

"So Ecosia’s brand refresh looks like an attempt to not only brush up a rather dated look but also underscore that it’s very much not one of the tokenistic greenwashers. (..)The branding refresh flags focus on tree biodiversity — with 12 tree icons modeled on native species displayed in the product to spotlight the location of its projects." - TechCrunch

"It shows that a deeply sustainable, nature-loving brand doesn't have to conform to clichés and focuses on boldness instead of organic vibes." - Grafikmagazin

What worked and what not

Working across teams and coordinating for a major release was a significant effort—but also a strong indicator of our ability to collaborate effectively. As teams, we proved that we can come together, manage complexity, and deliver under pressure. At the same time, we maintained a high standard of quality that not only impressed our leadership but, more importantly, resonated with our users.

This also has been the first experience for Ecosia team to work with an agency. Both for Ecosia and the Koto team, it was a project with many insights on climate knowledge, relations and differences between brand and product environments.

What didn’t work was the lack of a dedicated brand director at Ecosia with a strong understanding of brand across both marketing and product. This gap made it challenging to run the initiative as effectively as possible. Unfortunately, it led to stretching resources thin and overburdening individuals. The design system—and my role in particular—was heavily impacted, requiring me to frequently switch between two hats: design system lead and contributor, as well as brand expert and contributor.

Interested to read more?  Find out about my journey to create a design system  → On the road to Flora

Or learnings when leading  → Nudging a Culture