ANGELA.
PRODUCT | BRAND | GRAPHIC
JRCS CO. LTD
iCreate:
Alarm configuration
INDUSTRY
Maritime
TIMELINE
2023-2024
TEAM
project manager | designer (me) | software developers | hardware engineers
SERVICE
uiux design | web design | application design | responsive
What prompted this project?
This project was part of a larger initiative to rebuild the alarm system (see OPS case study for more details). For the OPS application to function effectively, our technical team at JRCS had to ensure its proper setup. Each client's ship has unique specifications that the alarm system must accommodate. Our mimic designers are responsible for configuring the alarm system and deploying these customized settings to the vessel servers. Our development team collaborated closely with the mimic designers to identify challenges they face when performing these tasks, and devise improved solutions for those posed challenges.
Process auditing
Since we had direct access to our users, we made it routine to regularly review our current progress every two-three months. We initially had an initial interview to better understand our users routine and process to configure the vessel specific alarm settings and have that sent over to the customer's server.
Pain points
Designers were required to work with separate applications to configure alarm settings for customers, which in turn required users to keep track of all of their imported and exported files.
Users had to account for the files they created, taking more time and unnecessary effort to maintain organization.
Much of their work was performed on individual desktops, complicating collaboration and information sharing among team members.
Needs
Reducing the unnecessary effort of having to utilize separate applications and having to constantly import and export files.
Ability for all teammates to be able access the same information.
Error prevention is of the upmost importance. If an alarm is not configured properly, it could lead to life threatening situations (i.e. fire, pirates, etc.).
Initial response to current procedure issues
In response to these pain points, we ideated for a cloud-based solution to consolidate all essential tasks onto a single platform, enhancing efficiency and teamwork. This included the ability to maintain all customer alarm settings, as well as draw mimics (digital blueprints of vessel systems).
Project organization
We started broad with just the function of setting up the basic requirements of a vessel configuration and having that deployed to the customer server, as that is the whole premise of this solution. It was also during this time we considered some primitive ways to prevent error, such locking the vessel configuration folder for only one person to edit (below, left), and also setting up parameter to have the work peer reviewed. I drew up the user journey to refine the steps (below, right) and also considered the access state of the vessel configuration at each step, from the start of editing/updating the configuration to then sending it off to our customers (below).
Competitor analysis
Since it was a technical requirement for users to be able to draw mimics and be able to configure those images to the alarm sensors so it can display real-time data on the actual alarm monitoring screen, so I outsourced to what was currently on the market to compared that to our users specific needs. I especially drew inspiration from Figma, although in Figma you cannot really configure anything other than basic animations.
Ideations and wireframes
With the frame work set and the organization of required features thought out, I began building grayscale mockups. These mockups were demoed to our designers to gauge their engagement with the product. We received positive reaction of the direction of the project, and collected their feedback to further refine the process and design for finalization. These are some of the solutions we shared with the team:
Project folder creation and organization that all members can access to view.
Each vessel has it's own folder/portfolio of sensor data, mimics, and alarm screen settings that can be continuously updated.
Once settings have been adjusted to meet the vessel requirements, users can easily send it over to the customer.
Customer folder organization
This application allows users to view all vessel configurations, which are further organized by vessel proprietorship. Users can create "Shipyard" folders to effectively manage and categorize the various ships that are integrated with OPS.
Each ship is uniquely designed with specific structures and specifications tailored to its type, size, and intended use. Consequently, each vessel requires customized alarm settings. Within the "Vessel" folders, we can configure and deploy these settings, along with all essential files, to the ship's server.
Interactive blueprint drawing tool made easier to implement.
A requirement of this application was to build out a mimic (ship blueprint) editor tool. I designed out pre-made assets and components to shed precious time to build out beforehand. Having pre-made assets also ensured design consistency across our images and in the case our users may not have the drawing skills, they can still ensure the images are still build with quality.
Real-time alarm setting update status
All users, regardless of editing access, would be able to view real-time status for each vessel configuration and at what stage the version is undergoing from the start of the update to sending the version to the customer.
Design system
As the sole UI designer, I established the color scheme and developed essential components for the creation of iCreate. Since we opted to utilize both light and dark background colors, I built out a foundation design system that adhered to both light and dark modes. In addition to the general components, I also designed and exported reusable assets that would shed copious amounts of time to build interactive mimic drawings, all the while maintain product branding. The assets were purposefully drawn to be simple for functionality purposes.
Outcome
With direct access to users, we collaborated closely to thoroughly identify their needs and pinpoint areas for improvement in the version deployment process. We tested the timespan it takes to build out a mimic image, and compared that to the previous process time. It was noted that the time significantly decreased 3x.
In addition to the positive impact, the initial iterations of the application were presented to the board, where they garnered positive feedback on the overall concept and direction.
Other projects
ANGELA LIN DESIGNS
@2025