TRAX Modernization
Providing Shippers the tools to streamline the shipment search experience.
UI/UX DESIGN
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
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.
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:
-
Modifying and saving filter criteria and table layouts.
-
The number of available filtering parameters to refine a search.
-
Depth of available data on individual railcars and shipments.
Printed screenshots of each module, organized by highest priority.
What users disliked:
-
Cluttered UI with stacked accordions, leading to frequent misclicks.
-
Unclear what particular features do due to lack of context.
-
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.
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.
Whiteboarding the methodology and logic for filtering [above] and filtering benchmarks [below].
Whiteboarding how to save filters for reporting [above] and benchmarking [below].
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.
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. Basic design with a simple search and limited filters.
v.2 Google-style search function aimed at locating individual railcars.
v3. Filtering modal with categorized filter criteria. This would ultimately be the pattern used in the final product.
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.
9
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.
8
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.
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.