Artboard 1 copy 8@3x.png

BloomSky Mobile APP Redesign

 

After expanding the BloomSky product family with STORM, a new system that collected wind and rain data, we updated our mobile App and dashboard to integrate the new data.

 

My Responsibilities

My objectives were to redesign the interface of the BloomSky App, to display the STORM devices on the App’s map, and to integrate wind and rain data into the device data page. I also developed the installation guide for the setup of the STORM device and added the wind and rain data graphs to the user dashboard.

 
 

The STORM

The STORM device was a new member of the BloomSky family. It collected wind, rain, and UV data.

 
Artboard 7@3x.png

New Workflows

Due to the new additional features, we added two more workflows: STORM data display and STORM device setup.

Data display

The BloomSky map on the App enabled users to browse and access our devices around the world. Dots on the map with the temperature inside represented BloomSky weather stations. A new icon was necessary to show the wind speed and direction from the STORM device.

 
Info Architecture 1@2x.png

Add a STORM device

Since the STORM device required the APP setup, designing a straightforward setup guidance was essential.

 
Info Architecture 2@2x.png

Feedback

Since a properly mounted STORM device was critical to data accuracy, we decided to add a guide on device mounting after the successful device setup from the users.

 

Mount the STORM device

Gave instructions on: "How do I mount the device horizontally?", "Which direction does the device need to face?", etc.

 
 
Info Architecture 3@2x.png
 

Interface design

Wind icon design V1.0

The wind icon displayed wind direction and speed. Below was the development process. We chose “Concept B” for further development because the classic appearance made it easier to understand.

 
 
 
 

Wind icon design V2.0

To make it clearer, I pushed the development of the original concept.

 
 
 

Wind data integration

Here were three variations on integrating STORM data into the original data page. We chose the 3rd one.

 
wind data variations@3x.png

STORM installation guide

In order to make the installation guide easy-to-follow, I used illustrations to demonstrate the setup process.

 

Final Design

Data integration

Data integration final@3x.png

Add a STORM device

Setup1@3x.png
Setup2@3x.png

Assemble and Mount a STORM device

Mount1@3x.png
Mount2@3x.png

Data display on dashboard

dashboard screen@3x.png