Constellation Energy Group

Large companies like the Constellation Energy Group are both exciting and challenging. It’s exciting working for those businesses because they are already profitable. It’s challenging because change in large companies happens slowly.

Usually there is a forward-thinking executive or team lead within the company who has spotted a real problem, but they lack the skill and storytelling ability to convince leadership in their company that it’s worth making a change.

An executive at Constellation had such a story that needed help telling. He wanted to show how Constellation’s existing member portal could be updated to include modern features that were accessible across many platforms.

The member portal is where people sign in to pay their energy bills and view the details of their usage. I led a discovery phase with the goal of producing a high fidelity, clickable prototype that our client could use to tell a great store and secure buy-in from his superiors.

Figuring Out What Isn’t Working

Tension is a key element of any good story. If I wanted to create a story about how to improve the member experience, I had to find the tension. So I looked at the state of the current product in an effort to answer the question:

“Where is the pain?”

Pain Points

I identified the major pain points by referencing business goals, customer complaints, and by my own intuition.

It’s difficult to pay a bill

The existing payment platform feels antiquated and does not live up to the standard of a modern web-pay experience. Since the majority of users are signing into the online portal just to pay their bill, upgrading this experience needed to be a top priority.

The system does a bad job of alerting users to its state

Adding to the general lack of confidence that someone feels with the payment experience is the fact that the big number on the home page that says what you owe doesn’t communicate the effects of recent actions. If the user pays a bill, the amount owed doesn’t update or show that a payment has been submitted. There is a delay.

The help experience is poor and leads to too much call center volume

Some people will always want to talk over the phone, but it was clear that the help experience on the existing portal is doing a poor job. It’s hard to find the answers that you need when you need them.

The experience falls apart on mobile devices

The existing website is non-responsive and doesn’t lend itself to payment in particular when a user is away from their desktop computer. We wanted to show how the experience could be improved if someone could access it from anywhere.


We ended up designing four main screens of the new experience and showing how they would look on both desktop and responsive mobile platforms. We showed them in Invision in the form of a clickable prototype.

The Dashboard

The dashboard is the most important part of this prototype. It shows the status of the member’s account, what they currently owe, and gives the details of their current usage.

View Bill

Since there is no good way for customers to view their bill details online other than downloading a PDF, we designed this screen to allow them to do that. Surcharges and other fees are hidden in accordion elements.

Pay Bill

The biggest difference in the new payment interface is going to come from whichever payment platform Constellation chooses. Even so, we made improvements to the initial payment screen so that the user choices are articulated clearly.

Sign In

The sign in screen needed to make the login form clearly visible to existing users, but also include messaging directed towards customers who had never signed in to the online platform before.


The best thing to come out of this project is that the work we did allowed out client to have a conversation that he couldn’t have before. When he presented this concept to the board, people we’re drawn to the updated visual design, and they picked up on the fact that each part of each screen spoke directly to a user need. The copy was friendly and sounded like something a real person would say.

Constellation is currently undergoing an effort to update the web experience, using our storytelling pillars as a guide.

Because of the success of this work, Vokal secured three additional projects from Constellation, and more are coming.

If you want to hear about more problems our team had to solve on this project, send me a message at .

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.