DrayEasy
Enable the freight forwarders to search for the best FTL/LTL rates and easily place orders in DrayEasy web platform.
Timeline
April - July 2024
Device
Web Platform
Team
Bing Liu (Design Manager), Jiaqi Zhou, Qisen Pan, Abi Lee, Xinran Chen, Qinyu Lin, Mengfei Lu
Responsbility
UX research, Wireframe, Design Iteration, Mid-fi Mockup, Hi-fi Mockup, Prototyping
Challenges
The placement of a drayage order has a very complex booking process, which takes lots of time and chances to make mistakes when filling out information. The website has the problem of the lack of transparency in freight pricing due to fluctuations, hidden fees, or unexpected situations.
Results
The newly developed platform features a streamlined booking process, clear explanations of shipping and item info, and detailed freight price listing, providing customers an effective and informative booking experience.
67%
Increased Order Value
2.3K
Attracted New Users
93%
Customers' Satisfaction
What is DrayEasy 🏢
DrayEasy is a B2B SaaS platform designed to optimize logistics with instant quotes, premium trucking services, and seamless API integration. Specializing in the 'last-mile' delivery of intercontinental freight, DrayEasy leverages an extensive database of quotes for over 3,000 key routes, empowering clients to find the best rates and service options quickly. To date, DrayEasy has facilitated the movement of over 26,000 containers to more than 5,000 warehouses, consistently delivering transparent and reliable logistics solutions for its users.
DrayEasy's database include…
Full Truck Load Quote (FTL)
Large shipments that fill a whole truck for direct delivery.
Less Than Truckload Quote (LTL)
Combines smaller shipments from multiple customers in one truck, making it more economical but slower due to multiple stops.
DrayEasy's Business Goal 👇
"Enable the shippers to search and compare the rates from different brokers and place orders efficiently
in DrayEasy web platform"
For This Project
Main Goal
Enable the freight forwarders to search for the best FTL/LTL rates and easily place orders in DrayEasy web platform.
Problems & Opportunities
😥 Complex booking process
🤔 Easy to make mistakes when filling information
😶 Lack of transparency in freight pricing due to fluctuations, hidden fees, or unexpected situations
My Responsibility
Collaborating with a design manager, product manager, tech lead, and a team of five designers, our team was responsible for designing the functions of FTL & LTL Search.
My role focused on crafting an intuitive and engaging user experience, enabling users to search for quotes, compare rates from various brokers, and seamlessly complete the booking process.
Project Process
Design Investigation
Current Product Critique
First, we tried to criticize and reflect on how current product fulfilled the users' needs and business' goals.
Limitations
Unclear Indication of Info Needed
"History Routes" section looks inconsistent
Lists of quotes contain insufficient info for users to compare
Table of fees is massed and hard to understand
No guidance and tips when filling out information that uers can get confused or make mistakes in the process
Container information lacks clear instructions and no place to manage past containers, which waste lots of time to refill them
Opportunities
Provide clear, informative guidance
Offer helpful tips to assist users in completing the booking process and understanding the purpose of each feature.
Maintain a consistent and clear style
Ensure a uniform design to support smooth navigation and an intuitive user experience.
Optimize list displays for decision-making
Present essential information in quote lists, enabling users to easily compare options and make informed choices.
Streamline container information input
Design an intuitive system for entering container details, along with an accessible item manager for efficient user control.
Design Investigation
Competitive Analysis
Then, we tried to analyze competitors' web platforms to gain some insights and opportunities.
Opportunities
What We Learned
Only get the most important information first
Streamline the booking process by breaking it into smaller, manageable steps.
Add small features like Uber’s FTL date picker to help users see rates faster and easier
Try to have consistent style that reflects brand image
Design Investigation
User Interviews & Persona
To understand users' needs, we conducted interviews with a few old clients and summarized their needs from their past experiences into a user persona, driving more empathy to our brainstorming stage.
Design Investigation
Our User Pain Points
After conducting all these research, we found that our users are experiencing these pain points…
🤔 Easy to make mistakes wnen filling information
😶 Lack of transparency in freight pricing due to fluctuations, hidden fees, or unexpected situations
😥 Complex and time-consuming booking process
Design Ideation
Brainstorming
After conducting in-depth research about our target users, we are ready to ideate and brainstorm innovative solutions to address their pain points.
First, we asked…
HMW streamline the booking process?
HMW effectively display information to help users select the ideal quotes?
HMW we help users find the reliable trucks/carriers?
HMW we increase the transparency of freight pricing? (fluctuation / additional / unexpected fees)
Then, we brainstormed…
Here is our solution!
Design Ideation
With solutions identified, we concentrated on designing a user flow to streamline and organize the booking process through iterative discussions. We divided the flow into FTL and LTL segments, simplifying the process by only requesting essential information before placing orders.
FTL
LTL
Design Ideation
Wireframes & Iterations
Based on the user flows, we created a few versions of wireframes and iterated for a few arounds after meeting with the clients.
Putting information box and history section together make the page more consistent and coherent
FTL SEARCH
⭐️ Winner
To avoid the condition that a lot of information are hidden on LTL page, we move the FTL/LTL to the side and redesign the LTL section
LTL SEARCH
⭐️ Winner
According to the need of calculating insurance into the final price to enhance the transparency,
we add a box for selecting insurance and restructure the information needed to present on the list.
LIST OF QUOTES
⭐️ Winner
BOOKING PROCESS
CONFIRMATION
COMPLETION
Final Design
Hi-Fi Prototype & Highlights
After settling down all the details, styles, and functions, we are finishing up the design with a high-fidelity mock-up of the web platform, keeping the style consistent and interaction fluently.
⭐️ Calendar view with price fluctuations for high transparency
⭐️ Upload files or text to Auto Fill Info Efficiently powered by AI
⭐️ Clear hierarchy of information needed for booking and indication of required information
⭐️ Notify users to check information before completing order for price transparency and booking accuracy
⭐️ Add items efficiently from item book
⭐️ Pallet Calculator makes the process easy and efficient
⭐️ Show essential information for users to make better decisions
