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. Shippers are seeking a unified platform to seamlessly manage their shipments, with real-time visibility spanning diverse modes of transportation.
Enter TRAX – a solution empowering customers to effortlessly track railcar shipments, monitor fleet health, and efficiently manage unexpected edge cases. With the product reaching maturity in the product life-cycle, TRAX needed a major revamp to maintain relevance in the shipping industry.
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.
For this project, I led design creation and design QA, while collaborating
closely with my research partner who spearheaded interviews and guided
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 reimagined TRAX experience is centered on transforming the complex reservoir
of shipment data into clear and actionable insights. Featuring an advanced filtering
module, users can swiftly refine searches, enhancing efficiency. A complete
rethinking in data presentation introduces customizable table views,
offering users a tailored workspace. Additionally, a new approach to
data-hierarchy utilizes an intuitive drill-down process, making trip
details easier to find.
These enhancements come together to provide an altogether fresh take
on shipment management.
CUSTOMER DISCOVERY
At the outset, we started by mapping out existing features of the product. This exercise revealed that the 100+ modules contained significant overlaps. We organized these modules into coherent functionalities and prioritized them based on customer usage patterns.
We took the highest priority groupings and sought to understand how customers currently utilized the product. A key observation emerged: a majority of customers engaged with the Shipment Search feature on a near-daily basis. Recognizing this as the highest impact function in the product, we strategically started the overhaul with this insight.
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 collaborated with the engineering team to make the crucial decision on the tech stack for the new TRAX experience, considering options like React, Angular, or Vue.js.
The legacy tech stack posed limitations, particularly in supporting specific interactions like drag and drop, and it constrained front-end CSS customization.
To address these shortcomings, 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 played a pivotal role in guiding Engineering to select the tech-stack that best aligned with our product requirements.
IDEATION
Our primary focus was on optimizing the shipment search functionality, recognizing that users interacted with this feature more frequently 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
First, I needed to determine the type of filtering logic to utilize. 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 ([and] logic). I also took inventory of all the existing filters and benchmarked other filtering patterns.
Whiteboarding the methodology and logic for filtering [above] and filtering benchmarks [below].
2. Saving User Preferences
Next, I needed to determine how to identify and edit filter-combinations and customize table-layouts.
The existing method for saving user preferences lacked clarity in distinguishing between saving filters and saving table layouts. This ambiguity resulted in user confusion, further exacerbated by the disjointed workflows for creating and updating table layouts. With additional benchmarking, I gained insights into successful patterns that would significantly influence my subsequent design decisions.
Whiteboarding how to save filters for reporting [above] and benchmarking [below].
3. Data Presentation
Lastly, I needed to consider how to break up the monotonous, high-density tables in the current experience without losing the benefits of detailed information.
I 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
The redesign process for Shipment Search underwent numerous iterations. Initial models drew inspiration from retail shopping and Google-esque search patterns. As the designs evolved, they embraced a more advanced filtering module with enhanced filter groupings and a slideover panel providing detailed trip information. I also incorporated white space and iconography in the 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
I adopted an iterative approach by presenting the designs to users early and often. My responsibilities involved preparing design-specific questions and developing interactive prototypes for use during testing.
Each session yielded valuable insights, either refining previous assumptions or confirming intended UI interactions. We tested several designs internally and externally to gain a wholistic perspective on what would produce 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.
Pilot users responded positively to the newly configured experience, signifying a successful initial rollout. As per our product strategy, additional customers are poised to migrate to the revamped experience, further solidifying its positive reception within our user community.
REFLECTION
I truly enjoyed working on this project, thanks to the excellent synergy among the UX, engineering, and product teams. Leading weekly check-ins, I ensured team members had the opportunity to ask questions about designs. Despite operating in different global time zones, we could pivot rapidly with new user research and scheduled regular design audits. I felt we all aligned to the same agile mindset, making this project a delightful experience.
This project taught me the value of strategic product planning before diving into the design phase. The mapping and prioritizing efforts taken at the start of the project provided a clear roadmap of which features to focus on first. As I began designing the next feature, a company acquisition reshaped the landscape, resulting in the handoff of this project to a different team. I am grateful for the foresight in prioritizing the Shipment Search functionality, as this initial focus resulted in the highest impact for the project.
My exceptional teammates for this project include Eva Abella, Senior UX Researcher, and Conan Zhang, Product Manager. A shoutout also goes to the many talented engineers who worked on this project.