Page 1

HABEO Real-time utility consumption management application

Collaboration with Andrew Trenton and Laura Wright

PROBLEM There is a severe lack of transparency of residential utility consumption information for the users. It is fairly challenging for them to understand and managing their utility consumption.

PERSONAL CONTRIBUTION I was involved throughout the project. More specifically, I contributed the majority of my time being in charge of the animation, gestural control, majority of user interface as well as interviews.


This project was started from the question, how might we help users to understand more about their utility consumption? The initial phases of the research process involved creating persona, user scenarios and journey map of those users in order to find out the specific needs of the user.


We started off narrowing down the target user groups of this application and created persona to imagine the different ways and reasons that they would possibly use the application. We decided to focus on the ones who would benefit from this application the most and created experience map to understand their behavior as well as their wants and needs.

New Homeowner

New Homeowner

Utility Provider


DIY Enthusiast


Claudia Cregg Claudia is a new homeowner who just purchased a house. She wants to lower her energy usage by being more cognizant and awarded of her monthly spending and consumption.





To be more aware of the energy she is consuming

Learns about the application, and becomes intrigued by its features and to download

To keep track of her utility

Set Up Completes the tasks on the set up check list and installs sensors in home App syncs up with sensors

After Usage



Use the App to keep track of the utility consumption of her property

Receives periodic reminders about approaching set energy goals.

Feels more aware and informed about her utility usage habit.

Sets monthly goals to help to manage her utility.

Begins to accumulate visual data about her energy consumption and usage habits

Saves more money and energy.

Bernard Lowe Bernard is a landlord who wants to learn more about the energy consumption habits of his tenants to understand the real cost of his tenant’s utilities. Also, he wants to know if any abnormality arises in any of his properties.

Before Want To manage and keep track of the utilities of multiple different properties from one application.




Set Up


Heard about the application from a friend in the realestate industry.

Installs sensors in all of his properties that he wants to keep track of.

Uses data from the application to monitor the amount of money spent on utilities in the units and adjusts the rental prices accordingly

Application syncs up with sensors

Results Receives reminders about maintenance Receives notifications about utility abnormalities

Extend Becomes more cost and energy efficient with his rental properties Gains the ability to detect issues before they occur


One of the major goals for Habeo was to create graphics and information that is comprehensible and easy to navigate from raw usage data. The main functions of Habeo are the ability to visualize real-time data, compare, set goals, and abnormal activity alert.



Real-time usage data and the history of usage of respective utility would be the most prominent feature of the application, and it would be displayed in both physical unit and monetary value.

User can compare their current usage to a specific time frame in the past, and display it in variety of ways as well as different units for better understanding.



When an abnormal usage occurs, sharp increase of consumption of power, for instance, System will send notifications to alert the users with information such as the possible causes, possible solutions and tips to prevent the situation in the future.

User can create consumption goals to limit their utility usage.


With the findings, we had a better understanding who our users are and what their needs were. We then created a series of paper prototype with animation and gestural control in mind. We conducted usability testing to find out the pain points in their journey.


We started brainstorming the basic structure of our application. We first created a rough wire-frame of the application and establish core concept of our visualization of usage data, then created a paper prototype.


We conducted usability testing with multiple different users. We instructed the users to think out loud and describe their thought processes so we could gain a more empathetic understanding of their actions and reasonings.

GESTURE We modified the gesture control to correspond to the animation in the application, We also added some subtle hints to assist the navigation of the application.


TIME The function of comparing different time spans in the past is added, and the interface is integrated with the existing comparing interface.


We removed the logo on the top Some users suggested that in the right and enlarged the navigation future, we can add functions of tabs to avoid confusion. paying bills into the application, and a gamification system.

SOLUTION After conducting research, ideation and usability testing, we came to a solution that answers out initial question of “how can we help users to understand more about their energy consumption?�


Habeo is a successful solution to the problem of homeowners not knowing about their current utility consuming and spending habits. Habeo creates a transparent and direct dialogue between the user and their energy consumption.


The data flow of Habeo starts at the sensors that are installed in the house on the meters of the respective utility. The sensors record the information from the utility meters and relays that information in real-time to the property’s wireless router via WI-Fi. The data is then sent to a cloud server that is accessible from the application.







Users receive up to date information about their usage and will not be surprised about their usage when the bill arrives.

Habeo gives the user the ability to view their energy consumption and spending in real time right at their fingertips.

Habeo immediately alerts the user of any abnormalities in their usage, thus creating a more transparent dialogue between the user and their home.






VISUAL Data visualization is the most important part of this application, we carefully considered the colors, animation, and shapes that we use in this application to giver users a clear representation of the usage and a smooth, easy interaction experience.




Simple, clean, helpful, useful, responsible, conscious, direct, practical, informative, and straightforward


ICON Myriad Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() 1234567890!@#$%^&*()

Myriad Bold

Myriad Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()



The logo is integrated as the visualization of the usage data.

ADAPTIVITY/LAYOUT The layout of Habeo is designed to be viewed in a constant horizontal orientation.






1738 Trap St. Oct. 1st to Nov. 1st

The segmented control bar near the top of our application is where the majority of the navigation takes place.

ANIMATION Animations that correspond to the gestural control create subtle but dynamic transitions between main features.

INTERACTIVITY The interactive elements of the application are signified by text, icons, or photos. The application also utilizes gestures such tap, drag, swipe, and pinch.


Habeo process  
Habeo process