Zeppelin

Making lead pipe replacement easy.

My role

UI/UX Lead

Project Type

Internship

Timeline

December - February

Tools

Figma, LucidChart, Miro

Introduction

Modernizing Our Approach to Water Infrastructure Management.

An estimated 10 million households in the United States are at risk of having lead contamination in their water, yet the majority of cities have no records of where exactly these lead pipes are. It comes as no surprise, then, that amid President Biden's newly mandated Lead Pipe Replacement Scheme requiring all lead pipes to be replaced by 2034, cities are scrambling to figure out how to locate and replace these pipes. Their residents are often left in the dark with little to no guidance on how to ensure their own safety.
As part of Aquapitas’ initiative to fill this gap, I designed Zeppelin, a responsive website that helps residents independently identify the material of their water pipes and relay their results to their municipality. Our goal is to not only expedite pipe replacement for residents in need, but also bolster inventorying efforts through crowdsourcing.

Step-By-Step Water Pipe Identification

The diagnostic process is distilled into a short series of steps, making it easy even for the least plumbing-savvy of us all.

Augmented Reality Helper

Struggling to follow along? Our AR helper will do most of the work for you.

Got lead? Let Officials Know With the Click of a Button.

We'll save you the hassle of a phone call. Submit results with a click, and your town will reach out to you to schedule an appointment for a pipe replacement.
Jump to Prototype

.  .  .

01. RESEARCH

Competitive Analysis

What Are Current Self-Reporting Tools Like?

Competitive Analysis

I kickstarted the process by looking into some of the tools currently available that assist residents in checking their pipes and highlighted their pros and cons:
I noticed that tools either do not provide enough support, or are too thorough and request information that users may not know or may not want to disclose. What the market lacks is an in-between tool that offers a direct path of communication with their municipality while still making the diagnostic process as simple as possible for users.

Domain Research

How Can Residents Identify Their Water Pipe Material?

Competitive Analysis

To make a diagnostic tool, it was essential that I understood the steps to identifying the material of a pipe, especially lead. I did some research and found the following bare-bones process:
And since I wanted to prototype a tool that actually identifies the material based upon user input, I also researched which properties correspond to which pipe material.

User Interviews

Engaging With Our Target Audiences

Residents
who would like to identify their own water pipe
Experts and Officials
who are responsible for coordinating the identification and/or replacement of water pipes
I conducted casual interviews with both groups to get a better idea of their problems, needs, and frustrations amid the newly mandated lead pipe replacement scheme. For experts, I also asked for insight into current efforts led by municipalities and how they’re panning out. These were my main takeaways:
  1. 1: City-resident cooperation is essential. Cities need permission from residents to check their water pipes. Even so, by checking on behalf of a resident, cities use up personnel resources that could be saved by having the resident do it themselves.
  2. 2: Lack of technical knowledge leaves residents feeling helpless. Many residents don’t know how to check their pipes and struggle with confusing instructions. Among those who can figure it out, many are stumped by the detailed questions asked by self-reporting tools, such as water account number or service line install year. This holds particularly true for individuals renting their homes rather than owning them outright.
  3. 3: City-resident communication is often subpar. Many cities lack a dedicated communication channel between them and their residents. This results in inefficient scheduling for inspections and replacements.

Personas

Crafting Personas To Drive Design Decisions

.  .  .

02. DESIGN

Ideation

Structuring an Optimal User Flow

Since this tool is meant for anybody wanting to check their pipes, we wanted it to be as accessible as possible. To that end, I decided make it in the form of a responsive website as they're more accessible then native applications, which need to be manually downloaded by the user and are not always supported across all platforms.
Now, let's get specific. The process would go a little something like this:

Wireframing

Sketchstorming

I explored a little with my sketches and drew up a few variations of desktop landing and dialogue pages. By starting with multiple options, I kept myself from getting tunnel vision too early on in the process.
Landing Page
1
2
3
Dialogue Page
4
5

Narrowing Down

There weren’t any major differences between these options, so I quickly consulted with supervisors at Aquapitas to see which style was preferred. I reminded them that we could cherry pick elements we liked from the various options and pool them together into a new design, but options 3 and 4 were unanimously preferred for being more engaging due to the centered elements, so I stuck with that style as I designed the mobile wireframes. In the end, I had the following main wireframes:
Since the app would consist only of the homepage subsequent dialogue pages, these wireframes were all I needed before proceeding to high-fidelity mockups. To clarify, it is often necessary to start off with creating low-fidelity mockups so that one can evaluate the core functionality of their product early-on without getting stuck on the details. However, since a design for a tool like this is already so minimal by nature, I found the precaution unnecessary. If you’d like to see some low-fidelity mockups I’ve made, please refer to my Hangout case study.

Mockups

High-Fidelity Design: Iteration 1

I created the first draft of my design using Figma. For this iteration, my primary goal was to have a complete design through which users can get a general feel of the tool.
Mobile: Main User Flow
Desktop: Main User Flow

.  .  .

03. ITERATE

User Feedback & Revisions

Initial Impressions and Design Revisions

Before diving into full-fledged usability testing, we first tested the waters by letting users casually toy with the app.

Everyone liked the general structure and design of the tool, but some pointed out a lack of support for users who find themselves stumped. Considering that a primary goal of the app is to make the diagnostic process easier for the average person, this shortcoming was very significant and needed to be addressed in my next design iteration. I came up with two main ways to do so.

01

📝  TESTING INSIGHT

Keeping things simple isn't enough

Some users were concerned that no matter how simplified the diagnostic process is, they might still struggle to carry it out on their own.
‍
‍
✔️  SOLUTION

Augmented Reality Helper

After speaking with Aquapitas to get a better idea of how we could harness their technological capabilities to provide users a more accessible experience, I pitched the idea of using computer vision to help users identify pipes and their properties through their mobile camera.

02

📝  TESTING INSIGHT

Need for alternative, simpler modes of support

Some users won't have a mobile device handy, others just want a gentle nudge in the right direction. To accommodate everyone, we should have a second, simpler avenue of help.
BEFORE
AFTER
✔️  SOLUTION

Help at every step

Currently just a placeholder, the information provided in these help sections will be created by experts at Aquapitas in the form of text and ADA-compliant photos and videos.

These sections will also contain an option for users to bring out the AR helper. This enables users to opt for the helper at any point, rather than only at the very beginning.

Testing

Moderated Usability Testing Plan

Now that I had a fully-formed prototype, my next step was to thoroughly evaluate the user experience within a contextually-accurate setting, in contrast to our previous informal evaluation. As such, I conducted moderated usability studies with users of varying technical ability in a controlled environment with lead water pipes. (Don’t worry, the owners of the residence knew about these pipes and were replacing it soon, but let me run my tests before they did so.)
Here’s a summary of the process:
  1. 1: Introduce the project background and research goals.
  2. 2: Reassure users. Let them know their privacy is protected, and ask them to be honest and vocal about their experience with the app. My feelings will not be hurt.
  3. 3: Prompt the user to go navigate the user flow independently. Encourage them to think aloud as they go.
  4. 4: Ask follow-up questions and gather feedback about their experience.
  5. 5: To wrap up, ask users if they have any remaining questions or comments for me. Thank them for their participation.
Aside from general observations and feedback, I wanted to quantitatively assess how well my design met its key goals. To this end, I created Likert-scale statements to which users can respond on a 5-point scale, ranging from "strongly disagree" to "strongly agree". Each of these questions are tailored to measure the efficacy of a specific design goal.
Lastly, I also planned to measure two KPIs: Conversion rate and accuracy rate. The conversion rate denotes the amount of users who successfully reach the end of the diagnostic process, and the accuracy rate denotes how many of those users are given the correct diagnosis.
View Detailed Study Plan

Results

Key Insights

For the sake of organization and clarity, I synthesized the feedback from my usability studies in the following chart.
I found that:
  1. • Overall, users liked that the interface was simple and easy to navigate. They found that it made the process seem less intimidating, even for users with little to no plumbing experience.
  2. • They appreciated the support options, such as the help section and the AR helper, but some pointed out that it wasn’t possible to precisely evaluate them before they’re fully implemented.
  3. • Users liked the concept of the app communicating findings to their municipality and helping facilitate the pipe replacement process, saving them from the hassle (and potential anxiety) of manually calling their town to report results.
  4. • The most common issue users had was locating their water pipe in step 1. For example, one user mistakenly focused on their gas pipe, while another was confused because their water pipe came out of the wall on both ends rather than just the one mentioned in the instructions. It was evident that the instructions were not as clear as they could've been.

How Well Did We Meet Key Design Goals?

To answer this, I summarized the responses to the likert-scale statements and measured my KPIs in the following charts. Take a look!
The accuracy rate wasn’t as high as I’d hoped, but a good lesson did come out of it. Namely, I noticed that all incorrect diagnoses were a result of the same error of mixing up the options “Dull Gray” and “Dark Gray” in Step 2 of the survey. To avoid confusion, I changed the options to “Gray” and “Black” and adjusted the corresponding conditional logic.

Design Revisions

Enhancing Clarity

After synthesizing the feedback from our usability tests, I found that all issues faced by users came down to a lack of clarity in the text. Aside from the aforementioned ambiguity and a few textual tweaks here and there, there was one more recurring problem to address:
📝  TESTING INSIGHT

Misidentified pipes and misplaced focus are common

Some users struggled to identify their water pipe or focused on the wrong part of it.
BEFORE
AFTER
✔️  SOLUTION

Clearer Instructions

For every step, we modified the instructions to be more elaborative and anticipate some of the common mistakes we witnessed during our tests.

.  .  .

04. LATEST PROTOTYE

.  .  .

05. FUTURE STEPS

Creating an Admin-Side Dashboard

You might've noticed that although this tool is meant for both residents and their municipalities, most of the work you've seen in this case study caters to residents. In the works is an admin-side dashboard that contains all necessary information regarding water pipe compositions throughout the town, including but not limited to information submitted through user-side Zeppelin. Our goal for this dashboard is to assist replacement efforts for municipalities across the country, but there's still a lot of work to do to pinpoint how exactly we can do that.

I created some exploratory mockups already – check them out!
Made by me with <3