top of page
energy community mock.png

Project Overview


This project is initiated by Olivine, a California-based company focused on helping the state meet its ambitious renewable energy and greenhouse gas reduction goals. They run innovative programs for cities, counties and utilities that help their residents and customers increase access to cost and energy saving initiatives.


The company I work for and Olivine then work together to build an energy demand response app which users/households can access their energy data and participate in energy reduction events. 


Product Designer (me)

UX Researcher

Project Manager



User & design research, personas, UX flows, wireframes, UI design


July 2019 (6 mo.)


Sketch, InVision, Zeplin

Energy app Process overview.png


Understanding the Users

Olivine started the initial user research by sending out surveys and interviewing with residents of specific regions. I was able to learn about the users' pain points and stakeholders' goals during our first few meetings, and came up with the initial problems and solution statements:

Problems that need to resolve

  • Households can only learn their energy usage once a month through bill

  • Energy consumption is especially high and inefficient during peak hours

High-level Solutions

  • Provide both up-to-date and historical energy data to help users learn about their energy usage pattern at anytime

  • Design an intuitive Demand Response (DR) feature to help both utility companies and households effectively reduce energy usage

Understanding the Products

After having a general context of the project. I started my product research by analyzing 4 direct and indirect competitors of energy data display (Sense, Ohmconnect, Bidgely, Enertalk).


Competitive Analysis

Competitive analysis.png


User Cases

Identifying scenarios with research insights, I tried to brainstorm different user types and how residents would utilize the app to learn their energy usage, so we could determine what features and functions to be included in the solution (app).


Energy data chart

nest timer.jpg

Design Requirements

Thinking through what a user would need and be more engaging during the use cases identified, we determined design requirements for the application. We did so to ensure the users get what they need, and engage in the energy events the app is promoting. This will serve as our guiding principles as we move onto visualizing the solution.

We need a timer design to display when an energy reduction event is in progress. I got inspirations from Google Nest and other timer design from Dribbble.

Timer design

Energy data chart is essential for an energy monitoring app, I noticed that both Sense have a pretty good presentation on this, whereas Enertalk's energy clock seems too complicated to understand.

sense app.jpg

After I had some ideas of what to put into the design, I searched for similar designs on the market or websites that provide inspirations.

Product Features & Design Elements

Sense and Ohmconnect display an overview of their recent usage at dashboard for users to have quick knowledge about their energy usage patterns. Ohmconnect even has a section for achievement summary which is good for user to learn if they were doing well.

Achievement summary

User cases.png
Screen Shot 2020-10-30 at 3.48.20 PM.png


Historical Data

The immediate benefit after downloading the app and connecting with the utility is to be able to view energy consumption records. Users could compare between days, weeks or months, and learn when they consume more or less.

Multiple Sites

Users may own different sites like their house, office, store, or their parents’ house. Giving them the option to add multiple sites to the app would help them better monitor or control the energy usage and cost.

Environmental Impact

Showing the relations of energy reduction and emissions reduction, house and community would help users learn how their energy actions can directly impact air quality.

Simple Enrollment

In order to increase the number of enrollment, we have to make the registration flow simple and intuitive, so users won't get stuck in the middle and drop the app.

Event Participation Interactions

Users take actions like receiving an invite, making decisions, changing decisions, participating in events. It’s vital to make the interactions smooth so users will engage more in this feature as this is the app’s goal.

Performance & Achievement

Providing a report after events end can serve as a feedback to how users were doing. Giving rewards and incentives can encourage the users to participate in the events.


Enrollment User Flows

It’s very important to make sure the app’s navigation is clear and straightforward. Before designing an app that users won’t get lost in, I needed to digest the expectations, find repeated patterns, and clear up in a neat way.

Stakeholder's expectation

fresno before.png

Clear user flow



Simple wireframes without color allowed us to change things very quickly and developed in many different ways to see what works the best. I will show some lo-fi pages in the next couple slides.



dashboard wireframes.png
Dashboard web.png

Energy saving

event participation

dr wireframes.png
DR Program.png



Dashboard shows the an overview of different areas: current week's usage, upcoming event reminder, your achievement and your reduction comparison with the whole community.

dashboard app 2.png
dashboard app 1 .png
Dashboard desktop.png

Historical Usage

History shows the historical energy usage of your house in different time periods. For example, user can view hourly usage in a day, daily usage in a week or a month, etc.

usage app 2.png
usage app 1.png
history desktop.png

Energy Saving Program

The Energy Saving Program is an important feature that displays the event status and your participation history. The app will send an event request to the users with a time period, and users can decide whether to participate to reduce energy usage during that time period.

DR app 2.png
DR app 4.png
DR app 1.png
program desktop.png



(1) → (2)

Testing showed that people were confused about the cluster of information, so I made a container for timer with count down numbers to distinguish energy saving ideas section.

(2) → (3)

Adding a button for “program detail” on the top, so users are able to learn what the program is about. Changing the 3 dots icon to a chart icon with “History” type next to it, so it has better discoverability.


dr v1.png


old DR 2.png


DR v3.png

Event performance

(1) → (2)

Event performance screens include a simple version and a more detailed data display for users. Pervious design used a “view detail” button that takes user to detail view. Testing proved the confusion of navigation, so I resolved the issue by using switch tab.


quick view before.png
details before.png


Performance - quick view.png
Performance - details.png


Constant Communications with the Stakeholders

Working with the ours partner, it’s important to constantly check with my ideas, validate the functionality because they know the users best. Be sure to clarify the project scope for next release, otherwise they will keep adding features and screens. I also learned how to find balance between the stakeholder’s want & user’s need. 

Taking Technique Constraints into Consideration

What I learned most from collaborating with engineers is to know the effective way to build a feature or design an interaction. Have them involved in the design process make it easier for me to decide what kind of design to apply, what constraints block the implementation. 

bottom of page