Designing a universal platform for freight carriers to find, bid, book and manage loads
UBER FREIGHT • DESIGN • RESEARCH
About the project
A carrier portal is a platform where freight carriers (who are transportation provider) go to look for loads and opportunities to haul goods for shippers ( Which are typically companies who needs goods shipped, think Walmart, Homegoods). It is a platform where carriers can look for loads / opportunities that are listed by the shippers then proceed to book, bid and manage those loads
3PL + 4PL Use cases
This particular projects aim is to design a universal carrier portal that can be use across two types of carriers, 3PL (brokerage) and 4PL (Managed Transportation) carriers
Content
Menu
Role
My role was to focus on designing the Load board to effectively communicate load details and requirements as well as designing the core user flows to book, bid and manage those loads
Project Goals
Deliver great universal experience
One of our biggest goal was to deliver a great, well balanced and nuanced experience for the two subset of users which can be quite challenging as they have different workflow and priorities
System oriented design
Due to the highly complex nature of the product and its information structure,having a system oriented design would help provide the platform a scalabale foundation for future offerings
Communicate details efficiently
Learning from competing products and legacy offerings, we observed an opportunity to reorganize information to a more effective hierarchy to communicate details more effectively
Process
USER
RESEARCH
EXPLORATIONS +
IDEATION
MOCKING UP+
VISUAL DESIGN
INTERACTIVE
PROTOTYPE
ENGINEERING
HANDOFF
User Research
Legacy TransPlace FAM board/ 4PL carrier portal (Acquired by Uber Freight)
In the initial phase, user research were conducted with both 3PL and 4PL carriers to understand how are they using the legacy 4PL products (acquired by Uber Freight) and the pain points they are facing using them. In subsequent phases of user research, user interviews were conducted to validate various design explorations where interations of various concepts were shared with carriers and in the final stages, UATs / usability tests were conducted with carriers on the final prototypes
Nearly all interviewees cited poor usability as a pain point, specifically use of space and inefficient display of information
“It is not a site that our operations team has ever liked, It is really sad to me because Uber Freight is a great
partner for CFI”
Jacqueline Kopp - CFI, 4PL Carrier
In subsequent phases of user research, user interviews were conducted to validate various design explorations where interations of various concepts were shared with carriers and in the final stages, UATs / usability tests were conducted with carriers on the final prototypes.
Core painpoints identified
#1 Excessive information
Upon interviewing carriers who were using the legacy carrier portal, we found that 4 out of 5 of the carriers we interview brought up that there were an excess of unnecessary information on the page, creating unwanted noise and making it difficult to scan for important information
#2 Inefficient order of information
Apart from the excess of unnecessary information, carriers also brought up that the order of information / columns were inefficient, making it difficult to locate key information burried on the far right of the table
#3 Excessive horizontal table overflow
As a culmination of painpoint #1 & #2, carriers brought up that they had to sometimes perform excessive horizontal scroll to access key information
#4 Difficulty tracking bid statuses and updates
In subsequent phases of user research, user interviews were conducted to validate various design explorations where interations of various concepts were shared with carriers and in the final stages, UATs / usability tests were conducted with carriers on the final prototypes.
Explorations
To begin laying the foundations for the new design, the PM, Design Manager and myself brainstormed on what were the key load details we needed on the portal, we audited existing details, aggregated and prioritized the details for what was essential for the carriers.
Addressing painpoints:
Excessive information
After auditing and collecting all the information required to be surfaced to carriers, I reorganized the order and layout of information in a way which makes the content more consistent across various pages making it easier to parse and scan through
Wireframing and Sketching
After arriving at the foundations of a new information architecture, I started sketching and exploring a few new ideas of what a new load board could look like.
Above shows an exploration where all information is layed out with most important information from left to least important information to the right. CTAs are embedded on the far right of the table
Another iteration where I explored showing only core information within the table and embedding bidding and booking CTAs on a seprate panel when a load is selected
Addressing painpoints
Upon further explorations, key user pain points were revisted and tackled. Iterations for each of the solutions were designed and discussed with the design team and cross functional stakeholders below are the final designs chosen to solve each painpoints
Addressing painpoints:
Excessive information
After arriving at the foundations of a new information architecture, I started sketching and exploring a few new ideas of what a new load board could look like.
MOBILE FLOW
After the solution was chosen, I continued to elaborate on the overall mobile flow, organising pages to arrive on the best flow and process for the best experience.
MOCKUP + VISUAL DESIGN
Color palettes and typography as well as design patterns were shortlisted using material design for the style guide. The initial designs featured a curved accent for the header background, transparency, shadows, blue color palettes and card patterns.
Previous
Next
GRID + MODULAR SYSTEMS
A fractional grid system was deployed to organise the UI elements, The overall design was thought through to share the same grid and retain positions of certain UI elements to embrace continuity and familiarity for a better experience.
DETAILED USER FLOW - OVERVIEW
The above shows the overall detailed user flow with mockups of each screens and highlighted segments of individual features.
DETAILED USER FLOW - SEARCH
After curating relevant categories of organizations, the search tool introduces a feature to help solve another problem on the user journey process - checking to see if it permits schedule. A feature not available on existing platforms.
Students can toggle thier available days below the search bar to show organizations that permits their schedule. Solving another pain point in the user journey.
DETAILED USER FLOW - EXPLORE
Each organization pages attempts to digitize the organization fair experience by populating each organization pages with more immersive media like photos, videos as well as components to populate a wide array of information to help student learn about the organizations.
Organization fair brought online, see who's joining which organizations, learn about the organizations and join online.
INTERACTIVE PROTOTYPE - HOVER TO PLAY
EXPLORE
SEARCH
JOIN
The interaction design strategy was to leverage on existing grid system to expand and collapse modal views and cards depending on the amount of data needed to be show. Showing clean and concise information, expandable when needed.
LEARNINGS
Tailoring contents and categories could provide users a drastically different and intimate experience by freeing up real estate to provide users contents which are more relevant and delightful. Especially in this study, pain points were converted to actionable funnels to provide users a better experience.
Other works
Menu