H2herO Cross-Platform Tool

WATER CONSERVATION USER EXPERIENCE
ROLE
Conducting interviews, developing personas, determining information architecture and responsive design, wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
DURATION
July 2022 - September 2022
PROJECT TYPE
UX

A scalable system designed for social good

H2herO is a US-based NGO focusing on water conservation. The organization needs a cross-platform tool to 1) gather data about and raise awareness of diminishing water resources in the context of climate change and 2) help people and businesses learn about using water more sustainably. H2herO’s primary target users include environmentally conscious individuals and organizations who want to learn more about what they can do to ensure clean water is available to all in the long term.

The Problem

Water resources are being depleted at unprecedented rates by the combined impact of human action and climate change. Especially in the American West, major metropolitan areas are at serious risk of losing access to clean water in the coming decades even as their populations keep booming. The H2herO strategy team has identified making usage data, water conservation projections, and related educational resources publicly available in an easy-to-understand format as key drivers to raise awareness and spur people into action before it’s too late.

The Goal

Design a cross-platform tool that will improve education on the topic of water conservation and make it easy for people to track their water usage data as well as share that data in a comprehensive public database.

User Research Summary

I used available data on water conservation and climate change to develop interview questions, which were then used to conduct interviews. Two primary user groups emerged from interviews: 1) people who want to use water more sustainably but need help staying on track with their goal and 2) people who want to see better and more widely available educational resources — including publicly available usage data — around issues of water conservation.

The feedback received through research made it very clear that users are willing to play an active role in ensuring that plenty of clean water remains available to all in the long term. However, most users indicated that their work would be easier and more effective if they had access to better-designed and easier-to-use tools to help guide them.

Personas

PRIMARY
NAME: Hassan
AGE: 44
OCCUPATION: Software Developer
EDUCATION: Master's Degree

Hassan is a homeowner who needs to get better at conserving water in his household because he wants future generations to still have access to plenty of clean water.

Hassan is a software developer who works for a local utility company. He has recently seen a documentary about the effects of megadrought in the global south and was shocked to learn about the scale and urgency of the problem. Hassan decided to stop watering his lawn in Greater Salt Lake City — and potentially switch to a desert garden — in an effort to conserve more water. Yet shortly thereafter the neighborhood association threatened him with a fine, demanding that the grass around his property be restored to its former greenery. Hassan is deeply frustrated by the situation and committed to raising awareness of the dangers of ignoring the effects of climate change in his community.

SECONDARY
NAME: Consuelo
AGE: 23
OCCUPATION: Lab Assistant
EDUCATION: Student

Consuelo is a climate activist who wants better public data and education around issues of water conservation because she believes that those resources will help spur more people into action.

Consuelo is a biology major and lab assistant working on the environmental remediation of the Owens Lake area in California. Owens Lake dried up during the 20th century due to poor water conservation practices triggering one of the worst environmental disasters on record. Consuelo knows that the same fate awaits many other critical water resources, especially in the Western United States, unless urgent action is taken. When not working on the remediation project, Consuelo volunteers with a local non-profit organization to raise awareness of the importance of tackling climate change through using water more sustainably in her community.

STARTING THE DESIGN

Based on findings from user research and the two personas created, the following products were developed: 1) a mobile app for tracking and sharing water usage data and 2) a responsive site housing a public water conservation database and associated educational resources. Because these products have distinct use cases, I created a dedicated sitemap for each.

App Sitemap

Website Sitemap

Digital Wireframes

After ideating and drafting some paper wireframes, I created the initial designs for the H2herO App. These designs focus on providing an easy way for users to connect their meters and household devices as well as track their water usage through a variety of means including widgets and conservation “challenges.”

Low-Fidelity Prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of registering a meter, tracking daily usage, and participating in a water conservation challenge.

View the app's low-fidelity prototype

Usability Study Findings

After creating the low-fidelity prototype, I prepared three prompts for participants to complete in a moderated usability study. We asked five participants to run through the actions described in the prompts to garner feedback for use in the next set of design iterations. Below is a summary of the key findings of the study.

Staying Motivated

Users want to see their water conservation impact in more concrete terms, including through how much money they are saving by using less water.

Default Challenge

Users were confused by having to manually add a conservation challenge at the end of the signup process and thought that it would be easier to get started if a default challenge were automatically active after registering their meter.

Education Nuggets

Users would prefer it if the educational component of the H2herO App were “sprinkled” in small amounts throughout the main user flow as notifications, alerts, and tips instead of being a separate section with a large amount of condensed information

REFINING THE DESIGN

Based on feedback from the usability study, I developed a high-fidelity prototype, which was used to conduct a second usability study with a different pool of users. The findings from the second usability study were used to iterate on individual pages, design the mockups, and refine the high-fidelity prototype.

Saving Water, Saving Money

After the usability study, I applied design changes such as adding cost tracking and projections to the most prominent widget on the conservation challenge Dashboard. Users consistently thought that spelling out how much money may be saved from using water more sustainably would further motivate people to conserve.

Default Challenge

Further design changes included automatically activating a challenge at the end of the signup process (instead of users having to manually add one to get started) and replacing the “Learning” section with a sub-challenge menu.

Mockups

High-Fidelity Prototype

The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.

View the app's high-fidelity prototype

Accessibility Considerations

Visual Data

Data visualization widgets used throughout the app seek to make complex information available and easy to understand at a glance for as many people as possible.

Flexible Tracking

Allowing users to track their usage manually, by registering their meters, and/or by adding smart devices for detailed submetering enables anyone using the app to start conserving water, regardless of their hardware and location.

Colors

Enhanced color-coding for usage tracking stats on the challenge dashboard considers users with vision impairments

RESPONSIVE DESIGN

With the app designs complete, I started work on designing the responsive website. Since, as mentioned above, the app and the site have distinct use cases, the website has its own dedicated information architecture.

Website Sitemap

Where the app’s primary focus is to help people improve their water conservation habits by tracking household usage, the site centers on providing educational resources, and features a database of water usage data. People who use the app first are encouraged to share their usage data on the website’s database. People who browse the website first are encouraged to contribute to the database by downloading the app and tracking their water usage.

Responsive Website

Website-App Flow: High-Fidelity Prototype

This high-fidelity prototype follows a user flow involving both the site and the app. First, users browse the website for information about water conservation and navigate to the main database. Second, users decide that they want to contribute to the database and download the app to track and share their water usage. Last, users share their conservation data from the app and review their impact on the site's database.

View the high-fidelity prototype of the full user journey of tracking and sharing water conservation data.

1. Browse site, find database, and get the app

2. Track water usage with the app & complete conservation challenge

3. Share usage data and review your impact on the database

TAKEAWAYS

Impact

What I learned

Users shared that the H2herO products made them feel motivated to improve their water conservation habits and empowered as members of a growing community of people who are willing to work to help reduce the effects of climate change through direct action and education.

Users are exceptionally excited about the potential of products that blend emerging technology, environmental activism, and open-source learning. We have barely started scratching the surface of this arena. Tapping its full potential may lead to better education and thus increased awareness of issues such as climate change and is likely to spur more and more people into action to tackle these increasingly urgent problems.

Next Steps

More Testing

Conduct research on how successful the app is in helping people to use water more sustainably in their household and how successful the site is as an educational tool

In-app Data Packs

Make portions of the database available in the app as "data packs" that can be downloaded and stored on a mobile device. For example, location-specific data packs will make data that is relevant to users more readily available on their mobile devices without adding unnecessary clutter.

Personalize Database

Add more location- and user-specific elements to the database once users are actively sharing their water usage data through the app.

Get in touch! I'd love to hear from you.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.