Brief
Task
Update the following designs for pitching to the engineers to modernise the visuals and improve the usability.
Considerations:
The context of this case is navigation tools aboard large vessels such as freight ships. The command areas of these vessels have a large number of equipment and navigation aids which are used for reference when sailing and berthing at the docks.
This means that any design should not be overly distracting and ideally the most vital elements can be scanned from a distance.
A day, night (ideally also) dusk mode would be ideal in helping the operators use this equipment without it causing eye strain or safety hazards.
Evaluation of current UI:
Good:
- The use of the ship icon is a good illustrative way to show direction.
- Showing the direction of the ship movements.
- Showing the distance from the berthing point outside the boat.
- Using the traffic light system to show the system overview is helpful.
- Potential warning scenarios do not cover any other important areas.
Bad:
- General design inconsistencies.
- Placement of the Traffic light panel changes on every page.
- Different data points in Speed and Berthing pages are showing in the same place which can be misleading.
- Two different methods of showing the Boat Heading, if a larger and smaller module are needed they should show design consistency.
- Label Size is too small and some labels don’t exist which means that for new trainees the numbers are hard to remember and therefore increasing training time.
- The spacing of elements in some areas is poor giving the impression that some elements which are not, are connected.
- Lack of consistency with showing and not showing units.
- Lack of urgency shown in potential warning scenarios.
- Using Port (Green) and Starboard (Red) for positive negative degrees when they are also used in the Traffic Light section - Incorrect assumption.
- Less of a criticism but there is not much context in why the clock is placed above the Traffic Light alerts.
- Buttons for navigating tabs are very small, and the Default and Active status don’t have a noticeable difference.
- The speed page shows three numbers under Speed Over Ground but does not explain what they are.
Summary
Consistency of Elements
Building consistency of the elements is important so the user can quickly understand what information is being presented. This will also improve the visual feel of the dashboard.
Labels and Units of Measurements
All data points should be clearly labelled with the units of measurement to avoid any misunderstandings in interpreting the data and preventing errors. By educating the user, they will learn to scan the dashboard numbers in a faster time.
Light, Dark and Dusk Mode
Three colour palettes to aid the user when using the dashboard in different lighting conditions. This can be implemented by allowing the user to switch themselves or by using a light detection system to automatically change at the appropriate level.
Dashboard Component flexibility
Creating small and large versions of the same dashboard components allows more flexibility in the future to add secondary datapoints if required.
Initial thoughts:
- Could a dashboard be made showing a primary and secondary data screen
- How can all the elements be packed down to crate essentially a mini design system
- Can the ship be shown at the correct angles in a visual way
- Do Speed and Rate of Turn need to be separate pages? Could these be one combined page?
- Specific heading for each box that also displays units
- Map with vessel position overlaid on a map - showing where waypoints are?
Questions and Design Process thoughts
- Will this be used on one size of device or will the layout change depending on the vessel?
- A testing phase using trainees with the old and new design to understand improvements in the Time to Understanding for new users.
Research
I had a call with an engineer friend of mine working with a sustainable maritime vessel company to validate some assumptions and receive some clarity on some knowledge I was missing. Through this I was able to understand that it was unusual that all datapoints are not labelled and that it is common practice to place the units in the label.
He also believed this could cause training efficiency deficits by increasing the time to understanding of what each values represent.
We were also able to determine the different horizontal values in the speed area were likely to be the front and aft of the boat which also corresponds to the berthing visual due to the different locations of propellers.
Inspiration Elements
I tried to source inspiration from both physical and digital systems that could be found searching for vessels and meter systems online to give an indication of colours, layouts and methods of visualisation used.
Early Sketches and Wireframes
Trying to understand how different layouts can be used to incorporate parts of the design and improve consistency on the dashboard pages. Here I tried to discover ways that important data points could be aligned and that consistency could be improved by grouping relevant compnents.
Design System
To make a flexible system that can incorporate a modular approach and ability to use day modes and night modes. I started to build a design system influences by the brand colours and inspiration elements shown in the inspiration section above.
The design system gave a solid platform to build the different lighting versions.
Final Designs
I opted to use the dimensions of an iPad Pro for the mockups to give the idea of a reasonably sized device for this tasks.
Labels and units
As this was a big issue in the current design. I wanted to make sure all areas had readable headings and units.
Alert system consistency
I brought the elements used on all pages (Logo, Menu, System Overview - the alerts - and new Lighting Mode) into the Sidebar so they were consistent on all screens.
Lighting modes
Although difficult to implement with high attention to detail in a short timeframe, it allowed me to create the different lighting modes for Day, Dusk and Night.
Berthing Page (Side by Side)
Separation of Data
I assumed that it made sense to group together the different data groups (Direction & Turning, Speed Over Ground and Distance from Quay).
Labels and units
This dashboard was the messiest in terms of missing units and unlabelled data in multiple places. So after calling a friend we were able to determine what they referred to.
Note: Except distance run. Which would be easier to incorporate if I knew what it referred to, so I removed it in the meantime.
Quay detail
I wanted to show where the numbers in the berthing diagram referred to, so I used lines and “Quay Wall” diagrams to show which direction the boat is moving towards.
This is because I felt that the current design was very unclear with this.
Final Thoughts
Understanding data groupings
It was hard to understand some of the data elements to know how they grouped. This was challenging.
Copywriting
Trying to write using nautically correct but humanly readable terms was quite difficult in some places. The lengthy copy put some strain on the design system elements.
“Missed the boat” on Speed page
My weakest design, from my perspective, was the Speed page. I removed the Boat background from the design as it made the different in speed terminologies and labels difficult to show.
However looking back, I feel like I missed the boat on that one.
Final word
Overall I am satisfied with the changes I did make in a short time. I would like to have worked with some of the more challenging elements (Compass Heading and Rate of Turn) for longer but I prioritised elsewhere.