top of page

National Grid

(Concept App)

Project Overview

Collaboratively redesign National Grid's App, focusing on user needs (saving money) and business goals which include encouraging customers to use less energy.

Screen Shot 2019-01-21 at 2.33.31 AM.png
Screen Shot 2019-02-23 at 1.48.00 PM.png
Screen Shot 2019-02-23 at 1.48.33 PM.png
Screen Shot 2019-02-23 at 1.47.03 PM.png

2 weeks




iOS mobile app

My Role

Conducting and transcribing 3 research interviews, Affinity Mapping, creating and sketching the usage report app screens, created PEG “Personal Energy Goal” idea and came up with corresponding app screens, interactions, and energy saving solutions.


Team Plan, Project Plan, High-level persona, App Map, Competitive Analysis, User flows, Sketches, Iterated designs, Usability Testing Results, Wireframes and mockups, Interactive prototype based on a sketched interface.


Problem Statement

Financially Concerned Utility Customers need a way to access and easily view their power usage because they want to save money.

Solution Statement

We believe that by designing an interactive experience which calculates and projects their current and past usage reports for financially concerned utility consumers, we will help them reduce power usage while saving them money.


We will know this to be true when we see consumption rates lower

and consumers report less spending.

10 interviews

Interview Insights: No one gave thought to or had a strong opinion about their Utility Services. They only thought about their Utility Companies when they were having issues with them. They enjoy the convenience of auto bill-pay and were concerned about the environment, but their main concern was saving money.

“Money is the main motivator for me...But ‘saving the environment’ feels good when you are rewarded.“


“When I buy appliances, I check to see how much I’m saving or how much it’s not going to cost me on electric.“

Affinity Mapping


  • I want to save money

  • I'm overwhelmed

  • I like to feel valued

  • I like to be engaged

  • I have financial concerns

  • I feel I am doing something good​

  • I know what to expect

  • I worry about the future

  • I want one less thing to think about

Screen Shot 2019-01-21 at 2.30.24 AM.png
Research Insights

Most users reported having financial concerns, which leads their behavior to be conservative when spending energy. Saving money was the biggest concern with Environmental Issues being secondary. Environmentally Conscious = saving money. They liked knowing the expected bill amount (especially during high usage seasons like summer and winter). They appreciate the convenience of auto-pay, account access, and the ability to pay bills online.



  • Adult

  • Homeowner

  • Cares about the environment

  • Wants to save money

  • Has a family four

Joe (a financially concerned utility consumer) received his National Grid bill and noticed that it was higher than usual this month. He has a family of four and has an in-unit washer and dryer which is used by all members of the household multiple times a week. Joe and his family need to continue using household appliances, but Joe is curious to know how to reduce power usage in other ways that will not compromise his weekly chores and habits; ergo, Joe uses a device to go online to research ways to lower his utility bills.

Screen Shot 2019-01-21 at 2.48.53 AM.png
Screen Shot 2019-01-21 at 2.49.09 AM.png


Design Process

Each of us took a portion of the app and created the 4 different User Flows


  • Onboarding & Profile Setup

  • Outage Map & Reporting

  • Usage Viewing & Goal Setting

  • Personal Energy Goal & Bill Pay

Screen Shot 2019-01-02 at 3.44.36 PM.png

My sketches for the paper prototype of the usage reports and creation of a "Personal Energy Goal" idea

Paper Prototype
Screen Shot 2019-01-02 at 3.44.17 PM.png
Screen Shot 2019-01-02 at 3.44.07 PM.png
Usability Tests
Screen Shot 2019-01-21 at 2.31.43 AM.png


One tester was concerned about the word "Bank" thinking she was signing up for a new bank account. "Spend It" was unclear. Confusion on the Spending Goal page with slider.

Screen Shot 2019-01-02 at 10.02.35

We tested 4 times on the paper prototype and were able to eliminate most of the bigger issues before bringing the app screens into Sketch and finalizing the design by adding in National Grid's Brand colors.

PEG (Personal Energy Goal) Home Page

Switched “PEG Bank” to “PEG Account” from feedback concerned that is was a bank account.

Created PEG navigation button on the bottom.

“Spend It” was unclear. Changed to “Spending Options”.

Added “Who is PEG” for convenient information about this new program.

Screen Shot 2019-01-21 at 2.32.13 AM.png
Screen Shot 2019-01-02 at 9.48.01 PM.png

Personal Energy Goal Page

Added “Save More” and “Save Less” on the bottom slider due to confusion about which way was more and less money saved.

“Personal Energy Goal” page moved from Usage to live under PEG.

Two paths to set Personal Energy Goal: through Usage and PEG.

Screen Shot 2019-01-21 at 2.32.45 AM.png
Screen Shot 2019-01-03 at 2.08.16 PM.png
Screen Shot 2019-01-03 at 2.07.26 PM.png


Signing In
Screen Shot 2019-01-22 at 1.22.22 PM.png
Screen Shot 2019-01-22 at 1.21.24 PM.png
Screen Shot 2019-01-22 at 1.22.49 PM.png
Outage Flow
Screen Shot 2019-01-22 at 1.20.53 PM.png
Screen Shot 2019-01-21 at 11.52.36
Usage Main.png
Viewing Usage
& Setting Goal
Screen Shot 2019-01-21 at 2.32.53 AM.png
Screen Shot 2019-01-22 at 1.20.23 PM.png
PEG Account
Screen Shot 2019-01-22 at 1.21.39 PM.png
Screen Shot 2019-01-21 at 2.32.21 AM.png
Screen Shot 2019-01-22 at 1.20.00 PM.png
PEG Money
Screen Shot 2019-01-22 at 1.19.15 PM.png
Screen Shot 2019-01-22 at 1.54.09 PM.png
Screen Shot 2019-01-22 at 1.18.04 PM.png
Eco Impact
Screen Shot 2019-01-22 at 1.18.29 PM.png
Screen Shot 2019-01-22 at 1.18.56 PM.png
High-Fidelity Prototype in Action
Final Prototype
Next Steps​

There was still some confusion with the "Set your Personal Energy Goal" Page and the sliding scale idea. That would have to be worked on to create an easier to understand scale. 


"Contact Us" was placed under the Profile section, but it should probably be more accessible. Putting that somewhere on the Home page would make it more easy for customers to contact National Grid.​


The PEG Account idea seemed to go over well. There are some logistical issues that would probably need to be ironed out, like what would happen if a customer was using this for multiple years and got their energy bill down as low as they feasibly can? What would be the inspiration for saving energy if they were no longer able to save money into the PEG Account?


Working within a group was an interesting experience and I was happy to have a great team with each of us having strengths in different areas. I learned a lot in this experience about creating a functional team plan as well as dealing with communication issues when they arose.

All in all, a fun and interesting project!

bottom of page