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


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


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

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.

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


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

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.



Energy saving

event participation



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.

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.

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.



(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.




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.




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. 

I'm always looking to work on interesting and innovative projects. Let's get in touch!

LinkedIN icon.png
Dribbble icon.png
Behance icon.png
Instagram icon.png

©2018-2021 Designed by Felicia Chan