Meter Online

Background

CLP Holdings, one of the largest investor-owned power companies in the Asia Pacific Region. They have a product, Meter Online, that lets users access their energy usage data. User can manage their energy consumption and demand so that they achieve better energy efficiency. However, the existing platform was developed in the early 2010s.

Our goal is to redesign and develop the energy tracking platform. The project scope is huge. This is an overview of how I work with the team to redesign the whole platform.

The old platform screenshot
The old platform screenshot

My Role

I am the Product Design Lead of the team. I was responsible for the design strategy and design of the product. I led the UX design, hosting workshops with stakeholders, interviewing the users, designing all major deliverables, and presenting them. I also worked along with the tech team to help to ship the product.

Design Research

Goal: To understand existing users needs & problems, why do they need the product, and how they use the data.

The existing meter online has many different types of business customers which include: shopping mall, 5 stars hotel, chain store restaurant, grade A commercial building, food factory, small convenience store...etc

We did both quantitative and qualitative research, online survey, and 1 on 1 interview, to understand how our users use the existing platform and what they want us to improve. The whole process took about 2 months to complete.

We generated 4 major insights from our research and found out that it is a product that needs to fulfill different industry needs.

Design Workshop

Goal: To identify the key problems from the research and generate ideas with different stakeholders


We invited different stakeholders & gatekeepers to run a design workshop.

To start with

  1. We shared the insights and findings from the research.

  2. Prioritize key problems with the team

  3. Think from our user's shoes to list out what do they care and why do they care

  4. How might we solve the problems and fulfill the user's needs?

My role is the facilitator to guide the stakeholder, also a member to participate. It is an interesting chance to observe and receive feedbacks from the top management. Also, It is a good chance to introduce the process of design. They could have a better understanding of the problems, how we solve them, and ensuring early buy-in from them.


At the end of the session, the team came up with three key concepts:

  • What if the users can group and manage their meters, so they can view their energy consumption data in a group?

  • What if the users can create a custom alert base on their needs?

  • How can we have a better energy forecast based on the weather?

Testing the Concepts

Goal: To validate the concepts from our users, listen to their feedbacks.

Based on the ideas from the workshop, we designed a low-fi wireframe quickly. and invited our users to have a test on it.


To keep it simple, I used the following flows:


  1. Define what we want to know from the test, set up a test plan.

  2. Design different scenarios and tasks for the users

  3. Let the user do the tasks.

  4. Listen to the user's feedbacks

  5. Ask about overall experience of the concepts, is it really solve their problems?


We invited 10 existing users to try our concepts. They are from different industries, including fast-food chain restaurants, shopping mall, beverage factory, and local small store. As we want to understand that which concepts or features could benefit which type of users.

We addressed the top features through the concept validation


  • Group - Users can group different meter data into one customized group, and they can rename the group too.

  • Compare - Users can compare previous energy data in one chart, which is meaningful to them.

  • Alert - Setting up customized alerts based on user's needs.

  • Dashboard - We understand that what data is important to our users, and how they use the data.


The User Flow

Goal: To map out the complete path that the user should take when interacting with the platform.

The above picture shows the onboarding flow of a new user for the platform. It was one of the most complicated onboarding flow I have ever worked on.

We know what our users needs, and how we solve their problems. It is time to kick start the hands-on development of the product.

By discussing with the internal team, we aligned everyone on the same page by the user flow. Making sure all the parties: the product team, the tech team, and the stakeholder understand that why we are doing this, and how users interact with the product.

The Development

Following the design principle and the users flow to design the interfaces.

Apart from the new features, we also want to improve the experience of how the users read the data. From the previous research and concept validation, we understand the followings:


  • Users would like to understand the peak of their energy demand (kVa).

  • They want to compare their energy consumption (kWh) to their previous period.

  • They also want to understand how weather affects their energy consumption.

  • Different industries will read the data in a different way, eg: The hotel businesses compare their energy usage with their previous peak season while a factory will compare their energy usage with their previous year.


It is a challenge for me to fulfill the different types of user's needs and keep it simple.

I also need to handle the multi-screen size design for the platform. A fully responsive design can help to preserve the UX, look and feel across different devices.

Result

After 6 months of design and development, this is what we achieved :

New Business Users

+83.7%

DAU

+62.4%

User Satisfaction

+86.3%

Take aways:

1. Communication is the key to a huge project like this. Make sure everyone understands what and why we need to do it.

2. Define the user pain point and delivery the message to stakeholders as early as possible. This can help to break through the barrier and have early buy-in.

3. Design workshop is not an internal show. It must be meaningful. Otherwise, do not do it.