Author
Graeme Fulton
Project date
August 2015
Technologies
ThreeJS, Dust, NodeJS
Topics
IBMPortfolioJavaScript

The IBM Watson IoT Platform for the Internet of Things allows organizations to securely and easily connect devices, from chips to intelligent appliances to applications and industry solutions.

Working within a small design team, this project involved re-designing the Internet of Things Bluemix solutions page to:

  • encourage users to interact with a demo application embedded within the page
  • fit in more with the IBM Bluemix style guides

Before:

Previously, to launch the demo app, users had to enter a device name and 4 digit code into the two input fields which can be seen in white section of the screenshot below.

Upon submitting the form, an embedded app was launched, showing a virtual representation of a user's mobile device, mirroring the orientation of the device as they move it.

The purpose of the app was to demonstrate how data can be sent from a device over IoT platform, and visualized in the UI.

IoT Zone before

After some user feedback, we found users weren't inclined enough to try the sample app. We then modified the design of the site so that a preview of the app is displayed before the user has even connected their device, giving them a clearer overview of what was happening.

After:

New top section of page:

As well as having design input, I also coded the new layout of the page.

New demo app:

IoT Zone After

As well as rewriting the layout of the site introducing flexbox positioning, I also modified the code of the demo application, learning threeJS in the process to alter the theme and the 3D positioning of the block which would mimic the orientation of the phone.

Our changes went live in summer 2015, however the demo application section has since been superseded by the new discover, try, buy experience in late 2015/ early 2016.


See the site