Goals
- Refocus the brand and website around EG’s role as a creator of tools, not just a participant in projects.
- Clearly communicate EG’s expertise across three key areas: capabilities, collaborations, and applications.
- Highlight Earth Index as a flagship tool while accommodating a broad portfolio of work.
- Establish a clear, flexible visual identity that reflects EG’s mission and works seamlessly across digital and print.
- Create a clean, modern design system that makes the site easy to expand and maintain over time.
Brand & Visual Identity
The new identity for Earth Genome began with a conceptual foundation rooted in simplicity, adaptability, and systems thinking — values that echo across their tools and mission. We explored visual references ranging from DNA base pairs and geometric intersections to environmental iconography.
Process
Final version
Discovery & direction
We explored three distinct messaging directions — solutions, collaboration, and data — to clarify how Earth Genome communicates its mission. Each direction emphasized a different facet of the organization’s identity: its proactive impact, its collaborative model, and its data-driven approach. This process helped surface language that resonates across audiences and informed the tone, structure, and storytelling of the new website.
We took the data approach — one of the three initial directions explored — as the foundation for the final design. The visual metaphor centers on transformation: from raw, unstructured inputs to refined, usable insight. This is expressed through a grid of evolving shapes, where large, abstract blocks progressively resolve into smaller, more ordered forms. The transition mirrors Earth Genome’s work — turning complex environmental data into actionable intelligence — and reflects the clarity, precision, and purpose that define the organization’s mission.
Wireframes & Web Design
Wireframes
Designs
.avif)
The static assembling globe in the hero section was replaced with a dynamic animation that better conveys transformation and clarity:
Development & Integration
- Webflow front-end fully responsive and scalable.
- Custom CSSR framework for scalable CSS classes implementation (fixed minified CSS file weight).
- GSAP and Webflow animations.
- Performance optimizations for low-bandwidth rural areas
Documentation & Handoff
- Full developer and editor documentation in Notion (incl. CMS, filters, print templates, translation workflows).
- Design system spec sheets (tokens, logo uses, brand colors).
Impact
The new Earth Genome site clarifies the org’s mission, elevates its tools, and connects projects to outcomes. It now serves as a flexible hub for showcasing both current tools and new collaborations — helping EG build momentum and visibility with funders, partners, and mission-aligned orgs.
- Clear, filtered views of work by theme, collaborator, or capability.
- Reusable structures for adding new projects and tools.
- Stronger storytelling around Earth Index, the org’s AI platform.
- Strategic foundation for EG’s evolving brand and digital voice.
Team & collaborators
Mikel Maron — product Lead at Earth Genome.
Slava Fedosenko — project lead across strategy, UX, UI, visual direction, and development.
Tanya Matushenko — Webflow development and CMS architecture.
Alyona Belyakova — design partner on visual explorations and conceptual framing.