Railroad Locomotive Icon
Overview
As part of my KCS modernization work, I redesigned the Locomotive Management System's locomotive icon.
In brief, the locomotive icon is critical part of the software used to manage, assign, and distribute locomotives between railyards. Distributing locomotives efficiently and planning for exceptions requires highly trained users. These users must be able to see what condition the locomotive is in at a glance. All the various colors on the icon represent different features of the specific locomotive. In a single icon, 19 different status' and features are displayed. Trained users can scan an icon quickly and understand what condition the locomotive is in and whether it can be dispatched.
Research
From a series of stake holder interviews and product demos, I discovered that the icon had a few shortcomings:
- Colors represent a status or feature with no other iconographic representation thus failing ADA compliancy
- Color constrast fails ADA compliancy
- The locomotive icon isn't always reliable. If a locomotive is being considered for a specific task, a phone call must be made to double check its status
Every railroad has their own locomotive icon. We were lucky enough to view another locomotive icon that is used regularly. Many of the details it contains have equivalents in the KCS icon.
Analysis
Color Contrast
My first step was to diagnose how the locomotive colors failed. In the image below I work to understand how the fill and text colors are used and where their contrast ratios fail. A particularly bad contrast ration is the pink and cyan color combination as well as the army green and dark blue.
Icon Deconstructed
The image below breaks down the icon and shows what color combinations are possible in each part of the icon.
Team Alignment and Understanding
Many user and stakeholder interviews were executed to gain understanding of how the locomotive icon was used and how locomotives were planned for. The screenshots below capture a variety of workshop acitivities that were done to gain understanding of the needs for the planning tool and locomotive icon.
Synthesis
Through various workshops and interviews, lots of feedback and business data was gathered. The following screenshots capture some of the design work created to better understand the needs of the business and locomotive icon.
The primary challenge for creating a new icon was that the users were so familiar with the legacy icon that any new icon had major pros and cons. The users ability to read the icon at a glance made introducing new colors or arrangement a point of contention. This required me to create multiple versions with varied color styling. The example below shows part of that process.
Along side the above version, which just changes color styling, I made the two version below. These versions introduce icons along side colors to provide additional visibility into the locomotive's status. The users were very receptive to these versions. and wanted to explore them further.
New Capabilities
On click, a modal opens with additional details about the locomotive. This modal will lead to less phone calls to double check the locomotive's status.
If a user clicks the events button on the icon, a modal opens with a detailed list of everywhere the locomotive has been and what event occurred. This can be as simple as a service event or an inspection.
Realization
View the final design used for active consist management and planning.
Final Icon Versions
There are 3 different versions of the icon for their varying statuses. In many cases, green means the locomotive is lead qualified and read to be used. Yellow often indicates that certain sensors or statuses need to be manually checked or confirmed. When a locomotive is in status red, it means that the locomotive has many known issues, is not lead qualified, and probably needs to go to the shop or be inspected.
New Icon Deconstructed
Unlike the old icon, the new icon utilizes ADA compatible colors and text to clearly communicate the varying statuses of the locomotive. Unlike the old icon, the new icon communicates more in a more clear and scannable way.
A planned shipment has many statuses to indicate its state. This got updated with the new styling. In the icon below, departure time, total number of cars, length, weight, tons covered, etc. Are all clearly communicated to the locomotive planning team.
.png)
