Energy Dashboard
A single-page dashboard with clear & intuitive information helps users make decisions and switch suppliers easily.
Responsibilities:
UIUX design / UX research
Duration:
16 hours
Overview
Background
This is a design task from a real energy company and it shows my design process, how I make assumptions, implement users’ needs into my design and measure the success.
Design Brief
For this task, design a single page dashboard that lets a user see this data visually represented in a creative and intuitive way. The requirements are the ability to see their current supplier information, quickly view or filter, view the top providers in the area, top users, usage statistics, average costs and make a decision to switch suppliers."
Aim
Design a single page dashboard with clear & intuitive information and it helps users switch suppliers easily.
Discover
What is the background context?
As a designer, I would like to know the goal, our users and more context to shape my design. So, I asked more questions to this energy company. However, they leave the space and let me make assumptions.
Who are we?
Why are we building a dashboard? (Goal)
What problem are we trying to solve?
Who are we designing it for?
How do we know the solution is successful?
This is a real brief
Find the goal.
In April 2022 the wholesale market continued to experience high volatility following Russia’s invasion of Ukraine. People worry about their energy usage and bills.
We provide the dashboard for tracking home energy consumption. The current dashboard is too complicated and full of information. Users feel frustrated to understand them, and they would like to find the best supplier for their bills. It is an opportunity to redesign the dashboard and gain more users.
Resource: https://www.ofgem.gov.uk/energy-data-and-research/data-portal/all-available-charts
What kind of dashboard should it be?
As a result, we need to build an intuitive and clear dashboard in the web application. It helps users realise how much energy they use and know where they could save energy. Based on their usage data and cost, users would like to be recommended other suppliers for them. And users can see different options and switch to another supplier easily.
Dashboard on the market
Define
Who are the users?
I assume our users could be people who have a current tariff, care about the cost of energy usage, and monitor their energy usage. They are familiar with web apps and use the dashboard to manage their behaviour of using energy and saving bills. And they keep their eyes on the energy market and are willing to change their tariff if there are other great tariffs. I list several segments for the groups.
User Group
Students who rent flat
People with low/mediocre incomes
Housewife
Landlord
Prioritise user needs
I asked my friends and mom how the dashboard could help them save their bills, and what information they would like to see. Then I prioritised their needs and the results are shown below.
Develop
Information in the dashboard
According to my quick interviews and research of information, I drew the basic information users would like to see in the dashboard and the tariff information should include.
Quick sketch for ideation
Based on the users’ needs, I did several quick sketches through paper and chose a couple of ideas for the dashboard. And the criteria for selecting ideas is that it shows information clearly, and users have similar experiences with charts on other sites (Jakob's Law).
Here are my ideas:
Energy consumption and overall cost in the pie chart
Line chart of energy cost with weekly and monthly view
Tariff recommendation in cards
Current tariff in its own region
Deliver
User need 1 : Monitor their energy usage and cost.
The final design follows six users' needs which I define from users. I considered the layout through the importance of user needs and visual direction. The visual direction is designed in the f-Shaped pattern, which is one of the common scanning patterns when users scan the website.
Users care about their cost and energy most, I put this information in the high hierarchy and users could find it immediately when they log in to the dashboard. They could select a specific date and view the cost weekly or monthly.
User need 2: Monitor the home appliance
Energy consumption represents in the pie chart and shows details in hours, so users can easily realise which appliance costs energy most and further adjust their behaviour of using the heat, fridge, dishwasher or oven.
User need 3: See the rate of the energy market.
Users keep their eyes on the energy market and would like to compare their own tariff. If they notice the rate of the current tariff is higher than the market they could switch to another supplier with an affordable tariff.
User need 4: See their current tariff and the energy rate.
The current tariff shows the current rate of electricity and gas, postcode and the supplier. They could see more detail through the button.
User need 5: Be recommended other suppliers’ tariffs
User need 6: Switch energy suppliers easily.
The dashboard provides other tariffs for users to switch, which are generated by their energy usage. There is a tag on each recommendation to show the benefits. When they would like to switch to another supplier, they could click the button to see a more detailed process.
Meet users’ needs and visual direction
How to measure success?
To validate my assumption and users’ need, I set two sets of metrics. One is for the business side and the other is for product engagement. Through these data, we can improve the dashboard and make adjustment.
Metrics for business
Metrics for product engagement
The completion rate of switching to other suppliers.
The increase of the membership.
Survey (Scale 1-5)
- This dashboard is clear and intuitive to understand
- This dashboard helps me control my budget
- This dashboard helps me switch to another supplier easily
Duration (how long they stay on the dashboard)
Login times (how many times they log in the dashboard)
Clickthrough rate (CTR)
Reflection
This was an exciting and challenging task. Honestly, I do not have any related experience or knowledge of energy. When I got this brief, I felt a bit nervous. However, through the design process, I analysed the brief, knew the context, understood users and realised the goal. And in the end, all problems were solved, and I met the requirement. I list some points that I thought could be better if there was more time.
Make user journey
Since the requirement was to design a single-page dashboard and was time-limited, it was not easy to consider the whole system and define the user journey. My personal goal was to present all information clearly and meet users' needs. If there were more time, I would definitely define the journey.
Explore more design ideas
I drew only three sketches and explored the current dashboard on the market, and started my design. There could be more creative ways to represent the information and could use more interactions with users. And I thought it would create more engagement with users.
Do the usability test
As I listed several metrics for this dashboard, so I am excited to show it to the public and get some feedback from the users who I defined. I want to test my assumptions, validate them if they meet users' needs, and iterate my design.