Redesigning how data is displayed

The most important feature of the PocketLab Notebook app is the ability to visualize data from PocketLab sensors. This must be intuitive and customizable on any size of device.

Requirements

  • All data present on all screen sizes

  • Customizable data configuration

  • Sensors can have up to 20 sensors, we need a way to see all 20 at once

  • Distinguish graph-specific settings from global settings

  • Simple enough for an elementary school student

Four graphs added without any change to the size of the view port.

Four different sensors streaming real time data.

Before 

Small view port with unlabeled and unintuitive icons where a user cannot see multiple graphs at once.
Modals interrupt the user flow and cover the data

After

Responsive graph that fills the screen size.

Now up to four sensors can be used without exceeding a device's screen size.

All options are in drop-down menus to interrupt the flow as little as possible. This also meant that each change is happening in real time so a user can see the graphs adjust as they change the settings.

Streaming data from nine sensors. Additional graphs become dynamic chips that swap into the main frame when selected.