CUSTOMER

PORTAL

Enterprise Self-Service Experience

CLIENT

American Water

PROJECT NAME

Customer Portal

ROLE

Lead Product Designer

DATE

10/2018 – 08/2020

This journey shows insight into how this product is conceived. This focuses on the earlier phase of product building as we reveal our iterative process and problem-solving skills that lead to American Waters' first customer portal.

Project Overview

American Water needed to redesign its customer portal to improve service delivery to millions of customers nationwide. I led the UX design to simplify account management and payment experiences, while driving efficiency and customer satisfaction.

My Role & Contributions

• Defined UX strategy and design system architecture.
• Designed key account flows including billing, payments, and alerts.
• Conducted usability testing with multiple customer segments.
• Worked closely with engineering and offshore teams to ensure scalable implementation.
• Presented UX strategy to executive leadership.

Key Challenges

• Serving diverse customer groups with varied technical literacy.
• Integrating multiple legacy backend systems.
• Ensuring accessibility and compliance at scale.

Solutions

• Introduced an intuitive account dashboard for bill pay and service management.
• Streamlined the payment experience with smart defaults and reminders.
• Unified design language through a custom design system.

Impact

+45% adaption rate and customer portal usage.
–50% reduction in time to pay bills.
+15% revenue increase in Q1 post-launch.
Improved customer satisfaction scores.

A Brief History

In 2017 American Water Resources acquired several new plants and expanded its technical infrastructure to accommodate new and existing customers and provide unique services to commercial businesses.

They have invested several million dollars in new technology, including meters, for an enhanced reading experience.

Our task was to create the company’s first customer portal that engages the user and displays key data readings efficiently. 3 standards had been identified.

• Accessibility for all age demographics

• Immersion for a great customer experience

• Longevity & Flexibility for future improvements

What goes where?

The key account elements and structure were identified. We entertained the thought of having multiple pages, but for accessibility purposes, we decided to keep the product one page with modules/popups if needed.

Ironing out the wrinkles

This phase we began to create the cards that would later reflect our proposed tile format.

Payment functionality was top priority for all customer cases.

Future visions

The vision we all shared was uniformity. It was confirmed that a suite of additional applications would utilize some comparable data and functionality.

The head of Technology & Innovation had an idea to integrate Autonomous Learning for usage predictions and billing forecast.

The decision to make this product Progressive and user centered challenged the way we would present customer data.

The previously built "Self Service Tool" was provided as a point of reference for crucial essentials such as Accounts, Usage, Activity, and Customer profiles.

Version 1

This LOFI version 1 has several items that our stakeholders did receive. Property cards, a side menu, and a side panel gave this option sufficient leverage regarding content placement.

Version 2

This LOFI version 2 removed the side menu to concentrate on the side panel content for returning users. In addition, the stakeholders wanted an experience with a hierarchy of "most valuable" components from the top—items like historical comparison and service breakdown added value for the end user.

We introduced the bottom "Card dock" as a component that can add additional card tiles. Those tiles provided the end user with the ability to customize their experience.

Good first try

After solidifying the basic structure, we began to place some data points, build charts, and that’s when I realized an issue. The issue is that only a small percentage of charts can work in a square tile format. Also, how would we accommodate those who may be visually challenged.

It was problematic for the developers to implement various tile lengths.

Our surveyors chimed in and asked a question that changed the overall layout: “How can we clearly indicate and educate water usage & billing to our customers?”

Learning and Refining

After the minor setback, it was evident that the version 2 structure could remedy our placement issues.

I’ve divided the page into three quadrants for optimal engagement.

• The left panel will host all direct and essential data.

• The top A-spot will host most property account data and summary. That area can cascade for additional top-level cards.

• The bottom B-spot will give you a full analytic usage breakdown, Historical comparison, and additional secondary data readings.

• The bottom area will have a card tray where the user can add cards by dragging and dropping components on the bottom half of the page.

First Iteration mock-up

The first design Iteration

The first iteration was where I set the foundation for the customer dashboard experience. My goal was to help users easily understand their water usage and billing data through a clean, structured layout. This version focused on establishing the core framework, visual direction, and information hierarchy. It was a strong start that revealed valuable insights about how real users interacted with the platform—insights that ultimately shaped the second iteration.clarity.

What I Focused On:

Core Structure: Built the main layout and navigation flow to support future scalability.
Visual Clarity: Designed straightforward data cards to make usage and billing easy to digest.
User Understanding: Conducted early testing to uncover user behaviors and unmet needs.
Brand Consistency: Applied the utility’s brand style in a way that felt modern and trustworthy.
Learning Through Feedback: Observed how users engaged with the dashboard, which informed my next design phase.

The second design Iteration

In this second iteration, I focused on transforming the dashboard into a more human and intuitive experience. The first version provided solid functionality, but user feedback revealed areas for improvement in navigation, clarity, and visual hierarchy. My goal was to create a dashboard that not only delivers data but also helps users feel confident and in control of their water usage.