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.

Image for post
Image for post
Left: V1 mobile app vs. Right: Redesign
Image for post
Image for post
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
Image for post
Image for post
Left: Vogue in/out icons vs. Right: Passive Sign Convention icons
Image for post
Image for post
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.

Image for post
Image for post
Targets of redesign work
Image for post
Image for post
Moixa design system (Partly)
Image for post
Image for post
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.

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

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.

Written by

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