Stormwater Interactive

About

Stormwater runoff is a large contributor to water pollution and environmental impacts in large cities. Stormwater interactive is a fun online game that teaches people about stormwater best management practices (BMP's). The application provides a drag and drop interface that allows users to install BMP’s to a property and view the runoff impact.

My Roles

  • UX Design
  • Visual Design

Process

Step 1: Persona Development

During the persona evaluation phase, we unconvered two primary users for the Stormwater Interactive game: A residential homeowner interested in getting tax credits, and primary school children learning about environmental impacts in the classroom.

Challenges
  • Build a gamelike interface for subject matter that’s traditionally not exciting.
  • Make it fun and useful for students and homeowners.
Takeaways
  • When we began the project, our primary focus was on homeowners. Once we discovered the student persona, it gave us energy to make it more fun and interactive.

Step 2: Wireframing

The wireframing stage was a crucial step in identifying the workflow required to learn about stormwater tools. It evolved from a linear flow diagram, to an exploratory interface.

Challenges
  • Create a workflow that fulfills the needs of a homeowner and a child who wants to play a game and earn badges.
  • Make it fun for kids and adults.
Takeaways
  • The workflow was the same.
  • Everyone can have fun and learn at the same time.
  • We allowed users to skip the quiz and badge component if they just wanted to explore and play a game.

Step 3: Visual Design

The illustrations and UI for this project needed to be friendly, fun, and show just enough detail to learn about stormwater best management practices.

Walkthrough
Challenges
  • Maintain a limited color pallet, while creating detailed illustrations.
  • Provide a sophisticated amount of detail, while maintaining a playful environment.
Takeaways
  • By limiting the number of colors I used in the illustrations, it forced me to design with a better quality of line and detail.

Step 4: Illustration System

The final illustrations were broken down into components that could be used for implementation.

More Projects

PayPal Experimentation

Cicero Website

District Match

Stormwater Interactive

Voting Information

More work can be seen at be.net/crtcreative