#funFactContainer { opacity: 1; /* Ensure it is fully visible initially */ transition: opacity 200ms; /* Smooth transition for opacity changes */ } /* Initial state of the header */ #header { position: fixed; bottom: -100px; /* Start off-screen */ left: 0; width: 100%; /* Full width of the viewport */ transition: bottom 100ms; /* Smooth transition for bottom property */ opacity: 0; /* Ensure it's hidden initially */ } /* Animated state of the header */ #header.slide-in { bottom: 0; /* Slide into view */ opacity: 1; /* Make it visible */ }
Sarah Fact #1:

Zeppelin | Making lead pipe replacement easier.

My role

UI/UX Lead

Tools

Figma
LucidChart
Miro

Project Type

Internship

Timeline

3 months
01. OVERVIEW

Problem

Amid President Biden's newly mandated Lead Pipe Replacement Scheme, cities are scrambling to figure out how to comply.

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, many cities are struggling 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.

Solution

So, we're modernizing our approach to water infrastructure management.

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.

Simplified

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.

Accessible

Augmented Reality Helper

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

Seamless

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
02. RESEARCH

Competitive Analysis

What Are Current Self-Reporting Tools Like?

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?

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

Understanding User Needs & Challenges Amid the Transition

Empathizing

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.

However, it is often subpar.

Many cities lack dedicated communication channels between them and their residents. This results in inefficient scheduling for inspections and replacements.

Also, a lack of technical knowledge often 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.
03. 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

Wireframing

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 the team 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: Main Mobile Flow

Wireframing

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.

Main Desktop Flow

04. ITERATE

User Feedback & Revisions

Initial Impressions & 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.
📝  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.
📝  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
BEFORE
AFTER
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 into the helper flow at any point, rather than only at the very beginning.

Testing

Moderated Usability Testing Plan

Wireframing

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.
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.
View Detailed Study Plan

Qualitative Results

Moderated Usability Testing Plan

For the sake of organization and clarity, I synthesized the feedback from my usability studies in the following chart.

Users found that the process was simple and easy to follow.

Even for users with little to no plumbing experience.

The support options are helpful in concept, but it's hard to gauge their efficacy before they're fully implemented.

This is difficult to address as a designer. I did my best by paying special attention to what users were getting caught up on and forwarding those insights to our writers.

The instructions on certain steps could be clarified.

For example, some users struggled to locate their water pipe. In one case, a user was confused because their water pipe came out of the wall on both ends, rather than just one as specified in the instructions.

Qualitative Results

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 Foci are Common
Some users struggled to identify their water pipe or focused on the wrong part of it.
BEFORE
BEFORE
AFTER
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.
05. PROTOTYPE
06. TAKEAWAYS

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 and this album