National Grid
Building a better utility service with a better intuitive navigation system & energy-saving feature.
OVERVIEW
Who is National Grid?
-
National Grid is a British multinational electricity and gas utility from the United Kingdom. Its principal activities are in the United Kingdom and Northeastern United States covering New York, Rhode Island, and Massachusetts.
-
Operates over 9,000 miles of
electricity transmission
Serves over 3.3 million customers with electrical power and 3.4 million customers with natural gas and is headquartered in Waltham.
THE SOLUTION
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.
SO WHAT'S THE PROBLEM?
Financially concerned utility customers need a way to access and easily view their power usage because they want to
save money. National Grid needs to find a way to help customers to reduce their usage.
Our Approach
Research
Surveys
Interviews
Affinity Mapping
Competitive Analysis
01
Design
Information Architecture
App Map
User Flows
Branding
Wireframes
Interactive Prototype
02
Evaluate
Usability Testing
03
Course
General Assembly -
User Experience Design Immersive
My Role
Part of research and development.
Took charge of the style guide & app aesthetics.
# of Team Members
Three
Timeline
2 weeks sprint
Tools Used
Sketch, InVision, Illustrator, Photoshop, Axure
My Contribution
During the research phase, I along with my team members conducted a literature review on personal finance education and semi-structured interviews with potential users.
During the ideation phase, I assisted with the ideas that we modified and developed. I then advocated for collecting user feedback, which helped us narrow our ideas down. I contributed to the information architecture and the design process in Sketch. Followed by the discussion of deriving design implications from the data with my teammates.
RESEARCH
Survey
Our research goals were to develop a deeper understanding of gas utility platforms and how customers use them. From these findings, determine a saving feature to integrate into the current National Grid app as well as improve the navigation system.
We started by sending out a survey to find our target user for interviews.
Interviews
After conducting our 9 interviews we went through the affinity mapping process and developed some important insights.
For most users:
-
They all 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
-
The expectation of bill amounts
(especially during high usage seasons like summer and winter) -
Appreciate the convenience of auto-pay, account access, and pay bills online.
Competitive
Analysis
Proto Persona (Characterization)
Joe Smith (Financially Concerned Utility Consumer)
-
Adult
-
Homeowner
-
Wants convenience
-
Wants to save money/environment.
Joe received his National Grid bill and noticed that it was higher than usual this month. 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.
Thoughts & Reflections: RESEARCH
When starting the research process, we were unsure of how to go about it but after interviewing a handful of people about their electricity and gas bill, we started to see a pattern.
It was difficult to create a way to get people to do what they knew they should do like save, so we spent some time figuring that out.
DESIGN
Map App
Creating an app map allowed us to visualize the potential entry points for the features.
User Flows
4 different user flows were created in order to properly design the app:
-
Creating an Account
-
Using Personal Energy Goal Saving Feature
-
Usage Viewing & Goal Setting
-
View & Report an Outage
Sketch
After, we created sketches based on our ideas of the user flows
.png)
With our wireframes we created a paper prototype and then developed a testing plan with the following goals:
-
Learn how easy it is for users to navigate the new features
-
Observe the user's understanding of the content in order to complete tasks
-
Understand the pain points of using the prototype
Next, we recruited 5 users to test the prototype and complete 4 tasks
Paper Prototype
& Testing
Style Guide
I then was responsible of putting together a style guide. I went through National Grid's marketing and social designs in order to create a style guide.
User
Interface
By following National Grid's branding and closely observing the iOS app and website, we created a set of screens that incorporate the same look and feel like the current app.
With our wireframes we created a prototype in Sketch and then developed a testing plan with the following goal:
-
Discover any navigation issues
Testing & Iterations
Based on the findings from our testing, we iterated on our problematic UI screens. To view the up-to-date prototype in Invision click button below.
Prototype
Thoughts & Reflections: DESIGN
A pig mascot? At first, wasn't sure if it was the right direction but we took and our prototype testing proved that it was creative enough to keep them intrigued.
Also the idea that they would not only save on their bill but have the option to donate to a charity of their choice and / or help the environment confirmed that we made the right decisions.
Evaluate
Now that the iterations have been made, I am ready for another round of user testing to find out if usability has improved since the initial test.
Once the saving feature has been finalized and integrated into the app, we can then compare post-saving feature KPIs to the original app before the new release to find out if the design has an impact on engagement and energy/$ savings.