UI design of Outdoor Sensor Bundle

This project is still ongoing. The version below is updated on Nov 2020. I am a visual designer in the project.

Introduction

Interact Outdoor Sensor Bundle (OSB) is an Interact branded mobile app, with both iOS and Android version. The operators and configurators are going to use it to configure the OSB sensors in the streetlights.

The OSB sensor can detect whether the tilt of the luminaire is in a normal state or not, enable the streetlight to follow the motion of the objects around to adjust the dimming levels, as well as the brightness of the environment.

We faced the remote working condition as other projects in Signify. The PM and system architect are in Eindhoven, Netherlands while the development team is in Bangalore, India.

Main scenarios and hi-fi mockups

It looks simple from a visual design perspective because it’s technical, trying to keep it simple, clean, and efficient feelings. The flow is complex. We tried to understand the technology, user flows, scenarios, and all the terminologies involved, which is the biggest challenge, especially in a remote working condition.

There are four main parts, devices, networks, profiles, and more. “Devices” is where users configure the sensor parameters. “Networks” is where users set the local network of groups of sensors. Users can manage the sensor parameter profiles on profiles related pages. “More” is about the basic information and settings of the app.

iOS

Devices

The first step is to discover the sensors around users when he/she opens the app. The sensors are installed in the streetlights and user works in the field.

Devices – landing, device details

Next, he/she would do some initial settings for the sensor. There are a few terminologies involved.

Tilt and impact

The luminaire was installed at a specific angle – usually horizontal, but not always. Over time, it may happen that the angle gets altered. The device monitors the angle and raises an alarm if it has changed too much.

  • Tilt at installation is what the angle is supposed to be. It’s 0° (horizontal) by default.
  • Tilt threshold specifies by how much the luminaire angle can deviate from the intended angle (Tilt at installation) before an alarm is raised. It’s what “too much” means.
  • Impact threshold defines how severely the pole can be hit before the device reports the incident. For instance, a pole received a shock, when bumped into by a vehicle. The device will generate an alarm if it detects an acceleration that exceeds the threshold.

Configuration – landing, tilt and impact

Motion

  • High mode determines the brightness of the light when motion is detected. When the sensor detects motion, the dimming control output ramps up to the selected high light level.
  • Low mode determines the brightness of the light when no motion has been detected for the time specified by time delay.
  • Users can adjust the sensitivity of the motion sensor. The range is 0 to 34dB, which corresponds to approximately 2 to 20m for walking humans.
  • Time delay is the amount of time the light will stay in high mode brightness before going to low mode brightness.
  • Cut off is the amount of time the light will stay in low mode before turning off completely. Any detected motion will switch the light to high mode.
    • When cut off is disabled, the light will stay in low mode.
    • When cut off is set to immediately, the light will turn off completely as soon as it enters low mode. It forces the low light level to 0%, and vice-versa.
    • When cut off is set to after a while, the light will turn off completely after the specified amount of time.

Configuration – motion

Firmware update

We tried to keep the app dialogs as native as we could. Only a few visual elements are Interact branded in the dialogs on iOS, for instance, the progress bar and the illustration for success, which is different from Android. We made the dialogs fully Interact branded on Android.

Firmware update – modal view, process status

Networks

Users can create local networks for groups of sensors. Several groups can be in a network, together with standalone sensors. Sensors in the same group can be batch-managed, sharing the same profile. The list of the groups and sensors in a network can be very long so that we allow users to search a certain group or sensor they want within a network.

One sensor can be in different groups. Users can see and manage the groups it belongs to on the sensor detail page under the networks tab.

Networks – landing, network details, device details, about the device

Profiles

Once all the configurations are done under the devices tab, users would save the profile. The profiles can be managed and edited again under the profiles tab.

Profiles – landing, profile details

Others

The profiles with all the data of the sensor will be sent to the cloud once it’s done.

We also learned that the terms are too technical even for the configurators and operators. Therefore, the contextual help doc is provided. You could find the help links are in the notes section under the parameters that are hard to understand. For instance, help links are under the high mode, low mode, and sensitivity on the motion page. Users can read the explanation of the term after clicking the help link. See the help modal view on the page below (the 3rd mockup, from left to right).

Sensor data – landing, data file details; contextual help doc example

Android

Same key visual pages are also provided in an Android version.

Devices

Networks

Profiles

Store visuals

Android version was going to release before iOS. Below are the key pages displayed in play store.

App icon

Also, app icon was prepared. The 3 app icons below the OSB app icon are the app icons from other Interact branded mobile apps. All Interact branded apps follow the same app icon template. The key visual element in the OSB app icon, the sensor symbol, is also from the Interact icon library.

app icon of Outdoor Sensor Bundle