Rebekah Champa
Senior Product Designer and UX Strategy Leader based in the Austin, TX area
Shipment Overview (Vision)
AUTUMN 2023
Scope
Small (3 mo.)
My Role
Primary UX Designer on a team of 4
Platform
Responsive to multiple Desktop sizes with mobile considerations
Tools
Figma, Google slides
Project Summary
This vision project was executed to provide stakeholders with solutions that allowed our growing freight brokerage to expand and support complex shipping scenarios such as multi-vendor, multi-payee, intermodal, and cross-border (international) shipments.
Objective
Create "vision" comps to present to stakeholders demonstrating possible solutions to rapidly upcoming anticipated problems as we grow the business.
Success Metrics
-
Figma comps that demonstrate a deep understanding and presentation of possible solutions to the upcoming issues we anticipate facing in the coming 1-2 years.
-
Stakeholder sign-off on the project so we can start building and implementing
Results
Our vision project was successful in getting sign-off from stakeholders to build out the "NextGen" redesign of our load overview into a more comprehensive "Shipment Overview" that could handle our future use cases.
Research
Load Ops Service Maps Research Project
Our extensive research project included many shadow sessions, user interviews, user testing and validation and stakeholder validation. See the entire research project that was used to guide this work!
Team Collaboration
During the research and validation process, we collaborated across many teams and across the entire design/PM org to make sure we were not missing any blind spots. We presented and asked for feedback weekly in our design reviews. This helped us generate and also weed out ideas and concepts before presenting options to the stakeholders and users.
Current State Audit
The "Before" Experience
I took an audit and lost of screenshots of the current state in various use cases and statuses. Then I broke it apart into pieces so I could play with the information hierarchy and layout.
The Groundwork
Identifying a New Framework
Because our business was expanding into new areas we haven't been before, we had to rethink our entire load model to include many more use cases such as intermodal, international (cross-border), multi-load shipments, and multi-payee cases. A simple "load overview" was no longer working. We decided to start at square one, define our terms, and get an idea of all the potential use cases we would encounter. We worked our way through the simple, most common cases to the more complex cases.
Initial Wireframes
Explorations
Because this was new territory, we explored many different layout options for our shipment overview that we later presented for feedback to various groups.
Visualizing the Shipment
We explored multiple ways to help reps visualize the entire shipment (helpful for complex shipments) including the ability to add and remove stops and edit shipment details.
Navigation
We explored both horizontal and vertical navigation and looked at factors such as scalability, ease of use, translation to mobile, and workflow prioritization for the reps (was the layout helping their workflow).
Iterations
Multiple Use Cases
We needed to account for multiple use cases like a multi-load transload (an international load were the truck must be physically unloaded from a truck and reloaded to another truck that is authorized to cross the Mexico border) which involves at least 2 carriers, a direct cross-border load, a domestic full truckload (FTL), and a multi-vendor or multi-payee view for accounting.
Vertical Tab / Horizontal Tab / Details Combo
Showing the next iteration including vertical and horizontal shipment navigation options.
Presenting and Getting Feedback
Presenting to Stakeholders
During our process, we presented many of our iterations to stakeholders and business leaders to demonstrate our vision for the future. We met with them weekly in order to steer our designs in the right direction and discuss the ins and outs of each design concept. Because of the broad nature of this project, we did not feel it was necessary to involve very many users at this stage until we had narrowed down our vision to a few options.
Getting Feedback
We compiled and documented all feedback from designers, PMs, stakeholders and users into Confluence documents and comments in Figma if they related to a specific design.
Future Steps
This vision project helped us define a future and a roadmap for the coming year. It helped us prioritize user and business needs and accommodate the growing pains of the future. Along with our vision work, we provided "interim" steps from our current load overview workflow so that we could "rebuild the plane as it was flying" so to speak.