Artboard 1 copy 4@3x.png

SPOT Mobile APP

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

IMG_2449.JPG
 

The SPOT Mobile App enabled users to setup SPOT weather stations, show real-time and forecast weather conditions, and deliver customized data services.

 

My Responsibilities

I was responsible for the UX and UI designs of the Mobile App. Starting from the research to the wireframe development and implementation, I cooperated closely with the back-end, iOS, and Android engineers.

Challenges

Users needed the Mobile App to setup the SPOT device. Therefore, a clear guidance was one of the biggest challenges for the App. Another challenge was figuring out how to deliver large weather data and data services.

 
 

Research

I researched weather and IoT related Apps to get inspiration on data display and device management. Here were some examples of my research.

 

APP Workflows

Based on user research and discussions with our back-end engineers and marketing team, we figured out three critical features of the SPOT Mobile APP: device installation, real-time data display, and device management.

Device installation

The SPOT device needed to be set up with the App. A clear setup guidance was essential to data accuracy.

 
Device installation.png

Real-time Data DiSPLAY

Because of the advantages of portability, the mobile App was a good fit for displaying real-time data and receiving weather forecast and other services.

 
Real-time data.png

Device Management

Users could manage the device profiles on the App.

 
Device management.png

Wireframe V1.0

Here was the first version of the wireframe I developed based on workflows. I came up with the idea of the device group where users could manage devices more flexibly by grouping devices when needed.

 

Wireframe V2.0

The firmware engineers suggested adding troubleshooting features where users could download data via Bluetooth, reset 4G/Wi-Fi network in case of connection failure, or replace the device if necessary. I developed the second version of the wireframe as a follow-up.

Troubleshooting

With the troubleshooting feature, the App could help users maintain the devices more easily and conveniently.

 
Artboard 11@3x.png

Interface Design Development V1.0

I initiated the interface design after we confirmed the wireframe structure. I started with the essential screens: the SPOT data page, the group list, the map view, and the device installation guide.

 

Interface Design Development V2.0

I finished the design on the rest of the screens based on the developed visual guidance.

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

Final Design

Artboard 17@3x.png

Documentation