ANGELA.
PRODUCT | BRAND | GRAPHIC
JRCS CO. LTD
OPS alarm system
INDUSTRY
Maritime
TIMELINE
2023-2024
TEAM
project manager | designer (me) | software developers | hardware engineers
SERVICE
uiux design | web design | application design | responsive
What does this company do?
JRCS has provided power and automation solutions to over 8,000 vessels 50 years and running. One of their various products include an advanced alarm monitoring system that enable engineers to effectively oversee the health and performance of the vessel's machinery and electrical systems.
I was brought on to the team to improve the application ease and effectiveness of the previous alarm monitoring system, SMS-55. This included to revamp the UI design as well as seek solutions.
What is the purpose of this alarm monitoring system?
The core concept behind this application is to enable engineers on large vessels—like tankers and cargo ships—with the tools necessary to optimize overall vessel performance. The newly designed application highlights these discrepancies and employs a color-coded system to reflect the severity of each issue, ensuring that critically prioritized information is immediately comprehensible.
Key feature: Customizable dashboard
The most prominent feature that addresses our users needs is our customizable dashboard. In this way, each role, whether you are a chief engineer overseeing the entire operation or an engineer assigned to monitor specific data collection, can curate a selection of data information that pertains to their focus. Users are then immediately provided with priority data upon logging in, so no additional navigating will have to be done.
I conceptualized the card layout design and the procedure to add and edit the dashboard display screens and made it adaptable to various screen sizes.
Key feature: Customizable data
Our OPS also consist of other features that users can customize, such as the graphs, trend data, and channel groups (channels are the sensors that are connected to all of the vessel's systems). For this version iteration, I revamped the UI and interaction designs for these existing features.
Problem
The previous alarm monitoring system, SMS-55, was initial built without considering user impact, resulting in disorganization and navigational difficulties. The navigation copy was unclear and there was no systematic color usage for the overall application. In addition, the landing page was the organization of sensors that collected data, and users would have to navigate through to view the necessary information. The alarm system is highly concentrated with a multitude of data, and the lack of a centralized overview/landing page further complicated users' ability to obtain a clear understanding of the alarm system's overall status.
Pain points
Confusing navigation copy
Intricate interaction with application
No systematic color use
Lack of overview of complex system
Persona: 1st, 2nd, and 3rd engineer
In many Japanese maritime organization, the engineers who run and maintain voyage mechanics are assigned a numerical value, whether they are the 1st, 2nd, or 3rd engineer. Each engineer is usually assigned a specific area of focus and would report back to the chief engineer who oversees all operations. For example, the 1st engineer can be assigned all electrical parts while the 2nd assigned cargo.
Each engineer will report to the chief engineer about current status of related system parts.
Need: To easily access specific data within the entire database.
Process
The design process did adhere to strict technicalities such as ship classification and hardware structure design.
Revamping the navigation architecture
We reorganized the navigation for more clarity and organization. The two most prominent updates were as follows:
Combine "Summary" (ongoing alarms) and "History" (alarm history and alarm operations log) under the umbrella of an "Alarm" page. When clicking that, users will land on the page with ongoing alarms as those have the most time-pressure.
Include a landing page with ship performance and health overview.
Takeaway: Role based customization
In lieu of multiple use cases for this application, it was imperative that we consider some form of user customization to allot efficiency of obtain necessary information. This will allow users to make easy changes to the dashboard to prioritize information and reduce the need to sift through the application.
Customizable dashboard page
Custom graphs
Development handover: Responsive design
As the team's designer, I established the application's design system while maintaining the product branding integrity. Although we were set on a default screen size for the console structure, I established the responsive breakpoints to consider screen size customization (should customers make specified screen size request).
Development handover: Components
In addition to establish the responsive design, the design system also included necessary components, and their specific states.
Reflection & Takeaways
This project presented the team with the challenge of creating user-friendly solutions tailored for a niche audience. This required us to build our skill set and knowledge in the following areas of expertise:
We focused on converting complex data into visually engaging and easily digestible content, ensuring that users could access vital information quickly and effectively.
We greatly considered the parameters in which the hardware supports the design. This included understanding the functionalities of physically engaging with the screen as well as the positioning of the screen in congruency to the user within the engine room.
This project called for a thorough understanding of the hardware components that the alarm system was composed of. As a result, consistent collaboration amongst the software and hardware engineers was essential for success and ensuring effective communication throughout the development process.
Other projects
ANGELA LIN DESIGNS
@2025