BACKGROUND
Railroad Management Systems (RMS) Intermodal is a railroad transportation company moving tens of thousands of shipping containers every day. The management was completely manual (i.e., radios, Excel spreadsheets, and paper documentation) which resulted in a range of inefficiencies across rail yard operations. To fix this problem, GNAR LLC. developed a centralized web application called Intrmodl.
MY ROLE | PRODUCT DESIGNER
I reused components to create more features for the product while updating & maintaining the design system. Using Figma and Google Suite, I created and shared hi-fi designs for client feedback and developer hand-off.
TARGET AUDIENCE
RMS Employees Ages 30-60
United States
DURATION
2021 | 1 Year
TEAM | GNAR LLC.
Brandon Stewart CEO + PO
Osman Pontes CTO + Full Stack
Andre Benatti Frontend
________________________________________
PROBLEM
BILLING SUBMISSION ISSUE
After the launch of the new billing feature during the start of my hire, there was an issue with yards not submitting their billing invoices on time.
The VP of Operations needed a solution to oversee all the yards' billing statuses without checking each yard’s billing invoice.
SOLUTION
USE CASE ANALYSIS
I first had virtual meetings with the product owner, full stack developer, & client to go through different use cases and find reasons for the lack of on-time billing submissions.
We found that we needed to condense each yard's billing invoice statuses in the “All Yards” view. For the VP of Operations to oversee all yards across the country and send timely reminders for submissions, this was the easiest solution to develop and push to production.
________________________________________
PROCESS
SIMULATING THE NEED
Before development, we wanted to make sure if this solution would convince yard managers to submit their invoices on time. Therefore, we started using an Excel document to track submissions and sent email reminders to yard managers who still needed to submit their billing invoices.
After a quick 3 days, we saw the benefit of using color coded statuses and comparing other yards' submissions in one view.
CREATING DESIGN OPTIONS
During our brainstorm meetings with the client, they mentioned old designs that were made early that year and not yet implemented. Using these designs, I explored different options reusing current icons & components or a new improved component.
EXPLORATION 1.0 | Bars Indicator
Similar to the previous designs, I wanted to use a color progress bar with thicker and easy-to-see sections. Using the hover tooltips, it would provide more information on the date & duration of the invoice. I also included a key to describe what each color represented and correlated them to different types of statuses.
EXPLORATION 2.0 | Bars Indicator with Text
Expanding on the previous option, I introduced a neutral grey color to show invoices that were currently in-progress. Without the need to hover, the date & duration can be easily read in each subset of the progress bar. With the idea to drop "Missing Billing Days", I decided to mix both visual features to ensure the table looked less cluttered and overwhelming.
EXPLORATION 3.0 | Show Last Month
With the idea of "less is more," I only showed the most recent status for each yard. For this design, I provided two types of tooltips with and without the key. I thought it would be a bit too redundant to provide the key for each row's tool tip and wanted to put the key in the tooltip for the column name "Recent Billing Status."
NO USER TESTING AFTER HAND-OFF
The final designs were chosen on efficiency - reuse current colored coded icons while implementing similar design aspects to Exploration 1.0. Due to the urgent need for yards to submit their billing invoices at the end of the fiscal year, I was not able to conduct any user testing on the final design.
Since this was a visual feature in addition to the “All Yards” view, it became an ongoing process of quality assurance testing to see if the statuses were correct in both “All Yards” view and each individual yard’s billing invoice.
________________________________________
CHALLENGES
COMMUNICATING DESIGNS
During weekly team meetings, I would present my designs with detail but with little or no notes written down. To mitigate repeating my thoughts and explaining the designs, I utilized text and digital sticky notes for the product owner's understanding & developer hand-off to ensure all parties were in alignment.
FOCUSING ON SMALL DETAILS
Earlier in this project, I spent more time perfecting the design before client feedback and deadlines. Focused on pushing out the feature quickly, I learned that it is normal to provide low-fidelity designs and important ideas are well-communicated.
________________________________________
FINAL DESIGN
OUTCOME
BILLING IS ON TIME
After over 6 months of the feature being pushed to production, we saw that there was a 92% increase of on-time billing submissions for each yard.
________________________________________
REFLECTIONS
SOLE DESIGNER IN A TECH STARTUP
Working in a tech start-up was a completely different experience compared to my former jobs. As the only designer, I learned to value communication and the ability to bounce off ideas with another person. Despite the fast-paced environment, I took more time outside of work hours to understand my team’s roles & improve my abilities as a designer.
