HydroQuest

Engaging middle school students to learn how to combat water contamination in their communities.

Engaging middle school students to learn how to combat water contamination in their communities.

Overview

Background

Laero is a design studio that created a water treatment device called Cycleau; a safe, inexpensive, easy to install device that recycles greywater in buildings to make it potable. Their goal is for households in water-scarce communities to install Cycleau so they can improve their access to clean drinking water.

Problem

Many people in water scarce communities don't trust that mobile water filtration systems like Cycleau are safe to use.

Solution

An e-learning platform to teach middle school students about the causes and impacts of water contamination. Laero's hypothesis was engaging children will inspire them to advocate for in-home treatment systems.

Diving into Research

Objective

Understand what leads to a productive learning environment for middle school students and what contributes to challenges and boredom.

Feature Inventory

In this early phase of the project, Laero was not sure whether they would house e-learning within Cycleau's existing website or create a standalone site/app.


To inform that decision, we conducted a feature inventory comparing the capabilities of Sesei (an LMS Wordpress plugin for the Cycleau site) and 3 competitors. This also helped orient us toward best practices in the e-learning space.

Takeaways

themes: interactivity (games, quizzes), personal achievement tracking, teacher resources)

Takeaways

themes: interactivity (games, quizzes), personal achievement tracking, teacher resources)

Teacher Interviews

To help frame the types of questions we would explore students in our user research, we interviewed 3 middle school teachers about their experiences facilitating positive learning environments.

Insights

Insights

Students are more active and engaged in their learning when they understand how the material connects to the real world.

Breaking up lessons between instruction, activities, and review helps students retain information and stay focused.

Insights

Students are more active and engaged in their learning when they understand how the material connects to the real world.

Breaking up lessons between instruction, activities, and review helps students retain information and stay focused.

Student Interviews

Challenge of finding students. I wrote interview scripts and created survey questions 3 interviews with middle schoolers, 11 survey responses

Insights

Insights

Insights

3.9 / 5

importance of being able to connect classroom material to the real world

73%

prefer learning through games

100%

are motivated by a sense of achievement and progress

Meet Jose, the Inquisitive Student

I synthesized our user research to create a persona that represented the key insights we identified. Jose grounded our team and helped us empathize with the needs and behaviors of middle school students.

Needs

Needs

Meaningful learning: Wants to see real-life application of classroom material.
Engagement: Gains energy and focus when playing learning games or interactive activities.
Achievement: Cares about seeing progress he’s making in his learning.

Frustrations

Frustrations

Information Overload: Struggles to focus when teachers talk for a long time.
Lack of support: Fears not having someone he can ask for help when he feels stuck.
Lack of context: Loses interest when material feels too abstract or unrelated to his life.

Flowing Ahead

Defining Our Scope

I presented our research findings with Laero to get their reactions and clearly define the scope of our deliverables for the next 2 weeks. I facilitated a conversation to better understand their priorities and identify potential challenges.

Client Goal

Constraints

Create a 14 unit online curriculum about water contamination.

Subject Matter Expertise: My team was not well versed enough in the weeds of water issues to instruct on the topic.

Learn how to create material that is engaging for younger students

Research Participants: Scheduling conflict prevented us from being able to run usability tests with Laero's partner middle school.

House the lessons on Laero's existing website since the team didn't have developers.

Site Functionality: Cycleau's website was limited in its ability to host interactive activities.

Deliverables

High-fidelity prototype for a 5 minute introductory lesson.

Annotated wireframes for a variety of activities and slides Laero could use as "plug and play" templates as they scale the platform.

Style guide adapting Laero's brand with color and typography that appeal to younger users.

Plug and Play

Lesson Wireframes

Referring back to our research, my team ideated on several learning module designs that would meet our persona's needs for meaning, engagement, and achievement. We converged on a sample lesson structure:

1) Video (including transcript) to frame the objective of the course.

2) Clickable image that reveals text explaining relevant portions.

3) Open ended quiz intended to encourage students to think about new ideas.

4) Game that applies the material to the an aspect of the user's life.

5) Reflection activity that helps users digest what they've learned.

6) Textbook page pops up when selecting the book icon to facilitate optional deeper learning.

Usability Testing

86.6%

86.6%

86.6%

System Usability Scale score

We ran 3 usability tests with middle school users who all said they would be excited to use this website in class and found it easy to navigate. They particularly liked the quiz because they enjoyed trying to come up with an answer themselves.

Final Materials

Content Guidelines

I researched other types of activities by looking at competitors and platforms the students we  interviewed liked, and came up with 4 additional templates that Laero could use when they were ready to build the platform. I added annotations explaining each content element and explained what should go there and why based on learning principles we learned about from teachers.

Handoff

I led the handoff process with our client who was excited to receive our materials. I wrote a one pager that provided additional context into the rationale and research behind our design decisions and linked to all the assets in Figma they would need once they were ready to develop and launch the site.

Thanks for scrolling! Drop me a line if you want to build something together.

Thanks for scrolling! Drop me a line if you want to build something together.

Get in Touch