At Moixa, we are always looking for new ways to delight our customers and after our Moixa Smart Battery users requested an updated user interface (UI) to view their solar, grid and battery information, our team got to work.
For energy storage assets to be able to access and utilise the Moixa Dashboard and App, they must first be integrated with our GridShare Software which optimises the devices for time-of-use tariffs, solar energy and flex services amongst other functionality depending on the needs of the client.
If you would like to read a little bit more about the latest updates to the Moixa Dashboard and App and what this means for our Moixa Battery customers, you can read more here. The rest of this blog post however, will focus on walking you through our team’s redesign process for revamping our customer-facing web and mobile app, which are the visualisation tools for GridShare Client.
Firstly, a little background, both the Moixa Dashboard (the web application) and the Moixa app (mobile app) are designed to display electricity readings from the meters installed alongside the battery, to help users visualise and understand their energy consumption information and the behaviour of their device. The data available to users can be split into two categories, “real-time data” and “historical data”. The “real-time data” we collect is power (W) and it is updated within time intervals (usually 5 or 30-minute) while the “historical data” is cumulative energy (kWh) within a given period. The meter reading allows the GridShare Software to collect four sets of data, we’ll call them core values, namely Household Consumption, Storage, Generation and Grid Energy.
Household Consumption represents the household’s electricity usage.
Storage refers to energy assets that can charge and discharge, such as a Moixa Smart Battery or Vehicle-to-grid charger.
Grid Energy is the amount of energy either imported or exported, from or to, the electricity network.
Generation is the production of solar energy but this could also be used for other renewable sources if needed by a client.
These four core values were the cornerstone of our design and the basis for the development of our data visualisation.
The Design Process
Our design team used a process similar to the principles of IBM’s Enterprise design thinking and the first step was research. As the first version of our Dashboard and app had already been out for some time we already had some user feedback and we also conducted conversations with customers to understand how they used the app. We also took a step back to look at other Internet of Things (IoT) applications on the market to see if there were any learnings or data visualisation best practices that we could utilise.
IBM design thinking in our design process
With this redesign process we wanted to achieve two key goals:
1) Information Logic: Understanding our user’s flows and interactions with the information provided from our data to remove any pain points and deliver a better experience.
2) Design System: To pull together a design system, along with general rules for our designers to follow when showcasing similar datasets. With the end goal of bringing a cohesiveness in design and consistency to our products.
We chose to start the redesign with our mobile application as a mobile screen is smaller and the interactions more limited than the web. By starting with the mobile app it enabled us to explore the most necessary elements of functionality and user experience (UX), within the sizing constraints, with the knowledge that we would then add richer functionality and data to the web app where there was more space to do so.
The Design System
Icons
Our goal was to make icons look friendly, and enjoyable to look at, and so we chose outlined icons, as it brought a light visual style which made the data visualisations and graphs stand out.
Colours
According to our research and best practice, in most data visualisation tools, the same colour is always used for a specific data set. This enables users to associate a colour to a data set without repeatedly needing to read each graph’s legends. We also hoped that by refining the colours it would also ease the learning curve for understanding the more detailed graphs.
We started by mapping the colours we currently used in our brand documents and the first version apps and consolidated and themed them around the different data values. After looking into the colours we chose to use:
Storage – blue in line with our brand colours.
Generation – light yellow.
Grid energy changed from pink/red to violet.
Household Consumption – red.
Error, warning and success colours were handled under a secondary colour palette so as to not confuse users.
Information Logic
One of the key challenges when showing energy flows within a system of multiple producers and consumers of energy is that it is impossible to say where the energy you used came from. There are also a bewildering number of combinations and permutations of energy consumption and production within the four core values we have described. We wanted to help users understand the information in a way that reflected reality, and made sense to them. We added icons to the four values and looked at ways to structure a useful summary.
Overview graph showing how power flows
Structure: Overview | Household consumption data, Generation data, Storage data, Grid data
Our research showed that 85% of users of our app checked an overview of their energy information several times a day to see how the battery was working. Then, less frequently, these users would check on more detailed energy usage data, and a small subset of users liked to download the raw data available from the web app to calculate their usage and savings. To reflect the ways the users liked to use the app in the redesign we decided to structure the mobile app with an overview page covering the core values and how energy was flowing, so they could quickly see how the battery was working. We then added more detailed pages to display power and energy for the core values, followed by energy chart breakdowns.
Structure of First Drafts | Overview | Consumption data, Production data, Storage data, Grid data
Once we had an updated design we moved ahead with user testing. Almost all users gave positive feedback on the UI updates and they appreciated the way the data and app structure had been rearranged. However, almost 20% of our testers said that they preferred the stack graph from the old version of the UI, as it helped them understand how their energy use changed over time.
The stacked bar chart from the previous app design that some users wanted to keep
Energy chart on the mobile app
As there were accessibility issues with the previous design we opted to stick with our new design that the majority of testers preferred and instead add in the more detailed breakdown of information on the Moixa Dashboard (web app). 90% of our users also found the doughnut chart legends useful and so we used this approach across both the web and mobile UI.
A donut chart to show the breakdown of the total Consumption of the day
Providing Deeper Insights at a Glance
The final area where we felt we could update and benefit customers was by adding some more ‘at a glance’ data points. On the overview page, we added a summary of today’s usage and a comparison to yesterday’s total usage, so that users could quickly see their day to day usage and make their own assumptions about how much energy they might use.
Overview: Today’s usage so far in comparison to yesterday’s total usage
In the detailed pages, we added a summary of the performance in the selected time interval in comparison to a previous interval, as we found that some tech-savvy and highly engaged users were already doing this calculation manually.
Analytics in detail pages
Finally but importantly, we implemented responsive design on the Moixa Dashboard so that users who enjoyed seeing additional data could access it on whatever device they preferred.
How the Dashboard is shown on different screen sizes
The redesigned UI has now rolled out to all customers in the UK and Japan and the process greatly increased our knowledge in the best ways to display data. Our UI has improved, is now consistent across web and mobile, and has received positive feedback from users.
As the hardware and our GridShare Software develops, there will be new challenges and data that will need to be represented on the UI, but with our updated design system we will be able to more easily adapt our designs to the opportunities presented by new features. We would just like to say a huge thank you to the customers who helped with our user testing and all of those who shared their feedback with us during the process.
Further Information
This UI is part of our GridShare Client offering, the software which optimises individual devices for time-of-use tariffs, renewable energy generation, weather alerts and flexibility services depending on the location or energy storage device. This UI isn’t only used by Moixa Smart Battery owners but is also available to ITOCHU SmartStar battery owners in Japan, where there are 25,000 ITOCHU batteries connected to our GridShare platform. The UI redesign and translation into Japanese was done in collaboration with ITOCHU and their customer needs were taken into consideration along with direct feedback from our Moixa customers.
If you would like to learn more about our Moixa Smart Batteries which are available across Great Britain to maximise the value of solar energy, then visit our consumer website: www.moixa.com/solar-battery/
If you are an EV Charger and Energy Storage Manufacturer and are interested in using GridShare Software to optimise and add value to your customer’s systems, contact our Business Team on www.moixa.com/contact/ or learn more about how GridShare Software can add intelligence to your hardware.