• 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

    Explore the human-centered design process and research the user needs. Based on research, create a RWD that would result in an increase in new user engagement and retention.

👉🏾 I do not work for LADWP, and the views from this case study are my own. This project is practice for redesigning and expanding an existing home screen interface.


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

Discovery

- UX and Design Audit -

Strengths

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

Weaknesses

  • 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 -

Common Strengths

  • 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

Weaknesses - First Energy, AEP (Carousel)

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

Strategy

I like to refer to Peter Morville's UX Honeycomb when defining priorities in a project.
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

Design

- Sketches & Wireframes -

- Style Tile -

- Visual Design -