Q:How do utilities design their My Account login pages for mobile-friendly devices? What does E Source consider a design best practice?
A:We surveyed 114 utility websites for our 2017 Review of North American Electric and Gas Company Residential Websites and learned how the top-quartile utilities (based on overall performance) link to their mobile login module for online account access. Of those 28 utilities, we found that:
- 10 use a person icon
- 4 have an on-screen login module
- 4 use a lock icon
- 4 use a hyperlink, button, or other type of icon
- 6 don’t link directly to a My Account login or aren’t mobile optimized
We recommend using an on-screen login module that’s the focus of the mobile home page (figure 1). But if this design isn’t an option, we recommend adding text that says “Sign in” or “Log in” below any My Account icons to make the icon’s meaning clear. Figure 2 includes a list of My Account login designs for the top-performing utility websites. For more design advice, visit the E Source Utility Website Design Center and check out our design guides on public and private website features.
Figure 1: Mobile-optimized examples of utility account login pages
Pacific Gas and Electric Co.
SRP
KCP&L
Portland General Electric
Figure 2: How the top-performing websites of 2017 design their logins
| Ranking (top quartile) | Company name | Mobile My Account login design | Performance score |
|---|---|---|---|
| Note: * indicates that the utility didn’t provide account access to the secure portion of its website. As part of the study methodology, the utility couldn’t earn a rating higher than a 3 out of 5 for any of the four usability components if the feature was found, but account verification was required to fully assess the feature. | © E Source (2017 Utility Website Benchmark) | ||
| 1 | Pacific Gas and Electric Co. | Full-screen sign-in (hamburger menu reveals a person icon next to Sign In) | 883 |
| 2 | BG&E | Person icon above Sign In | 863 |
| 3 | PPL Electric Utilities | Sign In hyperlink (no icon) | 843 |
| 3 | SRP | On-screen sign-in (icon in top menu has a person icon) | 843 |
| 5 | Georgia Power | Lock icon next to My Account | 840 |
| 6 | Wisconsin Public Service | Lock icon next to Your Account | 838 |
| 7 | PSEG Long Island | Person icon | 828 |
| 8 | ComEd | Person icon above Sign In | 823 |
| 9 | Consumers Energy | Person icon above Account | 797 |
| 10 | FPL | Arrow-box icon above Log In | 795 |
| 11 | TXU Energy | Person icon above My Account | 790 |
| 12 | OUC | Lock icon next to Your Account | 785 |
| 13 | Appalachian Power* | No My Account sign-in on home page (hamburger menu reveals Sign In hyperlink, no icon) | 784 |
| 14 | Alabama Power | Lock icon above Log In | 783 |
| 15 | Duke Energy | Person icon above Sign In | 780 |
| 15 | Southern California Edison | Person icon above Log In/Register | 780 |
| 17 | KCP&L | On-screen sign-in | 778 |
| 18 | PNM | Log In to My Account button | 775 |
| 18 | Portland General Electric* | Full-screen sign-in | 775 |
| 20 | American Electric Power | No My Account sign-in on home page (hamburger menu reveals Sign In hyperlink, no icon) | 773 |
| 21 | Hydro-Québec | Person icon next to Manage My Account | 768 |
| 22 | Ameren Missouri | Not mobile optimized | 765 |
| 23 | Énergie NB Power | Log In hyperlink | 753 |
| 23 | PECO | Person icon above Sign In | 753 |
| 25 | Rocky Mountain Power | Not mobile optimized | 752 |
| 26 | National Grid | Not mobile optimized | 750 |
| 27 | BC Hydro* | Not mobile optimized | 748 |
| 28 | Pacific Power | Not mobile optimized | 743 |