HydroQuest
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.
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.
Student Interviews
Challenge of finding students. I wrote interview scripts and created survey questions 3 interviews with middle schoolers, 11 survey responses
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.
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.
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
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.