Gas Utility Customer Account Responsive Design

Challenge: The gas customers' registered account and the ability to schedule appliance and gas checks needed a responsive design, a modern aesthetic, and a clearer means of describing exactly what was wrong. The field technicians can only read small messages, so everything had to be efficient for them on the back end. However, the translation of what those categories are, as viewed by the customer, needed to be clear and descriptive.

Solution: The client had previously conducted a usability study and user research on the older version of the customer account. I began secondary research by analyzing the most common and impactful pain points. I was also able to discover additional opportunities for product enhancement by meeting with and interviewing Call Center representatives, who emphasized what customers both complained about and asked for the most. I then researched competitive websites as well as applicable websites from other industries. I presented my suggestions, through simple wireframes, to business stakeholders to get their feedback and support. I then created user flows, higher fidelity wireframes of desktop, tablet, and mobile sizes, and some testing before designing an updated and responsive user interface.

User Flow

The user flow was created and was the foundation for the pages to be designed within the flow, as well as accounting for conditional permutations on a page level.

Desktop Wireframes and Annotations

One of the biggest user requests was to be given an easy way to report what was wrong with one or more of their appliances. Partially inspired from other industries like successful online ordering for restaurants, technical support house-calls, and athletic shoe feature customization, the functionality was developed. This particular piece of the project is the desktop size wireframe relating to reporting and scheduling an appliance check.

High-Fidelity Desktop Designs

This is the pixel accurate design of the user interface of the same desktop page for reporting and scheduling an appliance check.

Mobile Design

The responsive design required a desktop, tablet, and mobile sizes. Except for the header, the tablet size more closely resembled the desktop size. The mobile size was very different from the other views and required greater attention in the planning and the writing for the functionality and accessibility annotations. Understanding what the equivalent desktop feature should look like while retaining the same functionality in mobile form is important. It was also necessary to simplify how certain equivalents, like error messaging or calendar scheduling. In some cases, through stakeholder feedback and collaboration with developers, a mobile first design approach was taken. The most vital features to retain at the mobile screen size often helps clarify why those features are not necessary on a larger screen size.  

Please view the prototype.

Results