TRAX Modernization

Providing Shippers the tools to streamline the shipment search experience.

UI/UX DESIGN

Main Prototype.png

Today's consumer market with next-day deliveries demands the need for highly optimized supply chains. More than ever,  Shippers need one place to access all their shipments with real-time visibility across various modes of transportation.

TRAX provides customers with the ability to track railcar shipments, monitor fleet health, and manage by exception. With the product reaching maturity in the product life-cycle, TRAX needed a major revamp to maintain relevance in the marketplace. 

ROLE

Interaction Design

Visual Design

Prototyping

Design Audit

DURATION

March - September

2020

TEAM

1 Designer (Me)

1 UX Researcher

1 Product Manager

10 Developers

TOOLS

Sketch

Whiteboard

Adobe Creative Suite

Zeplin

Miro

STRATEGY

Perspective Screens v2.png

PROCESS

Discover.

Ideate.

Prototype.

Test. Repeat.

This project definitely could not have been completed alone. 

On this venture, I led all aspects of design and design QA while my research partner

conducted all interviews and directed research strategies. Together we formed the UX team and

worked closely with Product and Engineering teams to ensure proper alignment throughout the project. 

Redesign the existing TRAX experience and enable Shippers to perform their tasks with ease. 

The new TRAX experience focuses on breaking up the murky lake of shipment data into meaningful, actionable pieces. Providing an advanced filtering module that allows 

the user to quickly narrow searches. Rethinking data presentation and 

allowing for customizable table views. Creating a data-hierarchy to

make drilling down into trip details more intuitive. 

All of this and more come together to provide an altogether fresh take on shipment 

visibility and management.

 
YouTube_loading_symbol_3_(transparent).gif

TONY STEDGE

CUSTOMER DISCOVERY

First, we needed to get a lay of the land. We started by mapping out existing features within TRAX and quickly realized that the 100+ modules in the product contained a lot of overlaps. We grouped the various modules into digestible functionalities and prioritized the groups by customer usage. 

We took the highest priority groupings and sought to understand how customers currently utilized the product. The majority of customers utilized Shipment Search on a near-daily basis. This would be our starting point of modernization.

What users liked:

  1. Modifying and saving filter criteria and table layouts.

  2. The number of available filtering parameters to refine a search. 

  3. Depth of available data on individual railcars and shipments. 

Mapping.jpg

Printed screenshots of each module, organized by highest priority.

What users disliked:

  1. Cluttered UI with stacked accordions, leading to frequent misclicks.

  2. Unclear what particular features do due to lack of context.

  3. Datatable UI makes it difficult to distinguish between Shipments, Trip Details, Car Details, CLMs, and History.

 

ENGINEERING DISCOVERY

Parallel to the customer interviews, I worked with engineering to select a tech stack (React, Angular, or Vue.js.) for the new TRAX experience.  

The legacy tech stack couldn't support specific interactions (such as drag and drop) and limited front-end CSS customization. 

I conducted an audit of all TRAX components and compared their relative availability on open-source libraries. My investigation highlighted component gaps from each tech-stack and helped Engineering select the tech-stack with the best alignment to our product. 

Google Material Components.png
Tech Stack.png

IDEATION

We focused on optimizing how users searched for shipments, given that users performed this action more than any other part of the product. We needed to simplify the shipment search experience while maintaining the vast number of details and that customers were accustomed to seeing. 

1. Filtering

 

Would we allow users to "build' a set of parameters based on [or] logic, or start with the entire data set and remove values based on mutually exclusive [and] statements? What filter layout makes the most sense? 

Our discovery sessions provided us insight that users would be more familiar with a filter-down model with mutually exclusive parameters. I also took inventory of all the existing filters and benchmarked other products' filtering patterns. 

Filtering Whiteboard.png

Whiteboarding the methodology and logic for filtering [above] and filtering benchmarks [below]. 

Filtering Benchmark 2.png
Saving Filter Whiteboard.png

Whiteboarding how to save filters for reporting [above] and benchmarking [below]. 

Saving Benchmark 2.png

2. Saving User Preferences

 

How do we improve the user's ability to identify and edit filter-combinations and table-layouts? 

The existing method for saving user preferences didn't delineate the difference between saving filters versus saving table layouts. Users found this interaction confusing, which was compounded by the fact that the workflows for creating and updating table layouts existed in separate locations. Benchmarking helped me understand successful patterns that would influence my later designs. 

3. Data Presentation

 

How should we break up the monotonous, high-density tables in the current experience without losing the benefits of detailed information?

We needed to identify the user's most significant data points to establish a meaningful data-hierarchy. I took what we learned about how users conduct searches to ideate which data to present at various stages in the shipment search process.

TRAX Pane.png
 

PROTOTYPE

Redesigning Shipment Search took many iterations. Earlier models mimicked retail shopping and Google-Esque searching patterns. Designs matured, featuring an advanced-filtering module with improved filter groupings and a slideover panel containing detailed trip information. I also incorporated white space and iconography in the datatable UI to produce more digestible sections of information.

v1 Prototype.png

v1. Basic design with a simple search and limited filters.

v2 Prototype.png

v.2 Google-style search function aimed at locating individual railcars.

v3 Prototype.png

v3. Filtering modal with categorized filter criteria. This would ultimately be the pattern used in the final product.

v4 Prototype.png

v4. Slideover panel with detailed information specific to the selected trip. This later iteration also included more eye-catching icons and chips.

 

TEST

We took the designs and presented them to users early and often. For these research sessions, my task was to help prepare relevant questions and to develop interactive prototypes that the UX Researcher could use during the interviews.

Each session would provide valuable insights that either clarified previous assumptions or supported intended UI interactions. We tested several designs internally and externally to ensure we received a wholistic perspective on which solutions provided the best user experience.

12 

 

external users from 9 different companies ranging in company size and industry. 

 

internal users across 7 different roles including sales, data quality, and customer success teams.

40+ Hrs 

 

recorded video interview sessions reviewing prototypes and performing discoveries.

 

unique prototypes flows  resulting
in over 130 screens utilized in testing.

100+ 

 

cups of caffeine consumed to fuel engaging interviews and detailed prototypes.

 

OUTCOMES

A revitalized Shipment Search experience featuring robust filtering, restructured data hierarchy, and shareable profile configurations. 

The newly configured experience was received positively by pilot users. Additional customers will continue to migrate to the new experience per product strategy. 

iMac Mockup.png
Macbook Mockup.png
 

REFLECTION

 

I truly enjoyed working on this project thanks excellent synergy between UX, engineering, and product teams. I led weekly check-ins that provided team members the opportunity to ask questions about designs. Despite working in different global time zones, we could pivot rapidly with new user research and scheduled regular design audits. I felt we all followed an agile mindset, making this project a treat.

This project taught me the value of strategizing product improvement before jumping into designing. The mapping and prioritizing efforts taken at the start of the project provided a roadmap of which features to focus on first, starting with Shipment Search. As I began designing the next feature, the company underwent an external acquisition, resulting in my reassignment to a different team. I am grateful that we prioritized the Shipment Search functionality because I provided the highest impact by focusing on this module first. 

My exceptional teammates for this project include Eva Abella, Senior UX Researcher, and Conan Zhang, Product Manager. Also, shoutout to the many talented engineers who worked on this project: Lakmini Amararathne, Chaminda Vitharana, Shalika Liyanage, and others. 

NEXT: DASH