UX/UI and some industrial design for an Air quality sensor

#design #uxdesign #uidesign

This is a small addition to the article If you haven't read it, it's best to start with it; it will give you a better understanding of the background and how the concept of user interaction and AQ developed. Let's go with the classics:

Need

The primary need is to monitor the levels of CO2 and other harmful pollutants in the atmosphere around us. There are numerous verified studies online on how CO2 concentrations in the air we breathe affect the performance, health, and development of children. Quite often, poor health is associated with being in a poorly ventilated room. Of course, it's not just CO2; we'll try to monitor all key indicators: CO2, pm2.5, pm10, VOC, NOX, atmospheric pressure, humidity, and temperature.

Of course, you can open a window wide or turn on the ventilation system constantly, but this is impractical, especially in winter. And it is not a fact that the outside air meets the minimum air quality standards (AQ).

This is where the fundamental need arises: having constant readings (AQ) and, if possible, ventilating as needed or automatically. A smart home system provides this capability; simply put, we can open a window or turn on ventilation when and where needed. For example, in a specific room, rather than the entire office or apartment, which allows for energy savings (heating, ventilation).

The second key need is the ability to automatically monitor air quality through the integration of sensors and actuators with a smart home.

And indirectly, this is psychological peace of mind from the fact that these processes are under control and we do not have to worry about our own health and the health of our loved ones.

Ideation

Based on our needs, we need a device (a device, a set of sensors, etc.) that will cover them. Furthermore, the device should:

Fit into the interior design.
Be convenient and easy to use.
Have two versions: wall-mounted and tabletop, as well as an outdoor unit. We need to understand the air quality coming into the room from the window (sometimes it's significantly worse).
Include the necessary set of sensors.

For example, one option on the market is a device with a large display and a bunch of stats displayed in medium-to-small font. Can you imagine yourself periodically checking the screen to see what's wrong?! No, you should be able to take a quick look, if you wanted to, and understand whether everything is in order and what exactly in the operation of our device is in order or not. This is where the concept comes from.

Discovery

Since our device monitors air quality across a fairly large number of parameters, we need to limit their display while still making them legible and understandable from any distance in an average room. This is called zoning, or zone definition.

We will have three air quality zones for three key indicators.
The green zone is ideal air.

The orange zone is tolerable, causing no discomfort.

Finally, the red zone represents discomfort and potential health risks with prolonged exposure to such an atmosphere.

The extreme limit of the red zone is already the danger zone. And the user should be warned when this zone is reached.

The concept also includes the ability to set the boundaries of these zones independently.

Features

The functionality is described in more detail in the article.

I will briefly describe what determined the design of the device, its interface and the logic of interaction with the user, and how this meets basic needs.

What's been done:

Three zones are defined for three key indicators, with the ability to customize the boundaries of these zones, select modes, and alert options.
A visual display of the current zone for each of the three key indicators, i.e., status indication for the three main zones. This meets two main conditions: "visible and understandable from afar," and, if necessary/desired, "approached, clarified," or "opened the app, saw details," statistics, etc.
Connection (integration) to a smart home. The device transmits all data received from sensors and allows for configuration through the built-in smart home interface. The algorithm for responding to the indicators of the devices is handled by the smart home system, which is precisely what it is for.

An example of such an algorithm: The device has entered the red zone for one of its air quality indicators. However, the outside air is clean (we know this because we also receive data from the outdoor AQ sensor). An action is performed: we turn on the ventilation/open a window in the room until the device's indoor readings enter the green or orange zone (depending on the settings selected by the user). Then we close the window/turn off the ventilation in that specific room.

Industrial Design

Device and display design.

Let's start with the basics: how can we display these three zones? We'll roll them into tubes and turn them into glowing, colored disks. Something like this:

This design is resistant to glare and light from lamps and light fixtures, making it visible from anywhere in the room. This solves the "visible and understandable from afar" problem, and adding a couple of good IPS displays solves the "walk-up-and-check" problem. This layout, of course, wasn't chosen immediately. Firstly, there are limitations in the availability of displays on the market and their price, and secondly, the ease of displaying and reading information. The resulting design looks like this:

Based on this, we need to add functionality that allows us to adjust the brightness of the "discs" and displays depending on ambient light, both automatically and manually, as well as depending on the time of day.
And we're gradually approaching the display design.
Let's start with displaying information. During development, a simple diagram was developed of what needed to be displayed, based on the functionality and features of the smart home.

Link to the interactive, full version https://stiamon77.github.io/aqstqa.drawio.html

The upper display displays information on three zones; it is a supplement to the disks; it displays detailed information on sensor readings; accordingly, it is divided into three fields.

Since we have a Danger zone, we add additional light indication and animation on the display.

The indicator (disc color) smoothly transitions from zone boundary to zone boundary (gradient). This will make the status intuitively clear and aesthetically pleasing.