How to design for IoT smart battery dashboard

Background

I have been working in a British leading smart battery company designing and implementing UI for IoT (Internet of Things) batteries. Our digital dashboards target both consumers and business. This article is going to walk you through my redesign process for our consumer-orientated apps (both web and mobile) using a design system and note down my design decisions.

Left: V1 mobile app vs. Right: Redesign
Left: V1 web app vs. Right: Redesign

Is using the scientific terms and concept not user-centred in data visualisation?

The UI displays electricity readings from the cloud-connected meters installed with the batteries at users’ houses. The ultimate goal is to help users visualise, manage their electricity usage and savings. Unlike the business-faced dashboard, this UI is to serve individuals who purchased the smart batteries. Hereby there is always a debate on whether we should design the UI in the “Common sense” way, or we should present data in a scientific way which means accurate graphs and terms. It is an interesting decision that I am still exploring the answer. Here are some methods I tried.

  1. How much I have saved by implementing a smart battery?
V1 Stacked bar
V1 Stacked bar
Left: Vogue in/out icons vs. Right: Passive Sign Convention icons
Top: Rely on text to explain vs. Bottom: Passive Sign Convention icons
  1. Users who would like to learn from our apps can learn the knowledge and have a scientific way to interpret their electricity usage.
  2. Negative (-) and positive (+) signs are shorter and more graphic than texts like Discharging and charging when representing the flow direction, like icons. Users who do not know the concept need to learn at the beginning. For experienced users, it can be quicker to look at the sign to tell that data node is giving or receiving electricity rather than reading words like “discharging/charging” or “import/export”.

Design system and component library — the key to the consistency and efficiency

There was a noticeable inconsistency between the mobile app and the web app in the V1 app. The colours varied from different platforms and the icons had different widths of strokes. Some icons were outlined while the rest were filled. The way data displayed was different across the platforms. As mentioned previously, there was not a decision on whether to follow the scientific concept or do something that people do not need to learn, but without academic support. A holistic design system can improve these.

Targets of redesign work
Moixa design system (Partly)
To define the basic colours that are used in UI

Page structures/Information logic — keep the most used features at the handy places

The best practices of the data visualisation showed that it was more comprehensible when one graph contains less information but obvious trend or comparison. The new design went for the structure of one Highlight page where users can find the latest and historical data from 4 meter-readings (Core values) and the latest data of batteries status.

Structure: Overview | Consumption data, Production data, Storage data, Grid data
Wireframes and Hi-fi design
The graph that most users liked in the usability test in v1
Mobile UI redesign, break down the stacked bar into a bar chart and a doughnut chart
A doughnut chart to show the breakdown of the total Consumption of the day
Daily overview and summary for yesterday’s usage
Analytics in Detailed pages. Whether to use the + — symbols are still under debating.

Summary

In brief, this redesigns greatly improved the UI and the data display structure. In our design process, we learnt how to efficiently display necessary information and help users to understand their data. We had debated on whether to design the graphs in a scientific way or in a way that is closer to common sense. This is still under observation while we picked the later one and keep the consistency. As the hardware and technology develop, there will be new challenges and opportunities for improvement. We are excited to release the current version and prepare for the missions in the near future.

I am a London-based Chinese developer and a designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store