Energy Consumption app UX Case Study

Pedro Lacueva
Design + Sketch
Published in
10 min readAug 30, 2019

--

Introduction

Energy is vital in all economies. In fact, energy is a basic input in virtually all production processes and an important item in household final consumption.

Consumption of electricity rationally has two main benefits. For the consumer, it generates a good reduction in the cost of the electric bill, allowing savings every month. Another advantage is from an environmental point of view, because the reduction of consumption enables the increase of energy in the country, thus avoiding the use of energy from power stations that increase air pollution.

I conclude that consuming electricity is something that we cannot extinguish from our daily routine, but that we can control this consumption in a way that saves a lot, just a few changes of habit and control.

Problem Statement

Unfortunately the bill we receive for the electricity costs we consume in our home only tells us the total consumption we have spent and the amount we will have to pay.

However, if we want to reduce energy consumption to save money it gets more complicated because we don’t have a history per appliance of the amount of consumption we are spending.

Goal

The goal of this project is to design an intelligent energy monitoring system plugged into costumers electrical panel with Artificial Intelligence Technology, which enables users to run an app on their smartphones and track energy usage of any appliance. Also, users will be able to set a budget for their can get notified when they have reached out the energy consumption amount they have determined to spend per day, per hour, per week, per month. Users will be able to view charts in real-time such as a timeline of daily home usage activity per appliance.

Next, I will show you how I made this entire process. Thank you.

Design process:

Research, Define, Ideate, Prototype, Test, Design and Build

Research

The first step was to analyze the competitors and get familiar with the existing Home Energy products, their pros and cons, and user’s reviews. Also, I analyze UI, UX, User flow, key features to identify the common problems.

Competitors:

Sense, Energy Elephant, Simply Energy, Loxone

“ What users said about these existing Home Energy products competitors? ”

“ The hub installation is pretty difficult and we can’t do it by ourselves.”

“ We need you to provide a full running of the amount used of electricity your are “ spending.

“ Can you enable track usage and provide a handy summary showing your monthly energy usage? “

Solution

The best solution that comes to mind may be buying smart home devices that let us know how much power we are currently spending by, hourly, weekly, monthly and even year. This will give us the information we need to control the consumption of electricity.

In this Map, we see the Business goals, Ux goals, and customer goals based on previous research.

Empathize

Costumers interviews. Understanding user needs.

After analyzed the competition and realized what users need to save on their energy consumption, I used the tried-and-true method for understanding and knowing more about the users (and therefore building accurate personas), the user interview was one of the most cost-efficient methods of qualitative research, now I know what my users will need.

What kind of users I used for these interviews:

  • A user who lives alone, male and female
  • User living with Parents
  • A married user without children
  • A married user with children
  • A user of over 50 male and female

Customer Interviews

To conduct these interviews I started by creating a User interview script document:

  • How old are you?
  • Do you live alone?
  • Are you married, single?
  • Still studying? Yes or no?
  • Can you describe how you spend a typical day or week?
  • Regarding Energy Consumption. What is your worst pain point (s)?
  • Can you tell me in your normal day which appliance you use most not counting the refrigerator that is always on?
  • How do you feel when you get a high electricity bill that you’re not waiting for?
  • How do you react when someone in your home forgets the lights ON for a long time?
  • How does the electricity bill affect your mood?
  • If you could control your electricity costs, what would you consider?
  • Did you already use any energy consumption tracker our app for you to view the energy consumption?
  • If you used an energy consumption tracker for you to view the energy consumption that you are spending per appliance how can this be useful for you?

What I found about users doing this interview?

I have found that many users have a huge difficulty controlling their energy consumption at home, large families have more difficult as well regarding the number of children / young people living at home who have uncontrolled consumption for example: when they forget about the lights on all the time, showers for a long time, playing console games and watching TV for a long time, this is a result of the imbalance based on the consumption of electricity, namely the people who spend more time at home as house-made, consecutive washing of clothes/dishes also they generating a large consumption of electricity that is not controlled.

Hypothesis:

Based on the data collected in the costumer’s interview, I have created overall scenarios of the various types of users, including how users differ from each other.

Scenarios description:

Now I have a chance to create scenarios that describe the problem by creating personas. I have described possible situations that may trigger the use of the product. I also used scenarios for I can imagine better how the user will interact with the product, the story about how the person will use the product is the ultimate goal of the personas.

Personas Description:

In this step I have prepared a brief description of the typical user, I have paid attention to user needs, motivations, aspirations, and values.

Creating personas:

At this stage, I created the document for each persona. What I will consider in this persona template:

  • Name
  • Age
  • Psyche
  • Male/Female
  • Background
  • Emotions and attitudes
  • Personal traits
  • Needs
  • Examples and Situations
  • Scenarios

Example of the persona template I used:

The persona document I have used for this project

Empathy Maps

After I’ve created the personas I started to build an Empathy Maps for each persona divided into 4 parts:

What the user: SAYS, THINKS, DOES, FEELS

The elaboration of the Empathy Map with the results of the costumer’s interviews made me put myself in the client’s shoes, understanding their behaviors and needs.

Empathy Map Example:

Visual storytelling the main tool that helped me to put on the customer’s shoes.

In this important step, I was able to express myself as a narrative visually. I was able to create history based on user’s problems and needs that I collected on empathy maps.

Visual storytelling example:

User journey

I’ve found a lot of complexity while I was making this user journey. but it was very useful for me to get an idea of ​​the screens that I will have to draw and the flow that I will have to follow.

First User Journey Example:

Ideation

After getting a clear picture through the user first journey, I started drawing by my hand to be prepared the low-fi wireframes.

Hand design ideation example:

A very low-fi design ideation

User Flow Wireframes

I prepared wireframes based on user flow by focusing on usability and ensuring that the app is built according to the goals and user needs. Also, I had the chance to ask for feedback as soon as possible during the wireframe and flow process.

Installing a physical hub, connecting to the Hub and calibrating an appliance:

Fist onboarding process interaction flow — Installing and connecting to the Hub

Hub process Flow :

Entire Wireframe Flow

Connecting to a plug and train your appliance by Artificial intelligence based on faults and actions (Training mode):

Connecting to a plug (WiFi connection)

View Appliance connected to your plugs:

Appliance list and appliance detail

Appliance actions:

Add actions to an appliance

Training faults:

Appliance training faults

Change Appliance:

Change Appliance waching machine to fridge

View entire history related to each plug/Appliance:

Schedule a day/hour to turn on/off your appliance:

Appliance/Plug Schedule

User profile flow:

Validation:

Low-fi Prototyping User testing

After I have completed the flow and finished the wireframes it was time to put the wireframes into a prototype and invite some of the customers we interviewed on the first stage to test the interface. First, we made a user testing script document. Since we had already done the interviews and we already knew their pains and needs we don’t need to interview these customers again. Then we moved to an Authorization document where we presented to each user to authorize us to record their behaviors and what they will speak loud while thein navigating through the prototype. We will record video and audio. During each user testing, each user was created several tasks to be completed. We used a very nice and comfortable space to do this user testing. We will repeat this process once again in the future with hi-fi prototypes as well.

Sign up process

In this task, users have to run the signup process

Regarding this task, we invite 8 users to run the signup process.

3 users have successfully completed the signup process to the end without any problems. But 5 users could not understand that the number of characters they should have to place in the password input text did not work for them regarding poor visibility of the information on the bottom of the screen.

To solve this problem I chose to focus even more and understand exactly where it was failing. A new test was made with 8 other different users and in the second version, all users completed the task successfully.

Install a physical hub to the energy meter board

In this task, users have to install the hub

In this task, we invited 9 users to install the hub physically into the energy board. The 9 users have completed this task successfully.

Navigating through Live Now and Summary Screens

In this task, users have to understand how much they are spending at the moment.

  • Live Now screen we have a history regarding all appliances we used.
  • Summary screens, the first one shows us Appliance categories by kitchen, laundry, Room. Users have to click on a category to visualize witch appliances we have inside each category then users have to select one appliance to visualize the energy consumption regarding that appliance.

5 of the 5 users invited to test these screens understood the navigation logic between these two screens (Live Now and Summary). They realized that by selecting the option in the bottom tabs they could access the information they needed. It was very interesting to hear users talking loudly while navigating between these screens.

Hi-fi Design

Colors

Typeface

Micro-interactions

Full Name and Preferred Name
Personal email address
Email already exists
Set a security password
Setup hub instruction
Dashboard and Tips for help users to optimize energy consumption
Energy Cost consumption
Energy consumption

Thanks for reading!

This is my first case study on Medium regarding my process design.I’m so proud to be worked for this company with a fantastic team.

If you have any advice or feedback please let me know. I am always looking to learn with the bests.

Honestly, I hope you enjoyed it.

If you want to see more of my design shots visit:

DRIBBBLE, LINKEDIN, INSTAGRAM

--

--

Pedro Lacueva
Design + Sketch

I’m a UX/UI Designer with high proficiencies in visual UI design, UX design, UX research.