My Account - Dashboard Growing Pains

When you start to grow out of your dashboard, it’s time to take a different approach and build an experience that let’s you tell your ever-changing story.

At Con Edison we operate one of the world’s largest energy delivery systems, our electric, gas, and steam service provides energy for the 10 million people who live in New York City and Westchester County. 

In late 2017, we transformed our website and built a powerful dashboard that gives customers the control and convenience they expect from the companies they do business with. We had been furiously working to launch new capabilities and build upon each previous release. Eventually we discovered that our dashboard, the heart of the “My Account” experience, wasn’t scaling well to accommodate our expanding feature set. After synthesizing insights from focus groups and search queries in Google Analytics, I uncovered three major issues to overcome:

1. The dashboard template isn’t scalable.

2. Content isn’t easily found.

3. Too many unique controls are confusing.

Since these issues were affecting some of the business’ core transactions, it was imperative to start on a plan right away.

Make the Dashboard Scalable

The dashboard was built for residential customers with one service account. We wanted to tell the story that answered our customers’ most common questions, and create a more digitally-engaged audience. Extensive research and one on one interviews led to us to the primary use case. Customers told us they wanted to know how much their bill was and have an option to pay one click away.

We told this story very well at first but it became more and more diluted with every feature we added.

The site uses card-based landing pages to effectively guide people to the content they want. This template is used on all sections except for Account & Billing. It was starting make sense that we should refactor our layout and use the existing template. Before we made a significant change like this, we had to some research to validate the approach.

We tested a tiled layout for My Account and found:

• a 25% increase in success rate on mobile

• a 6% increase in success rate on desktop

• a 2 second decrease in time needed to complete tasks

Improve Discoverability and Find-ability

Cards are a tried and true design convention and an effective pattern within our design system.

“Cards can be effective at improving the scan-ability of the dashboard, as users should be able to quickly find the account feature they’re looking for by scanning card headers or prominent card content (e.g., “Your Lists”, “Purchase History”, etc.).

During testing, however, ‘Cards’ dashboards performed poorly when card content wasn’t implemented with a very high level of consistency.”

Baymard Institute: ‘Cards’ Dashboards Must Be Highly Consistent and Appropriately Styled

My research uncovered that customers were having a hard time finding their bills. This was indicated by looking at search queries on the page where bills are displayed.

I was shocked to discover that the top queries for that page were all related to finding bills. Users had gotten to the page, grown frustrated and resorted to site search to find what they needed, not realizing that they were already on the right page.

To make the dashboard more serviceable, we aligned on an approach to chunk the content so it would work well organized under the navigation cards.

Reduce Unique Controls

It was a business requirement that we use some third-party widgets to display usage graphs and bill comparisons. With no API available, we were forced to display these within iframes and include controls that were built for another design system. In some areas, we ended up with stacks of mismatched buttons and selectors that were hard to understand.

By chunking these sections of content, we expect to increase comprehension and engagement. By removing tabbed controls, we’ll enable our customers to browse more naturally and keep the content in focus.