Improving the UI of my battery tracker

When I started flying quadcopters I wrote a simple web application to keep track of my batteries. My goal is to collect as much data about the battery usage as possible, especially the charge cycles. Voltage before and after, the charge delta (mAh), how long each cycle lasted etc. Given enough data points, I can extract useful information. Such as the discharge curve for LiPo batteries, how reliable certain models are, which manufacturer produce batteries with higher than average failure rate etc.

The first version was more an prototype than a real application. Though it was fully functional, it was not very convenient to use. Only after using it for a while I was able to identify the important workflows, see which ones I needed to improve and optimize. The application also looked bleak, black text on white background, no colors. When I let my friends test the application they had troubles figuring out how to use it. The UI was not self-explanatory and discoverable. This is how it looked just a few days ago:

Over the course of just a few days I completely redesigned the UI.

You can see the full gallery on cloudup.

The first thing you probably notice is how colorful the new UI is. I did want to add some colors to the UI, but I haven't planed to use that many. But the Atom color-picker plugin makes it so incredibly easy to pick and insert colors into your CSS. So I went crazy and added colors everywhere.

Entering data is much quicker now. All data entry can be done from the dashboard. Only when I need to access old, historical data I have to leave the dashboard. Furthermore, when entering data the user is guided through a series of steps. That should make application easy to use, even for first-time users.

I was able to implement all these changes within just a few days. The main reasons are because React is a brilliant library for rendering HTML, and the combination of Avers and the utility library Computation make it so easy to prepare the data for React.