All work

Case study · Web Design

Aeline — Greener Planet.

An environmental advocacy and climate action web design engineered to drive global community engagement, transparent donation tracking, and tangible conservation impact.

Aeline — Greener Planet: Designed and engineered by Clobbit
01

Case study

The design challenge.

Environmental websites often struggle with doom-and-gloom messaging that causes reader fatigue. The goal was to inspire decisive hope, make conservation tangible, and guide users directly into active participation.

We organized Aeline's complex ecological programs into three immediately understandable action tracks: Reforestation (tree planting), Clean Oceans (plastic removal), and Wildlife Protection (habitat preservation).

Each track is rendered with high-contrast, tactile card modules that summarize real-world progress and show prospective supporters exactly where their contributions make a difference.

Four intentional design systems power the Aeline sustainability experience.

  1. 01
    Dual-Tone Ecological AtmosphereDeep forest greens balanced with fresh sunny lime accents to convey vitality, restoration, and modern environmental optimism.
  2. 02
    Micro-Initiative Card ArchitectureStructured modules highlighting direct ecological impact with micro-counters for trees planted and ocean areas cleaned.
  3. 03
    Frictionless Community OnboardingA clean single-field email activation dock accompanied by transparent social proof featuring 15,000+ verified members.
  4. 04
    Cross-Device Visual HierarchyOptimized readability across viewports ensuring conservation statistics remain prominent on mobile and desktop alike.
15k+
Community members joined
3
Core conservation pillars
100%
Interactive prototype coverage
<1s
Fast visual load experience

Behind the build

How the design took shape.

Engagement
Complete visual identity, UX architecture, responsive web design system, and interactive design prototypes.
Delivered
  • High-fidelity responsive web design system in Figma and production HTML/CSS
  • Interactive split-view hero component with high-resolution environmental imagery
  • Three customized initiative feature cards with hover micro-animations
  • Community pledge onboarding widget with instant validation states
  • Accessible color contrast palette meeting strict WCAG AAA guidelines
  • Modular design tokens easily adaptable for future campaign subpages

Colour palette

  • Forest Emerald#04471C
  • Canopy Leaf#2E7D32
  • Sunlit Lime#84CC16
  • Earth Bark#78350F
  • Pure Morning#F8FAF8
  • Deep Abyssal#0B1612

Typography

  • OutfitHeadings & Impact Headlines
  • Geist MonoMetrics, Coordinates & Impact Data
GET STARTED

Got an idea?Let’s make it real.

We design, build and grow digital products that look the part and work even harder.

WRITE TO US
PREFER A CALL?+94 70 570 6215
Available for work

Tell us about your project

A few details are enough. We'll take it from there.

I'M INTERESTED IN
TIMELINE