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.
