Blue Sky App
Revamping an IOT energy management app to drive behavioral change for energy & carbon reduction
Do you know how much energy you use in a day?
Electricity bill payers have little knowledge of how their energy is being used. Currently, they are limited to a monthly bills with a mere lump sum of the location’s energy usage.
The simplistic nature of energy bills today makes payers confused and at a loss: How much does each appliance use? How much energy am I using in a day or in a week? Am I using too much? What actions can I take to save energy and save costs?
With knowledge comes power. Energy consumption is one of the leading contributors to climate change. To save energy and reduce carbon emissions, increasing energy awareness is the first step.
Problem Statement
How might we facilitate users to understand their energy consumption and save energy?
Company Overview
Blue Sky Energy Technology is an IOT company that focuses on smart energy management in student residences, offices and classrooms. Clients include the University of Hong Kong, KPMG, St James’ Settlement and various international schools and organizations in HK, Shanghai and Beijing.
Project Summary
As the company’s sole designer, my task was to revamp my company’s app for users to better understand their energy data & take proactive actions to save energy. The first app was an MVP: a responsive app of the web dashboard with limited functionality and a basic UI.
Over 4 months, I develop a full-fledged mockup of the new app by using design thinking methodology: empathy, user conducting user research to identify existing issues and areas for improvement.
This required cross-team collaboration: data scientist (assist with data visualizations & testing), software developer & tech manager (input on technical feasibility), CEO/founder (input on client needs & requirements).
Before
MVP - a web app
After
Revamped app
Design Thinking Approach
User Research
Google Analytics
User Interviews
Usability Testing
Empathy Mapping
User Personas
Define
How might we facilitate users to understand their energy consumption and save energy?
Ideation
Brainstorming hand-drawn sketches of data visualizations & user flows
Testing
Usability testing
A/B testing
Prototypes
Wireframes on Balsamiq
Lo-fi mockups on Figma
User Research
Methods used:
- Google Analytics
- 7 user interviews with clients from offices, student residences and international schools
- 2 usability tests of the old app
1. Quantitative and qualitative research: For each user interview or test, I was paired with another colleague in order to make sure everyone would be aware of users’ needs. During the interviews, I focused on asking questions on how they currently checked energy consumption, asking why or why they didn’t use the platform, and issues with the current dashboard & app’s usability. After 7 one-hour long user interviews and 2 usability tests, I created user personas & empathy maps to distill the findings.
2. Google Analytics revealed that students preferred using mobile app, whereas office users & teachers preferred using the dashboard. Moreover, users logged in once and did not login again, indicating that the dashboard was hard to use or did not meet their needs. I sought to dig deeper by conducting user interviews.
Key Insights from User Research
Users don’t want to sift through the data - they want to know energy saving actions fast.
Users expected the system to analyze the data and provide recommendations for energy saving actions, instead of logging in and analyzing what was going on.
Users wanted to receive tips through email and push notifications.
In the previous MVP, only a weekly summary was sent via email, with no feedback in between. There were also no push notifications, making it difficult to engage with users.
Energy is a very abstract concept that requires translation.
To most people, energy is an extremely abstract concept. Unless one came from a technical background, it was difficult to grasp what 1 kilo-watt hour of energy meant. For us, the implication was to provide equivalencies in user-friendly terms, e.g. monetary value, or energy required to produce a hamburger.
Certain cultural values are conducive to energy saving.
The ‘soft’ elements crucial for reducing energy: were:
- A culture focused on sustainability
- An Energy Ambassador in the location to remind others to turn off the light
- Clear ownership of the space: knowing that the space belonged to you, and that you’d have to pay for any bills, incentivized more savings
Usability issues hindered onboarding & continued usage.
Through our two usability tests, we discovered that users experienced difficulties with understanding the dashboard & app’s language, toggling locations and the interactive energy consumption graph. Less technical users also experienced difficulties interpreting the graph. Finally, some people reported that password recovery was impossible, and that sometimes the app would just turn off by itself.
Empathy Mapping
Empathy Map for Student Users (University Residences)
Empathy Map for Office Users
User Personas
To synthesize the research findings, I developed user personas for three major use cases and user types:
1. Undergraduate students in student residences who oversee 1 space
2. Office employees who oversee multiple spaces in buildings
3. Key decision makers of the project
Ideation
After conducting, analyzing and synthesizing user research, I developed user flows and worked with the data scientist to investigate different types of data visualizations for improved usability and better clarity of energy data.
User Flows
This particular user flow was for analyzing the existing pain points of the onboarding process.
Data Visualizations
I also worked with the data scientist to develop different data visualizations of energy data, which resulted in many heated (but productive!) internal debates.
Wireframing & A/B Testing
Throughout the ideation process, I was continually stumped by these questions: what type of data do users care about for saving energy? Do they need to know about their daily energy consumption or weekly energy consumption for them to take energy saving actions?
With these questions in mind, I worked with our team’s data scientist to come up with different wireframes for A/B testing. Equipped with 2 wireframes — one with a graph of daily consumption and one with weekly consumption, we went to Test La, Hong Kong’s UX testing community. Our hypothesis was that users would care more about daily consumption. There were a total of 6 tests, with each test lasting 15 minutes.
Testing Session & Results
Our A/B testing results confirmed our hypothesis and showed that:
Users care most about daily consumption, since this was the most relevant to their day-to-day life. For users who oversee several spaces, they care more about longer term trends.
Users needed to know the quantifiable results of each energy saving action, in order to take action. For instance, that turning down the AC for 1 hour would result in 1 kWh of energy savings.
First Hi-Fi Prototype & Usability Test
With results from the previous testing event, I made a high-fidelity prototype on Figma. It went through an internal round of feedback and reiteration, with comments from software developers, data scientist and business development.
After the internal iteration, I conducted usability testing with 9 users, incorporating real-life scenarios of how the app would be used. The usability testing script is on the left.
Usability Test Results
In general, feedback was positive, with many remarking that it was a significant upgrade from the old app. When asked how likely users would recommend the app to a friend (on a scale of 1-10), the average score was 8.16/10.
“It shows in an extremely clear and simple manner your energy usage over a wide range of time. It can really help you track your energy usage to save more energy for a collective benefit.”
“I think it’s a great app to learn self control and discipline, and the user flow is better than before.”
Final Design
Click the image to access the interactive prototype
Key Features
Examine energy usage trends
See whether your energy usage is above or below budget, set by an AI model and under
Benchmark your performance
Compare your usage against peers, local organizations & global benchmarks
Learn energy saving tips to save more
Understand ways to reduce your energy cost for AC, light, socket and other appliances
Understand energy better
Find ‘kilo-watt hours’ confusing? Understand energy better through its equivalencies - carbon emissions or electric vehicle distance
Lessons Learned
Overall, I learned a lot from this project as it was my first time developing an app using design thinking. Although I did a course on Interaction Design Foundation and Coursera, applying design thinking in real life was a whole different story. This project made me more familiar with design thinking, especially the importance of testing & feedback collection, and how to learn by myself.
1. I learned the methodology of design thinking
Throughout this project, I struggled with design’s innate ambiguity — there is no right answer. Design is also a messy and reiterative process, and I often found myself stuck and unsure what to do next. However, talking and testing with users and internal stakeholders made it easy to validate and gain confidence in certain design decisions. Moreover, I learned that it’s important to be flexible and humble when receiving negative feedback.
2. Be humble and flexible when receiving feedback
What would I do differently next time?
This is what I would change next time:
1. Involve users during ideation of data visualizations to save time and get users’ insights immediately
2. Instead of developing wireframes, I would do a medium fidelity interactive prototype. Balsamiq’s wireframing didn’t allow me to test app interactions or user flows very well. Next time, I would jump directly into making a medium fidelity prototype on Figma to test and iterate faster
3. Invest more time in learning user interface design. Despite having graphic design experience, UI design was a completely different ballgame, since usability and interactions had to be considered. Even now, I’m not 100% satisfied with the UI — I believe it can be more polished - but that will be for the next round of iteration!