• About Company

    The Los Angeles Department of Water and Power is the largest municipal utility in the United States, serving over four million residents. They currently have a web and mobile site for customers to access their accounts and pay their bills.

  • Design Goal

    Consider real people's perspectives throughout the design process and research their needs. And based on that research, create a RWD that could result in an increase in new user engagement and retention.

👉🏾 I did not work with LADWP, and the views from this case study are my own.

The Problem

What I know
Experience between LADWP’s website and mobile site are not consistent. This could result in low usability and engagement.
I reviewed the interface and functionality of the website. The mobile version has a sign-in wall so I was unable to view its inner workings.
The most prominent interface issues were inefficient interactions, outdated style, and inconsistent design.

What I need to find out
What is the most strategic opportunity for LADWP that will enhance a customer’s experience?
What are the current pain points for customers, and what could be done better to attract and retain more users?

What I found out
To avoid assumptions, I referred to J.D. Power’s Utility Website Evaluation Study (2016, 2017):

  • The percentage of large utilities offering a mobile channel for their customers either through a mobile-enabled website or mobile app has increased dramatically to 92% in 2016 from 72% in 2014, and satisfaction with ease of use has improved to 409 ( on a 500-point scale) from 405.
  • While many of the utilities have adapted to responsive design for their website, customers are experiencing problems accessing content due to design and functionality challenges with the site.
  • The volume of problems experienced by customers is most likely driven by the lack of content or the inability of customers to find content, as opposed to issues with the website’s technology.
“Utilities need to understand that content is king and customers expect to conduct the same interactions on their mobile device as they do using a desktop.” - Andrew Heath, senior director of the utility and infrastructure practice at J.D. Power

By way of comparative analysis, I measured what other companies in the same market were doing. And I documented successful attributes that could improve LADWP’s interface design.

As a solution, I created a contemporary interface that:

  • Controls the user’s focus and attention
  • Reduces mental effort and maintain flow
  • Is designed for everyone


UX and Design Audit


  • Choices are visible
  • Focus on Account Access
  • Quick access to Emergency Information (Outages)


  • Too many choices at once
  • Lacks visual and informational hierarchy
  • Lacks whitespace
  • Inconsistent and outdated styling
  • Experience not consistent on different devices
  • Inefficient basic interactions
    • Hover states for Buttons, Links
    • Focus on a form field

Comparative Analysis on Utility Websites

AEP Ohio
Alabama Power
NV Energy

Common Strengths of all Utility Websites

  • Control the user’s focus and attention
    • Interface has a clear starting point
    • Users are guided through a visual hierarchy
    • Unnecessary information is deemphasized
  • Reduce mental effort and maintain flow
    • Choices are simplified
    • UI communicates which items are clickable or interactive
    • Use Icons and Symbols to Convey the Meaning of an Interaction
  • Communicate the expected outcome of an interaction
    • Descriptive button labels
  • Focus on Account Access
  • Quick access to Emergency Information (Outages)
  • Engaging style and imagery

Common Weaknesses - First Energy, AEP (Carousel)

  • Easy to overlook
  • Content not engaging
  • Controls are hard to see


When defining priorities in a project, I like to refer to Peter Morville's UX Honeycomb.👉🏾
For this project, I focused on making the UI useful, accessible, and desirable. To achieve this the UI must have:

  • Mobile-First Approach = Content-First
  • Incorporate Common User Tasks
    • Set up an online account
    • Account log in
    • Make a payment
    • Research energy saving information
    • Report outages
    • View outages
    • Locate contact information
  • Incorporate Common Strengths
    • Control the user’s focus and attention
    • Reduce mental effort and maintain flow
    • Communicate the expected outcome of an interaction
    • Apply visual finesse
  • Be Designed for Everyone
    • Don’t use color as the only visual means of conveying info.
    • Ensure sufficient contrast between text and it's background
    • Provide visual focus indication for keyboard focus
    • Avoid component identity crisis
    • Don’t make people hover to find things


Sketches & Wireframes

Style Tile

Visual Design