Every year the Northwest Earth Institute hosts the EcoChallenge, an online competition where participants take small daily actions to reduce their environmental impact. To increase participation and engagement the EcoChallenge web app was completely redesigned, rebranded, and rebuilt.

What does doing good look like?

New behaviors are difficult to sustain, so we sought to reduce friction and reward participation throughout the design. A bright color palette, playful iconography, and clean, modern typography help establish EcoChallenge as a friendly and approachable app.

Making victory feel victorious.

People really like playing games—gamification has changed the way we socialize, shop, and learn—so we borrowed some gaming strategies to reward and encourage our EcoChallengers. For instance, when participants check in to record their day's actions, we make sure they’re visually rewarded for their effort. Act like a champion, get treated like a champion.

Friendly Actions, Friendly Results

To see how we reward our EcoChallengers, simply select a category and press the button.

A fresh new platform deserves a fresh new logo.

Like the app itself, the EcoChallenge brand was ready for a friendly, modern update. The new logo conveys the energy, diversity, and camaradarie of the EcoChallenge community in a simple, memorable mark. It naturally integrates with the design of the web app, and is flexible enough to look great at different sizes and in a wide range of marketing materials.

Cast Iron took the EcoChallenge to a whole new level. Our participation has increased by 600% in the first year alone!

The more EcoChallenges, the merrier.

Every year there are over eight thousand public EcoChallenge participants, but the app also hosts private events for corporations, schools, municipal governments, and other groups looking to make a positive ecological impact. Administrators need to quickly spin-up and customize private events, so we took a SaaS approach to the platform architecture. With its powerful, granular flexibility, privately hosted EcoChallenge events can have their own unique challenges, point awards, and rules.

Public and private sector organizations can host their own EcoChallenges and customize their homepage imagery, headlines, and body copy.
Public and private sector organizations can host their own EcoChallenges and customize their homepage imagery, headlines, and body copy.

A powerful engine for an engine of change.

Under the hood of EcoChallenge you’ll find a bespoke Ruby on Rails application. To build this application (on a relatively tight budget), we took advantage of numerous Rails features, including Turbolinks and Action Cable. In terms of speed and performance, EcoChallenge feels like a single page app, but without the engineering complexity and overhead of most SPAs. Real time point and impact updates were accomplished by leveraging Action Cable and WebSockets. For the frontend, we relied heavily on forward thinking CSS techniques like Flexbox and STACSS and incorporated ES6 Javascript advancements and Babel for the frontend codebase.