top of page
iO Energy

External Dashboard

Restructuring a desktop dashboard

MacBook Pro 16.png

As a Start Up company, iO Energy delivers affordable renewable energy to homes and business located in South Australia. They offer their customers a way to reduce their energy costs with smart electricity meters and time-of-use pricing, and they build energy tech that help consumers to reduce their energy costs. 

​

iO Energy had approached our team within Academy XI wanting a new idea for their customer facing dashboard for their energy customers. Looking to create a smoother user experience for their customers when using the customer dashboard, with recommendations regarding the better data visualisations, and overall improvements to their current dashboard.

My Role

I had the honour to be selected as co-team lead for this project, being the communication connection between the mentor, client and our team of 6 people. We collaboratively worked together to deliver user research, synthesis, ideations, user flows and wireframes. Transitioning these into a functioning prototype, all within a 6-week sprint as part of my Academy XI's UX/UI Design course. Set tasks that I had completed and contributed in during this project:

  • User research: Creating and distributing user survey; user interviews and usability testings

  • Synthesis: Refining the affinity mapping; persona creations

  • Ideation: Organising and conducting ideation workshop; creating and refining the MVPs; creating user flow; creating wireframe

  • Delivery: Conducting 3 usability tests for both rounds of prototype testing

Design Tools

  • Figma; FigJam; Miro; Trello; Zoom; Slack; Pen & Paper

Time Frame

6 Weeks

LinkedIn cover - 1 (2).png

Project Objectives

The initial client brief the client empathised their desired design goals, wanting to remodel their current customer portal by giving it more life and a better flow for their users. 

Design a Customer Dashboard

Allow business and residential customers to view their energy consumption and account data

Improve Usability

Improve usability by minimising friction of the user flow

Reinforce Good Behaviour

Maximise delight by recommending better plans and having a 'viral' sharing quality

Maximise Customer Delight

Provide knowledge and tools that reinforce good behaviour

Problem Statement

Australian energy consumers, who are cost and environmentally conscious, are unaware of how they can optimise energy usage to reduce their cost and carbon footprint as they lack relevant data or personalised insights to make smarter decisions.

Discovery and Research

Understanding the problem

For us to understand the client, their users and what they were asking for, we had to carry out our own research by looking into the company and their current platform, conducting research into other companies that are alike, as well as creating and distributing user surveys and conducting 1-on-1 user interviews with usability testing. 

Direct Competitor Analysis

When looking into companies that are alike to iO Energy, we took the 4 big energy companies in Australia (Momentum Energy, Amber, Origin/Origin Spike, and Energy Australia) and found their weak points and how we can be advantageous in certain aspects. Focusing on certain areas such as renewable energy offers, data visualisation, and general use. 

Competitor Analysis - Feature Table.png

Table break down of analysis

Opportunities from Competitors

Rewarding & Interaction

Giving a sense of achievement to the users e.g. incentives on saving goals, or showing how much can be saved 

Customise Dashboard

Allowing users to personalise their energy dashboard e.g. setting pricing notifications via text, allowing to change up dashboard and having them see what they want instantly.

Visualise Data

Showing users how far they are on their current billing, or being able to convert units on data charts, or having charts that are easier to interpret for the users. 

Tips & Recommendations

Giving users some help in regards to tips and advice on saving cost and energy, whether it being a live chat support or a smart assistant that can give the best solution. 

Survey

Our survey was able to tell us a few simple information about our users.

63 responses

 52.4% in aged between

20-40 years 

Our users might possibly be environmentally aware

90.5% are residential users

3.2% are business users

6.4% are both

2 main reasons to check portal:

check bills (62.9%); and to check current usage (43.5%) 

71.4% of users do review their latest period energy usage bill, where majority of users would consider switching to renewable energy (90.5%)

User Interview

From the survey data we created an interview guide that allowed us to follow a structured interviewing process, making sure each interview conducted is consistent. We conducted 7 interviews. 

"I'm environmentally conscious by not using or consuming, making me incredibly cost sensitive" 

​

"I prefer to use an energy provider that is offsetting my usage and is carbon neutral rather than a big corporation that don't use renewables"

​

"It would be great to have notifications when you are exceeding your solar usage also getting notifications on when you are late with your bill"

Usability Testing

After each 1-on-1 interviews, we asked each participant to perform some actions with this existing prototype that iO Energy had provided. Our goal was to test the prototype, not the person. 

​

Main points there were gathered:​

Users preferred a more prominent "bills" section, especially for those that are not tech savvy would have difficulty finding their billing

Representation and indication of data needed to be larger in size

Visualisation of the charts and graphs were nice however were unsure on how to read them

Navigation tab was very confusing in location and navigating

3 panel design gave a simplicity design that had all the quick information

hero 1.png
bills 1.png
enviro 1.png

Define

Synthesis research to generate insights uncovering the problem

With the research we had gathered, we synthesised the information into Affinity Map, Empathy Map and Personas, to help us refine our problem and find a commonality. 

Affinity Map Detailed 1.png

Affinity mapping showed us that majority of users have tried to reduce their energy usage, though typically this was done through energy efficient products, specific timing for use of appliances, or installing solar panels. 

image 53.png
Olivia Martin.png

Develop and Ideate 

Exploring effective solutions using an iterative approach

As a team we configured a few How Might We statements, bringing them to an ideation workshop where we were able to address our problem space and how we could able to help our Olivia. Using a Minimum Viable Product axis chart, we were able to indicate specific features and aspects and how we could achieve our design goals - depicting these ideas and solutions through our storyboarding. 

  • How might we inform users of the benefits of better plans?

  • How might we educate users on how to save costs and their reduce carbon footprint?

  • How might we present data that is easy to understand and relevant to the user?

  • How might we personalise the customer portal experience for users?

  • How might we encourage efficient energy consumption through improve usage habits?

  • How might we reinforce good user behaviour through incentives?

  • How might we ensure the dashboard experience is predictable to the user?

Crazy 8s

Some features and ideas during our ideation workshop / crazy 8s session included:​

Improving the basics | Tag appliances |

Tips & advice panel | Usage challenge

Bill comparison | Lifestyle quiz | Graph toggle

image 51.png
image 46.png
image 45.png
image 50.png
image 49.png
image 48.png
image 47.png

MVP

As we indicated each feature and idea we had from our ideation/crazy 8s workshop, we categorised them into the Minimum Viable Product and how they might be placed on the value and effort matrix. 

We indicated that the easy wins for this would:

  • Basics (billing and usage)

  • Notifications 

  • Current and recommended plan 

  • Cost and usage saving tips

  • Quick switch between accounts 

  • Billing comparison 

  • Lifestyle quiz

Screen Shot 2022-07-28 at 3.22 1.png

Storyboarding

image 55.png

The online quiz was identified as a way for user, Olivia, to find the best suited plan, or action, for them and/or their household. 

Appliance Tagging 1.png

The team brainstormed a tagging appliance feature which would allow users such as Olivia to mark points within their usage graphs with certain appliances. This would not only help them but also allow iO Energy to collate a data base of their customers usage habits. 

At this point, I had co-organised a meeting with our client, to run through our ideas we had gathered and see their opinions and thoughts so far on our design project. Determining whether these ideas and solutions would have a high impact on our users.  

Userflow & IA

Using our MVPs we proceed to create our flow and IA, focusing our navigation. Having 4 primary access points to navigate around the web page, as gathering this information from our research.

  • Dashboard (Home)

  • Billing     

  • Usage

  • Renewables

  • My Account

IOEnergy Group4 Userflow 1.png
image 56.png

Wireframe

Once our user flow and IA was defined, as a team we created a visual representation of how the dashboard would look like basing from our initial research. 

From the userflow and IA as our blueprint, we developed a mid-fidelity wireframe - initially serving us as the first round of usability testing due to the limited time we had available.

​

We developed the designs in greyscale to focus primarily on functionality rather than aesthetics. 

Screen Shot 2022-07-21 at 8.13 1.png

From each primary access point, we focused and tried to incorporate a certain How Might We statement. 

Deliver

Delivering

Building our solutions

Using the greyscale designs from our wireframe, we conducted our first round of usability testing, focusing on the functionality. We used the same set of questions derived from the usability test set out in user research, with the addition of 3 extra questions to test whether the added features could help validate and be possible solution to the problem statement. We conducted 3 testing sessions with 3 different participants. 

image 57.png

From the first round of testing, we took the feedback and comments and iterated our designs to be more user efficient and improving our functionality. There were several changes made, mainly around the placement of certain features on the dashboard home page. After iterating the designs, we had taken the prototype for a second round of testing with 3 different participants. 

 

This time focusing more on the UI and design aspects.

image 58.png

Style Guide

iO Energy had initially provided us with a style guide, one that matches their current website and what their team had developed. In designing our prototype, we integrate their style guide to keep the consistency throughout. 

vlcsnap-2022-06-22-12h51m21s335.png

Final Design 

We combined all the elements shown throughout the design process to produce what we believed and felt like the correct outcome to help us provide a solution for our users. Achieving the desire design goals.

iORenewIpad 1.png
Group 844.png

View prototype here

Outcome

Upon presenting the final outcome to the CEO and the design team at iO Energy, they had considered many aspects to the design. Taking on aboard several features and putting the ideas into their pipeline of work. 

​

As the desire goals were achieved, it has improved the usability and flow for the users with the implementation of good behaviour incentives. 

Retrospective

Upon completion of the project with iO Energy, we were able to pin point areas where we could have improved or do differently next time:

  • Managing time more efficiently towards the end, would have tried to complete a seperate wireframe and first prototype for usability testing. As we only had limited time, we were only able to conduct a total of 6 usability testing. If we were able to conduct more usability testing, this would have allowed us to refine and iterate the small details within this design. 

  • The inclusion of WCAG 2.1 guidelines to optimise the platform more for people with disabilities. As any user and person can obtain an energy account, a person with a disability would and could possibly struggle with certain aspects of the web page. 

Roadmap

As the first phase of the project was complete, the consideration for further development into the customer dashboard was taken into consideration from other parts of the MVP axis chart. 

​

Now:

  • Basic: Users can access the customer portal to perform the basics, see what they're saving with renewable information

  • Comparison modal: A direct side-by-side comparison, allowing users to see a straight comparison to certain billing periods, seasons, or specific dates

 

Next: 

  • Allowing users to tag their appliances in their household, to properly account for specific usages in the household.

  • Giving users an opportunity to see if they're on the correct plan, or could have better habits and appliances.

​

Future:

  • Incorporate gamification features (ie. reward points, incentives) to further help users to become more environmentally aware

  • A more customisable dashbord in the customer portal, having personalised panels, and toggle switching graphs to accomodate certain users knowledge. 

bottom of page