Back to Blog

Designing Transactions: Online Bill-Pay Reimagined


This post was written by Laura Lozano, a Fresh Tilled Soil apprentice, in response to Challenge 1: Redesigning an Experience.

Paying your utility bill is never fun. But there is no reason why the experience can’t be pleasant.

For a recent usability redesign, I set out to improve the online bill-pay experience for a regional utility company. All aesthetic flaws aside, the current bill-pay site suffers from broken code, a lack of link hierarchy and illogical organization. The site creates a confusing and overwhelming experience for the new user interested in quickly moving through the painful process of parting with their money.


When approaching this redesign, I relied on a few, key sources for inspiration and guidance:

  • Opower: Opower is a company that is trying to better educate consumers on their energy consumption. The Opower website nicely employs imagery and diagrams to break up and more effectively convey dense and dry information. For the layman, like myself, charts tracking my kilowatt per hour usage, while useful, can be snooze inducing when not properly contextualized or presented.
  • I also took inspiration from and the intuitive and clean dashboard implemented on their site. Instead of presenting consumers with endless menus and pages, the site effectively distills all of the relevant information into a single, visually-appealing dashboard.

My Solution

My goal was to design a site with (1) intuitive navigation, (2) easily digestible content and (3) informative and actionable information.

(1) Intuitive Navigation

The main fault of the current website is that it lacks one, clear navigation menu. Currently there are 3 navigation areas: tabs (at the top of the page), left navigation links and quick links to the right of the content (which include the account utility links mixed in). To access all of the information on billing, for example, users need to navigate to both the left navigation and the right navigation areas to find all of the relevant content. As you can imagine, it’s very easy to overlook something.

I wanted to categorize all related information into overarching topics that would become the links in a single, horizontal navigation. Instead of hunting around on the welcome screen, with a glance users can quickly grasp the type and breadth of actions available to them on the site. As a user hovers over the main menu links, a drop-down mega-menu appears. The mega-menu allows users to get some top level information about each page before leaving their current page.

EnergyStar Mega Menu Image

(2) Easily Digestible Content

Instead of confronting users with a barrage of information about their account, I designed a dashboard to greet users with only pertinent information, nicely bucketed into related content areas. As a user of the site, I also wanted to make commonly used functionality easy to navigate to from the welcome dashboard.

Additionally, on pages with seemingly endless bulleted lists, I introduced iconography and callouts to break the information into digestible portions.

EnergyStar User Dashboard Image

(3) Informative and Actionable Information

My final concern was how to better improve the process by which users learn about their energy consumption and act on that information. Currently the site has a simple line graph that shows energy usage in kWh per month. The inclusion of a graph is a great visual representation of what can otherwise be rather boring information, however it leaves users with a few questions:

  • What exactly is a kWh?
  • I can see that my kWh changes every month, but so what?
  • How can I actually take this information about my usage and change my habits in the future?

Contextualizing that content is key. To aid users understanding of their energy consumption, I started by adding a contextual hint above the graph to direct consumers to a page with the relevant information to help answer those questions. I also worked on the design of the actual graphs, finding new and compelling ways visual to present usage information.

EnergyStar Understanding Your Usage Page Image

To view the whole redesign, check out the interactive wireframe.

In Conclusion

An enjoyable experience is not just about a beautiful UI (not that design is not important–as a designer I will defend to the death the importance of a compelling design). But at the end of the day the content is the core of a user’s experience. The content is what initially drives a user to a site. And ultimately, the content is what keeps the user coming back. That is why the accessibility of a website’s content is so paramount to it’s success. Accessibility can mean anything from a logical hierarchy of information to easy navigation tools.

And just because certain websites have what amounts to a captive audience (government websites are a notorious example), this should not excuse them from caring about their consumers’ needs. But the art of website construction is still in its infancy when compared to the years of entrenched print design patterns. Someday we will live in a world where text haphazardly slapped on an HTML page will no longer be an accepted practice. Until that day, I’m afraid we will need to brace our sensibilities, and browse with caution.

Author Laura Lozano

More posts from this author

Sign up to receive updates from our blog

What we do Expertise

From concept to design, we'll partner with your team to deliver amazing product and website experiences.

Recent Projects Work

See the results of our most recent digital product and website engagements.