Water Footprint Calculator

Water conservation is one of the most important topics in environmental discussions today, and it falls directly into the realms of environment and public health issues tackled by GRACE Communications Foundation. We partnered with GRACE to make increasing public awareness of water usage (direct and indirect) a fun and engaging exercise. The Water Footprint Calculator web app uses interactive and animated elements as well as clear and engaging data visualization, resulting in a learning experience that friendly and intuitive—then we made it easy for users to share the knowledge on social media. This project was the recipient of a 2016 Environmental Champion Award from the EPA.

View The WFC Online

The Water Footprint Calculator transforms environmental awareness into a fun, interactive, animated web application that makes consumers want to learn.

GRACE Communications Foundation

GRACE is dedicated to increasing public awareness of environmental and public health issues, with a specific focus on sustainable food production and the intersecting issues of food, water, and energy. The organization uses a variety of multimedia initiatives to educate and influence consumer behavior for the better of the planet. We had the pleasure of working with GRACE’s close partner, The Monday Campaigns, on a previous campaign, Meatless Mondays, and were excited to embark on this project with them; it’s especially rewarding to build projects for clients that are actively engaged in improving their communities and the world.

The Problem

Water conservation is one of the most important topics in environmental discussions today, and it falls directly into the realms of environment and public health issues tackled by GRACE. There’s one specific problem faced by all water conservation awareness campaigns: most people don’t actually know their water footprint and are unaware of the indirect impact of their daily choices, including diet, travel, and lifestyle, on their overall water usage. It’s difficult to get people to use less water if they don't understand how much they use now!

Before they could begin to promote water conservation, GRACE needed a way to help consumers thoroughly understand their water usage and account for the effect of their daily choices. The Water Footprint Calculator was the answer. By giving users a clear visualization of the total volume of water consumed by each of their daily habits, the Water Footprint Calculator provides a simple way to show consumers how easy it is to drastically shrink their water footprint with a few small lifestyle changes.

GRACE developed the original Water Footprint Calculator using data compiled from an extensive list of industry and academic studies. But the Water Footprint Calculator had to be more than just functional. Environmental awareness can often feel heavy-handed and cause consumers to shut down, preventing them from absorbing the message. The Calculator had to prevent that shut down by providing an engaging and—dare we say it—fun experience, one that was easily shareable with family and friends via social channels. That’s where we came in.

Our Solution

Moonfarmer’s strategy was to take the basic format of the Water Footprint Calculator, with the information carefully calculated by GRACE, and transform it into a web application that’s both easy and fun to use and share. We accomplished this in several ways:

Clear and engaging data visualization

ruler data visual

When you’re talking about data, it’s really important to provide visuals that allow readers to more immediately understand numbers and comparisons. That’s why we included a water use “ruler” on the left side of the Water Footprint Calculator. The animated background of flowing water adjusts after each answer, allowing the user to quickly understand which habits have a minimal impact on their water footprint—like taking a 10-minute shower instead of a 5-minute shower—and which have a drastic impact, such as eating meat every day.

When the questions have been completed, the user is able to see a bar graph that makes it instantly clear which of their habits result in the highest water usage. The graph is interactive—a simple hover (on desktop) or tap (on mobile) will allow the user to see the information for each specific bar. These comparisons allow users to easily understand that their indirect water use—affected by lifestyle choices such as eating meat and shopping—actually contributes far more to their water footprint than any actions they directly control, prompting them to consider the bigger picture of water conservation.

Shopping Habits Chart

A fun, easy, interactive user experience

People learn best when they’re having fun—that’s why we wanted the Calculator to feel less like a public service announcement and more like a game. In addition to the colorful, whimsical graphics created by GRACE, we were able to accomplish this through animation, interactivity, and attention to the user experience.In addition to the rising and falling water line we discussed earlier, we added a road map to the bottom of Calculator that easily indicated to users where they were and how many questions they had left to complete. And, when applicable, the graphics accompanying each question are interactive, too, responding to user inputs. All of this interactivity and animation results in the feeling that consumers will want to play and experiment within the app, promoting learning.

Progress Bar

Additionally, our team paid a great deal of attention to the mechanisms by which a user makes a selection or answers a question—be it a button, drop-down menu, or sliding scale—and sub-questions that may be prompted based on the user’s selection. The resulting experience is intuitive and user-friendly.

Easy social sharing and a mobile-friendly experience

Lastly, we wanted to ensure that once people experienced the Water Footprint Calculator, they could easily share with their friends and family. We placed social sharing icons at the beginning at the end of the Calculator. When users have completed the questions and received their final water footprint, they’re given the option to share via social networks. Clicking on the icon generates a Tweet or Facebook post for the user that’s customized to their experience, making it as easy as possible to share.And, like all of our work, the app is fully responsive, meaning it can be used and shared from any device.

The Technology at Work

In order to provide a fast, responsive, and uninterrupted experience, the water footprint calculator was developed as a Javascript application that runs entirely in your mobile or desktop web browser. It requires little to no server-side support and stores information about your progress through the quiz, allowing you to resume where you previously left off if you close and reopen the browser.

The app is built on the lightweight Backbone.js framework. It utilizes modern CSS3 techniques for animation and relies on a mobile-first development style to ensure all user interface components are handheld device friendly.

Delivering rich, high quality visual application experiences in the web browser is a Moonfarmer specialty.

The Outcome

After the launch of the Water Footprint Calculator, ABC7 in California tested the app in a news piece on water use, approaching patrons at San Francisco's Exploratorium and allowing them to try the calculator on a tablet. The result was exactly what EMN and GRACE were aiming for: patrons used the app easily, were interested in and surprised by the results, and many expressed they would take steps to reduce their water footprint. See the full video below.

video featuring the calculator

Additionally, over 500 people have shared the Calculator on Twitter using our simple social sharing links and the hashtag #H2OMG.

Peter Hanlon, Deputy Director of Programs for GRACE Communications Foundation, calls the app "incredibly effective":

"Most of us don't know how much water we use, especially when it comes to the water needed to make the food we eat, energy we use and products we buy. The fun and intuitive design of the new and improved Water Footprint Calculator has been incredibly effective in showing our audience that water truly is everywhere, and that there are more opportunities to waste less and cut back than most of us realize."

In early 2016, the project was selected for an Environmental Champion Award by the EPA—highest recognition available to the public from the EPA.

Discover your water footprint now—or reach out to us to find out how we can create a rich, dynamic web application for you.

A creative digital studio specializing in handmade websites, applications, and art.