MyAccount Mobile
Direct Energy
THE PROJECT
A critical project I worked on was optimizing the mobile experience for the Direct Energy Business MyAccount portal. At the time MyAccount was considered responsive but it did not have a mobile navigation menu and many of the pages did not adhere to mobile guidelines. Since I worked in MyAccount frequently, it bothered me that we didn't have a great mobile experience. I decided to start researching the problem to come up with a solution.
IDENTIFYING THE PROBLEM
I started the project by identifying the existing problem areas in MyAccount. The glaring issue was the navigation menu. We were using tabs in the navigation menu and on mobile they would stack vertically, pushing our content far down the page. In addition, we had other menu options under a button titled "Menu" which added confusion to navigating the site when on mobile. Besides the navigation menu, I found inconsistencies on different pages including page breaks, incorrect icon and button sizes, and data tables not being responsively formatted.
RESEARCH & DESIGN
With a list of issues identified, I started researching best practices for mobile. For the navigation menu I decided to use the standard "hamburger" menu with the menu options sliding in from the left of the screen. This was actually ideal for MyAccount as hamburger menus work well for sites with lots of menu options. In addition, I wanted the navigation to have a consistent look and feel to our website's mobile menu (which was also a hamburger menu).
​
After working on the mobile menu, I began formatting the data tables. MyAccount at its core has a lot of data and uses data tables to show this information. In addition, most of the data tables in MyAccount include many columns. After researching mobile best practices for tables and analyzing our situation, I found that vertically staking the column information was best for our purposes and provided the best readability.
PRESENTING THE SOLUTION
With solutions in mind, I proposed my ideas to my team and manager. I walked the team through the existing site pointing out our problem areas and demonstrating how these issues could be solved using the wireframe I put together. With my research, walk through, and proposed solution it was clear a mobile update was needed. My ideas were approved and shortly after, we implemented an update to fix the mobile experience in MyAccount.
