The City of Ann Arbor, Michigan

Water Billing Website

Evaluating the city's water services website



UX Researcher


6 weeks sprint Oct 2021 - Nov 2021

Project Type

Usability Study | Web Design | Accessibility | UX Research | Consulting


Zoom, Miro, Microsoft Excel, Google Drive, Adobe Photoshop


💡Our team conducted UX research to enhance the Ann Arbor City Water Billing website and improve resident engagement with AquaHawk. The client kickoff meeting highlighted the need to reduce unnecessary customer phone calls by making information easily accessible on the website. Our investigation also identified the website's lack of essential accessibility features for different user categories.


How to Reduce customer service inquiry volume and improving experience for different user categories

⁉️ How do residents currently navigate their Water Billing services, and what are their preferences for accessing relevant information?
⁉️ What obstacles and points of confusion could we eliminate to help Ann Arbor residents easily understand and manage their water billings?


By obtaining research buy-ins from clients, we successfully streamlined the user navigation of the City of Ann Arbor Water Billing Website by 90%, enhancing the user experience for over 50,000 customers.

📌 The department prioritized and implemented our team's recommendations within 6 weeks. Which significantly enhancing the overall user experience for over 50,000 customers. The improvements made contributed to more efficient task completion and a more satisfying interaction with the water billing services, ultimately leading to reduction in customers inquiries.
Users took 3+ minutes to find the the online water payment page due to redundant text and misleading links. now it only takes them 30 seconds finish their task


Our usability evaluation consisted of 3 phases

User Interviews

Usability Testing

Card Sorting

Onboarding Interviews

As part of our UX research, we gathered information about residents' backgrounds, including whether they were homeowners or renters and if they paid their bills directly or through their landlords. We also inquired about the methods they used to pay their bills. Understanding these details helped us gain insights into the diverse user categories and tailor our proposed website improvements to suit their specific preferences and needs effectively.

Usability Testing

During the user testing phase, we identified two primary goals:‍

💡 Understanding how users typically pay their water bills

💡 Examining how users approach and resolve encountered problems during the billing process.

We gave the residents 3 tasks to complete

Task 1: Observe how resident manage their water bills and water related issues before introducing the website (to see how they usually navigate  their current habit)
Task 2:
Observe how completed water related tasks after introducing the website
Task 3:
Perform water related services such as Resolving water billing issue View water consumption

Card Sorting

Content headlines from the A2 Water Billing Website were placed on sticky notes. Users were asked to rank each sticky note based on how likely they would use the content

0 = Unclear what content means
1 = Unlikely
2 = Likely
3 = Very Likely

The goal was to evaluate the organization of content on the website based on resident feedback. We used card sorting for two reasons:

💡 Ranking the content headline of the website based on how likely they would use

💡 Identifying unclear wordings

User recruitment

For user recruitment, we specifically targeted Ann Arbor residents who are responsible for paying their water bills.
📌 Challenges
With just 24 hours before our scheduled in-person interviews, 100% of our participants canceled.
Despite this setback, we swiftly adapted and transformed our planned in-person testing into virtual testing sessions, utilizing tools such as Zoom, Miro, and Google Drive to create a virtual-friendly experience for participants. Through these efforts, we successfully recruited 9 participants and conducted internal team demos to ensure a seamless testing process.


01. The website does not accommodate diverse user payment preferences

💡FINDING 01: Lack of Visual hierarchy - The absence of proper color saturation, appropriate text scaling, and information grouping on the web page resulted in cognitive overload which led users to overlook important information and extend the time needed to finish tasks.

💡 FINDING 02: Web accessibility problems There were issues with color contrast and unaccessible hyperlinks text, which can potentially hinder users with visual impairments or other accessibility needs from effectively navigating and interacting with the website.

Design Solution

Web Accessibility Enhancements

✔️ Reorganized the information hierarchy of the page, prioritizing payment options with clear and easily readable headlines, to streamline the user experience and facilitate quicker access to relevant payment methods.

✔️ Enhance the color contrast of headings and increase the text size to improve visual accessibility and readability.

✔️ To enhance accessibility for screen reader users, we improved the visibility of vague hyperlinks like "click here" and "Read More" by providing clearer descriptions of the link destinations, allowing users to quickly understand where the link will lead them.

After Recommendations
Initial Website

02. Customers are task oriented. However, they have to click through several links to complete their task.

💡 FINDING 03: Lack of information hierarchy. There are a lot of irrelevant information such as the AquaHawk information at the top of the page that made it challenging for users to complete their intended tasks efficiently.
💡 FINDING 04: Content headlines are ambiguous (UX Writing) From card sorting and observing users during testing, we discovered that the language used in content headlines can be misleading. Causing a lot of confusion and users getting lost in irrelevant links. This increased the time to complete their tasks.
💡 FINDING 05: Residents prefer contacting customer service instead of using the city website for readily available information. This indicates a potential gap in the website's information accessibility,

Design Solution

Improved Navigation

✔️ Intuitive navigation: we determined the most frequently accessed tasks and suggested adding a Quicklinks sections on the main page.

✔️ focused information: we have eliminated ambiguous headings and removed irrelevant content that previously contributed to information overload

✔️ Streamlined customer Experience: Identifying the most commonly asked questions and concerns allowed us to eliminate the need for residents to contact the water billing department by phone.


We were able to attend online student advising sessions which helped us understand the dynamic between students and the advisor. However, we were not able to go to in-person events and meetings to conduct field studies due to Covid-19
Initially, I felt confident in the interview protocol questions I prepared with my team. However, as the interview progressed, I found myself needing to deviate from the planned questions frequently. I tried to remain composed and I adapted my approach, asking questions that were more relevant to the interviewee's experiences. I also ensured that it did not affect the overall flow and quality of the interview.