Airtame Cloud improvements

Context

After releasing the Airtame Cloud redesign, we slowly introduced more improvements to the main screen: the Device List. In this screen users can find a table overview of all their devices, to help them manage and monitor devices and to understand what’s going on with them at a quick glance.

Defining the problem

The user can’t find the information they need in an easy way. We present a table full of information and visually monotonous, where is hard to visualise exactly where you need to put your attention.

Discovery

We gathered plenty of insights about the device list and the information that the user is looking for from feedback, research and also talking with the support team to see what were the most support tickets related to. According to these findings, we discover that:

Time: A regular user of Airtame Cloud spends just a few minutes on the platform, mostly for troubleshooting and making sure everything works as expected. They need to quickly find out what’s going on with the devices and if they need to fix something.

Connection strength: One of the things that affects the Airtame experience the most is the connection. The signals impacts directly on the streaming quality, and the user may judge the device based on that if the experience is not as expected. On the device list table, one of the columns is for the Wifi strength, but there’s no guide to what the numbers you see there mean. For the user managing a lot of devices WiFi signal should be easily glanceable and easy to understand, to ensure signal issues are identified faster. Depending on the health of the connection the user may experience different symptoms: if the signal is poor, the device may disconnect completely, and screen sharing could be delayed or interrupted. If the signal is medium screen sharing won’t be interrupted but may be choppy.

Amount of devices: Another piece of information that was missing on the device table was the amount of devices. If a user needs to know quickly how many devices they have, in total or per group, there’s no easy way to know this. You literally need to count them one by one from the table, and then do some math to know the total amount of devices per organisation.

What we did

After sketching some ideas and researching the best practices for providing valuable information in a quick way, we decided that we needed to incorporate “badges” to our design system. A badge is a compact element that represents an input, attribute, or action. By adding this visual indicator we would draw attention only where’s needed, and with the help of colour it would be fast and easy to understand when there’s something to fix (if needed).

• In the wifi column of the table we added colour badges depending on the strength of the signal: red for really poor signal and yellow for medium signal. We also added a tooltip explaining a little bit more of what this means and where you can find more information on how to solve it. To accompany the number information of the signal we also added an icon to even better exemplify the state of the connection.
• On the group list we added a transparent badge with the total amount of devices in it, and how many of them are online. We opted to add a transparent variant of the badge, as in this case there was no need to distract the user or focus them on this information.
• We also decided to add a badge on the Version column, to help the user identifier faster the devices that need an update. While hovering you’ll see a tooltip explaining a bit more about it, with a call to action to update directly from there.