Company: Alpha Ori Technologies/Zero North
Role: Full-Time Employee - Lead Designer
Date: October, 2017 - July 2025
Tools: Adobe Creative Suite, Figma, Proto.io
PROJECT OVERVIEW
SMARTShip is an iOT Platform whose SaaS business model serves the cargo shipping industry. In an industry first, SMARTShip sensors are installed on virtually every system on a cargo ship–the navigational equipment, engine room machinery, the hull, and the cargo system. Vessel Performance is boosted through insights from more than 5,000 data points. This essentially digitized the industry and is the industry leader. Organizations saw immediate value in the platform and with over 600+ installations and growing Alpha Ori Technologies merged with Zero North with a $100M+ exit purchase.
THE CHALLENGE
Before SMARTShip, cargo ship operators relied on data provided by logs and reports that were manually entered at the end of each voyage. This was not only a cumbersome, error-ridden, and inefficient way to evaluate the performance of a vessel, but also made it slow to address or even identify issues.
USER RESEARCH
Working with early adopters as part of pilot projects, we used qualitative interviews to help define product requirements. There were also many former ship engineers and industry managers working as product managers at AOT.
The Target User
We identified four different user types for SMARTShip
- The shore-based company executive
- The shore-based shore manager
- The ship captain
- The ship engineers
Our UX Strategy
Each user type had varying degrees of technical knowledge and experience. We (SMARTShip Product Managers and me as the sole UX Designer) designed over 10 applications addressing different aspects of vessel operation and created one User Experience that satisfied the needs of each user type. Careful Design and attention to detail was paramount.
|
DESIGN PROCESS
|
||
|
What the User Needs
|
Our Business Goals
|
Core Technical Requirements
|
USER FLOWS
Users were happier with less clicks to get to necessary information so we kept user flows for essential tasks down to 2-3 screen clicks.
|
|
|
|
|
|
EARLY DESIGN
After having established the capabilities of the system, we created a straightforward, categorized way to access sensors with information architecture that replicated universal vessel system architecture. The design evolved over time.
VIGILANT IMPROVEMENT
In addition to an iterative process during design and development, we conducted user research after each release to gauge customer sentiment and feedback. Because of the number of clients we had, we used
TAMs (Technical Account Managers) who I trained how to gather feedback on UX improvements. Here is a sample of a user satisfaction survey we took in 2025 using Lyssna.
3D MODELING/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.
PROTOTYPE - SENSOR VALUE ANOMOLY DETECTION
We first used proto.io and then moved to Figma. Below is a simple Javascript I created to show temperature deviations of cylinder temperatures. Set the Temps below to anything higher than 450
Cylinder 1 exh gas out temp:
Cylinder 2 exh gas out temp:
Cylinder 3 exh gas out temp:
Cylinder 4 exh gas out temp:
Cylinder 5 exh gas out temp:
Cylinder 6 exh gas out temp:
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.
DESIGN CHALLENGE
Create a dialog that heightened the user experience in a more illustrative and interactive way that delights the user.
FINAL DESIGN - SMARTShip GO MOBILE APP
SMARTShip GO Mobile app available on iOS and Android. We went through each application on the desktop version, and through user research we tailored the design as a companion with only the features that would benefit the user when using a mobile.
FINAL DESIGN - HULL PERFORMANCE
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.
FINAL DESIGN - SMART ANALYTICS
Analyzes the runtime of all systems on the ship. Arranging the data in a hierarchical, User-centric design was the challenge.
FINAL DESIGN - SHIP SYSTEMS MANAGEMENT
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.
FINAL DESIGN - CHARTER PARTY
The Charter Party app 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.
STYLE GUIDE
I maintained design consistency throughout SMARTShip with specifications on Typography, colors, buttons, and their usage. I designed all tokens, buttons, windows to be used in components I created.
|
Typography We used Google Play font throughout SMARTShip as well as a custom font I created to display KPI numbers for certain designs. |
|
|
Primary Color Palette These are the primary colors used for generally used UI elements throughout SMARTShip |
|
|
Charts Color Palette This is the color palette used when displaying multiple chart lines throughout SMARTShip. The challenge was creating a palette that worked both on light and dark backgrounds. |
|
DESIGN SPECIFICATIONS
Sample of design specifications provided for UI component production.
LOADING ANIMATION
I wanted to achieve the look of water flowing in this loading animation.
