Utilising sensor data in shipping is essential for enhancing operational efficiency, safety, and environmental sustainability. Sensors provide real-time insights into vessel performance, fuel consumption, and cargo conditions, allowing for proactive maintenance, optimised routing, and reduced emissions.  This UX was divided into different apps that measured performance of different aspects of the vessel. The overall look and feel of SMARTShip was a Science Fiction theme.

SMARTShip GO mobile app I designed the accompanying mobile app for SMARTShip and the challenge was displaying necessary data based upon actually how much the user needed in the mobile form factor. This was done for each app in SMARTShip.

Fleet view shows the map and location of all vessels. Custom notifications based on sensor data is displayed here so that the user can quickly see any issues that need to be addressed on any ship in his/her fleet.

Four different user types. There were four different user types for SMARTShip. All wanted to see necessary information on screen and did not like clicking back and forth so we created a left-to-right data hierarchy that catered to each user type. This is the pattern I followed throughout SMARTShip's design.          

Asset AI views the health of vital ship systems. Using artificial intelligence, SMARTShip can predict maintenance schedules. Each "asset" (mechanical component) of the vessel generates a health score based on sensor information of the operation of it.  This is compared with what's called a "Shop Trial" that is data on how the asset performed when new.  "RUL" is "Remaining Useful Life" of the asset. I had to come up with a visual method to display this information.          

3D Model - Cargo Ship Engine Animation I created a 3D model of a particular 6-cylinder engine for a design study to illustrate sensor position and anamolies within the engine. The idea was to illustrate through the animation the RPM of the vessel, intake, exhaust, and cylinder temperatures. I also created a simple Javascript demonstration to illustrate this idea below.

Loading animation. I wanted to achieve the look of water flowing in this loading animation.

Navigational Challenge As SmartShip progressed and the number of apps started to pile up, we started to run out of room for them in the navigation bar. The easy solution was to place these additional apps into a submenu. However, given that different users that have different priorities would like to have easy access to apps that were important to them, I came up with, designed, and prototyped a customizeable navigation bar using click, drag and drop within SMARTShip.

Hull Performance of the hull is vital to fuel efficiency.  In this design, we wanted to illustrate to the user an overall assessment of the condition of the hull.  Clicking on different key performance indicators under the gauge would change the color gauge in an illustrative and delightful visual.

Hull Performance Design Challenge Create a dialog that heightened the user experience in a more illustrative and interactive way that delights the user.

Smart Analytics analyzes the runtime of all systems on the ship.  Arranging the data in a hierarchical design was the challenge.    

Ship Assets  provides an overview of operating systems on the vessel.  In order to compartmentalize the data shown the blue dots around each system showed more information when clicked.

Charter Party measures usage of fuel during each voyage is monitored closely as there is a pre-determined amount of fuel allowed. Going over that amount breaks the "contract" set. We came up with the use of "traffic lights" that gives the user a quick overall assessment for each data point in the voyage.

Sample of design specifications provided for UI component production.