Artboard 1 copy 4@3x.png

Copy of SPOT APP

The SPOT APP helps users set up SPOT devices, browse real-time weather data and check device status for troubleshooting.

IMG_2449.JPG
 

As a part of the toB product line. The app will be used for device installation, real-time data reading and troubleshooting of the SPOT device.

 

My Responsibilities

By collaborating with a diverse team, I participated the design of the SPOT system. I was responsible for the design process of the APP, from research, wireframing, interface design, to testing.

Challenges

As an IoT product, users need the APP to setup the SPOT device, so it’s a big challenge to give users a clear guidance. On the other hand, the weather data collected by SPOT device is abundant, so how to deliver the data clearly is another challenge.

 
 

Research

The SPOT APP is part of an IoT system, key features including data display and device management. Therefore, I did research on weather apps in the market to see how they display the data, and tested some IoT APPs to see how they deal with the device management.  

 

APP Workflows

Based on user research and discussion with back-end engineers and marketing team, we figured out 3 key features of the APP, which are device installation, real-time data reading, and the device management. 

Device installation

As an IoT device, the SPOT device need to be set up with the APP. Since the setup of the device will influence the data accuracy dramatically, giving users a clear setup guidance is crucial. 

 
Device installation.png

Real-time Data Reading

The SPOT device is collecting weather data all the time. The APP is an efficient way to access the accurate real-time weather data of the location. 

 
Real-time data.png

Device Management

With the APP, users can access the profile of the device, such as the device ID, location, data interval, etc. On the other hand, users can also edit the installation context of the device conveniently.

 
Device management.png

Wireframe V1.0

By converting the workflows into wireframe structure, I came up with the idea of device group, which enables users to organize their devices more flexible. I listed all devices under a specific group vertically with the name and temperature data, with which I want users can browse devices more efficiently. In the detail page, I arranged data into separate windows to keep the page organized. 

 

Wireframe V2.0

With the help of the wireframe structure, we carried out another round of discussion. The firmware and hardware team suggested adding the troubleshooting feature, which would enable users to download data via bluetooth if the network was down, reset 4G/Wi-Fi network or replace the device if necessary. 

We also decided to move the group list into the menu to enable users to access groups quickly. On the other hand, we aborted the feature of notification, because we were not 100% clear on the needs of clients from various industries.

Troubleshooting

The SPOT device is an outdoor device, which will be setup in various environmental conditions, which means the device maintenance will be difficult. With the help of the APP, we want users can do basic troubleshooting by themselves to minimize the cost an improve the efficiency of maintaining. 

 
Artboard 11@3x.png

Interface Design Development V1.0

As soon as we decided the wireframe structure, I initiated the interface design. I started from the key screens: the SPOT data page, the group list, the map view, and the device installation guide.

 

Interface Design Development V2.0

Following the development of the key screens, I worked on the rest of the screens to complete the APP design. 

 
Device installation.png
Real-time data.png
Device management.png
Troubleshooting.png

Final Design

Artboard 17@3x.png

Documentation