Through incentives, gamification, smart alerts, and data tracking; Energo highlights the positive effects of activity and hydration leading users towards a healthier lifestyle.

In this hyper production focused world we call the 21st Century, humans have trouble being as efficient as they could be. 

We can call it sloth, a bad day, writer’s block, temporary ADD… but all these moods can be remedied with a single glass of water. Science proves that although energy is only provided by caloric intake, the resistance to make use of it is based on several elements that include water intake, exercise, rest, meditation, and so on. Without taking these elements into account, human productivity levels decrease heavily. 

[unex_ce_button id="content_b94wc43pe,column_content_8a7uody2l" button_text_color="#893462" button_font="bold" button_font_size="14px" button_width="auto" button_alignment="left" button_text_spacing="2px" button_bg_color="" button_padding="10px 20px 10px 20px" button_border_width="2px" button_border_color="#893462" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#893462" button_border_hover_color="#893462" button_link="https://adobe.ly/2nZi3Yt" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VIEW PROCESS DOCUMENT[/ce_button]


School Project


5 Weeks, Fall 2016


Concept, Data Visualization, Research, UX/UI, Visual Design, Animation


Introducing Energo

The word energy has been used in relation to several things including mood, productivity, and health; however its real meaning is strictly related to food consumption. For this reason, I came up with the word Energo, which stands for the 'energy' to go.

The interface is not meant to overwhelm the users with too many goals, therefore Energo focuses on only two elements: water intake and activityThese two facets are the most easily and accurately tracked by today's technology and the most appealing to users.

Although either a smart phone or a smart watch will work to track activity, Energo will only work with the use of a smart water bottle


The Code

The Energo data visualization was coded with Processing as a spiral-star.

The density of the spiral-star represents the user's current level of activity. The more petals in the spiral-star, the more active the user is. The size of the spiral-star represents the user's current level of hydration. The bigger the spiral star, the more hydrated the user is.

-_Wall Clock-_Wall Clock

Energo is not meant to be a quick interface, one that can provide the users which a lot without them having to turn on their phones. This is why the interface's main platform is a touch screen wall clock where users can see their energo whenever they check the time.

The spiral-star is surrounded by a graph that shows the user how their energo levels have increased and decreased throughout the day. Behind the spiral-star is a more diluted graph that shows the energo from the day before. This comparative tool allows the user to understand their day-to-day improvements.

When users skim through the day's timeline, they can view different spiral-stars of the day. The changing spiral-stars allow the user a better understanding of the role hydration and activity took throughout their day. The unique visualization of energo is also meant to delight and excite the user about the app.


Humans are known for having trouble developing new habits which is why users have so much trouble sticking to health apps. Energo battles this with incentives. Users gain points for checking in on the app, improving their energo, responding to notifications with actions, and more!

When active, Energo provides the user with the option of playing an augmented reality game. While the game loads, fun facts that validate activity are provided. For example, how going on a walk is not only healthy but also provides a break that will leave the user refreshed when they sit back to work. The game gets the user from point to point along a path to discover points and treasures that unlock more prizes. It will prompt the user to exercise asking it jump or squat walk when they arive at hot spots.

The shop tab allows users to buy new faces for their energo clock. The app does not respond to real money, only energo points.


One of the incentives of the app is the energo game, an augmented reality game that is prompted when the user is being active. It serves as a fun way to prompt the  user to be more active by having them search and interact with hot spots. While in a hot spot, the user can gain points by responding to the commands jump and squat

1. Timer How much time left to finish the goal for the walk

2. Help Opens game instructions in detail

3. Progress Bar 

4. Directions Guides user towards hot spots

5. Command Tells the user to jump or squat

6. Hot Spots Delineates where the user should jump or squat

7. Points How many points gained from action

8. Highlighted Hot Spot Hot spot that already has been interacted with

*If the user doesn't jump high enough, the hot spot turns red and no points are gained

App Validation

Users play the game for two reasons. To improve their energo or to gain points. Since the interaction's main purpose is to improve the user's energo, an analysis of the activity and its effects on their activity level is shown first when the game ends. Then the user can peruse their 'monetary' gains. This part of the interaction is what validates the game, the activity, and ultimately the Energo app.

1. Energo Analysis Graph with Energo improvements during game

2. Help Takes user back to Energo home page to review

3. Overview of Gains Details for game points

4. Shop Takes user to the shop to use up gained points

5. Treasure Finds Shows if the user finds a treasure box that unlocks new faces to buy

The home screen and default page in Top Navigation I presents the user with the Energo Clock. The user can see everything that their wall clock has right there on their phone or watch.  When the user skims through the timeline on their phone or watch, the wall clock timeline also moves.

Top Navigation I allows users to breakdown the elements of energo. When in the hydration tab, the user can see exactly how much water their smart water bottle recorded that they drank for that day. This is useful for users who are accustomed to a numerical goal. All devices synced to the energo app become hydration clocks when the user is on this tab.

The user can also see their levels of activity. Since energo's goal is not to get people to join a gym, rather to keep them active, the numerical value used is steps, not jogs or level of effort. I imagine a user about to make the decision of taking the stairs or the elevator, checking how many steps they have taken, and deciding based on that. All devices synced to the energo app become activity clocks when the user is on this tab.


Did you know that humans can also over-hydrate. It's called Hyponatremia and it's deadly. If energo finds that its user is drinking too much water, an alert comes up inviting the user to learn more about the problem or to call their doctor, which when clicked takes the user to their mobile phone book app.

Energo allows users to add specific times throughout the day. Danilo, one of my user personas, is a chef who can't catch a breathe, much less a cup of water. However, when he gets home, his wife is pretty good about keeping him hydrated. At the end of the day, Danilo would find his energo improved from yesterday. However, he doesn't feel as great at work as he does at home. By creating a time save for his work hours, Danilo can focus on improving his energo from 8-5pm and compare it to yesterdays shift.

Energo can also save location slots for flexible schedules and routines. Chineya, my second user persona, is a comfortable engineering student whose main activities are studying, commuting, and watching anime. While traveling to school, to and from classes, Chineya is forced to be active. However, when at home, Chineya has trouble controlling her sloth. By creating a location stamp for her dorm room, Chineya can learn that her energo is in danger when at home and ultimately inspire her to improve.


Energo knows when its users are up, whether that is because they set an alarm through the app or because they've been starting their activity steps at exactly 9am for days. The waking moment is when users are the most understanding of notifications because they are already expecting a list of messages and alerts. Energo takes advantage of this opportunity and its knowledge of its users routine to excite its users about their energo levels with fun facts about hydration and activity. For example, how water in the morning purifies the lymph system.

Energo knows the weather and will use this information to provide its users with chances to improve their energo. For example, if its cold out, energo will ask the user to drink water which will stabilize their metabolism and keep them warmer throughout the day. When its nice out, Energo invites its users to go out and enjoy the day with a nice stroll. 

Energo will also use the incentive system to get users to improve their energo. When the user is really close to getting a new prize, energo will give them a quick opportunity to get those points by letting them know how many games they have to win, how many steps the have to take, or how many cups of water they have to drink before they get to that very nearing finish line. By giving a user a calculated analysis of what they have to do to win, users can decide whether or not to accept the challenge.


Energo is smart but it is not all knowing! It is a personalized app, its sole purpose is for it to get to know its user so that it can improve their hydration and activity habits. In order to do this, energo promises points, a quick experience, and cute illustrations to get users to share more about themselves. For example, Chineya, my user persona, an engineering student, spends a lot of time sitting in the library. After some use, Energo notices a pattern and becomes curious about why Chineya is at this location all the time. An invitation to a quick survey with a prize of 5pts is sent to Chineya asking what she is doing in that location; working or chilling. The next time Chineya is dehydrated at the library and energo is forced to notify her, the interface can notify her in a more educational way such as "You're dehydrated which is probably killing your concentration at the library. I bet if you refilled your water bottle and started sipping, you'd get back on that studying mood." 



A Simple Yes or no Question You probably hate surveys; but if they're short, you are promised 'monetary' gains, and there are cute illustrations involved, the experience can even be enjoyable!

*Notice the emoji. It's as if energo was just another person, feeling bad for you for not having a dog.


Rotating Animation To move to another card, the little world that the dog is sitting on rotates to present another dog and another interaction. The dogs animate, panting ever so slightly.

Points points points! And there you have it, the incentive you desired cuddled by yet another pup. Thanks, energo says.


Energo knows the difference between a walk and commuting since when the user is on a walk, they always need to come back to the place where they took that first step. This way, energo knows if a user haven't walked their dog. If the user has a low step count , Energo will mention how their dog hasn't been walked to convince the user to go out.

thank you and don't forget to stay hydrated.