• Audited current screens and flows
• Restructured content and information architecture
• Mapped key flows and content structure
• Utilized a new enterprise design system I had created to redesign the app and align it with CenterPoint’s updated branding
• Developed initial iterations with prototypes
• Structured and conducted moderated usability testing, gathered insights, and refined screens

1. Help users manage their account and pay their bill with less friction.
2. Incentivize lower energy use by making consumption visible and understandable.
3. Increase engagement by helping users see what they’re using and why it matters.

I created and iterated on several quick design concepts without fully refining them, exploring ways to incorporate the new brand styles, content options and positioning, layout, header styles, and the best ways to optimize key flows across various screens.

I created several screens and explored different flows for making a payment, including editing payment details, reviewing a payment, and confirmation. I based the payment flow iteration around a user with autopay set up, since a large majority of users have autopay enabled.

I reviewed my iterations multiple times to identify what was and wasn’t working and providing value, then I shared them with peers, who highlighted a few additional issues. I selected and refined a handful of iterations and prototyped them for user testing.

I took the iterations through moderated usability testing to gather feedback and validate direction. Overall, users responded well to having valuable, proactive information surfaced to them. They wanted useful information they could engage with, an easy way to understand their usage, and the simplest possible path for paying bills and accessing past ones. Below are some of the key insights from testing.

Login

• Face ID login would be very valuable.
• Typing credentials every time felt tedious.

Home

• Users preferred quick usage insights over a graph on this screen.
• They also valued the energy savings tips and said they’d use that information to try to save.

Pay Bill

• If autopay is already set up, users wanted the screen to prioritize managing autopay over paying.
• Account number is better in the header so it doesn’t compete with the billing info.
• Button placement at the bottom of the screen versus below the content tested best here, since it’s closest to a user’s thumb.
• A green checkmark reads best as good and complete.

Usage Screen

• An estimated next bill or bill projection wasn’t seen as valuable, since it didn’t tell users what to do about it.
• The area insight tip didn’t feel proactive either.
• Users preferred a line graph.
• Users loved the ability to set up a daily usage alert.
• Highest usage day and peak day were easy to read directly off the chart and didn’t need a separate call out or stat card.
• Users preferred timeframe selection via chips over a dropdown, since it was easier to select.
• Users liked being able to see the percentage change at a glance.

I utilized the feedback to refine the usage screen and work out a few additional functional details. I explored different approaches for the timeframe selector and for daily usage alert setup, including whether the alert should be shown or hidden by default and what the experience should look like if hidden. I also explored whether and how to surface average daily use and peak usage time.

The splash screen, and the rest of the app, uses the light blue gradient widely featured in CenterPoint’s new branding as a background. It keeps the CenterPoint logo large and centered in its full color version, since that treatment carries the strongest brand recognition.

The login screen attempts Face ID from the start for returning users, the fastest and most effortless way to log in. If Face ID fails, a user opts out of it, or they’re a new user, a standard login screen appears instead.

Paying a bill on an account with autopay set up prioritizes managing autopay as the primary action, while still letting users choose to pay now instead. The pay now instead path takes the user through selecting an amount, choosing a payment method, reviewing the payment, and confirming it.