Project Overview
CONTEXT
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.
TEAM
Product Designer (me)
UX Researcher
Project Manager
Engineer
PRACTICES
User & design research, personas, UX flows, wireframes, UI design
DURATION
July 2019 (6 mo.)
TOOLS
Sketch, InVision, Zeplin
DISCOVERY
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
INSIGHTS
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
DESIGN REQUIREMENTS
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.
IDEATIONS
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
Wireframes
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.
WIREFRAMES
Dashboard
Energy saving
event participation
UI DESIGN
Dashboard
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.
ITERATIONS
Timer
(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.
(1)
(2)
(3)
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.
(1)
(2)
REFLECTIONS
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.