Drayeasy
Reconfigured the rate review and comparison features for a SaaS logistics startup by conducting market research and validating high-fidelity prototypes.
Product Design
Product Design
Product Design
Logistic Supply Chain
Logistic Supply Chain
Logistic Supply Chain
SaaS B2B
SaaS B2B
SaaS B2B
Industry
Industry
Transportation
Transportation
Timeline
Timeline
Mar - June
2023
Launched in Sep 2023
Mar - June
2023
Launched in Sep 2023
Client
Client
Drayeasy
Drayeasy
Team
Team
PM, Engineers, UX Designers
PM, Engineers, UX Designers
My Role
My Role
Research
Prototyping Design
A/B Testing
Research
Prototyping Design
A/B Testing
Business Context
DrayEasy is a digital booking platform that helps freight forwarders and cargo owners find reliable truck drivers at competitive rates. It allows users to instantly get quotes for over 95% of U.S. lanes and book container transport from ports or rail ramps to inland destinations.
DrayEasy is a digital booking platform that helps freight forwarders and cargo owners find reliable truck drivers at competitive rates. It allows users to instantly get quotes for over 95% of U.S. lanes and book container transport from ports or rail ramps to inland destinations.
Freight forwarders often struggle to secure dependable trucks at fair prices for last-mile delivery. This redesign focused on improving the user portal, especially the rate request, review, and comparison features, so customers can get instant quotes and place orders more easily.
Freight forwarders often struggle to secure dependable trucks at fair prices for last-mile delivery. This redesign focused on improving the user portal, especially the rate request, review, and comparison features, so customers can get instant quotes and place orders more easily.
The Problem
DrayEasy aims to make the drayage process easier than before from quoting to proof of delivery, by connecting Shippers and Drayage Companies based on agreed rates and volume.
DrayEasy aims to make the drayage process easier than before from quoting to proof of delivery, by connecting Shippers and Drayage Companies based on agreed rates and volume.
We conducted a quick session of product critique to gather all ideas of refining. I organized data into a sliding deck and presented to a cross functional team, making sure product visions and decisions were aligned.
We conducted a quick session of product critique to gather all ideas of refining. I organized data into a sliding deck and presented to a cross functional team, making sure product visions and decisions were aligned.
Research &
Discovery
Stakeholder Interviews
Stakeholder Interviews
Our design team and I conducted a 60-minute interview with a cross-functional team, including clients, software engineers, and customers to help us better understand the user experience and the product.
Our design team and I conducted a 60-minute interview with a cross-functional team, including clients, software engineers, and customers to help us better understand the user experience and the product.
Three goals of the meeting:
Three goals of the meeting:
1.
1.
Understand the type of targeted users
Understand the type of targeted users
2.
2.
Understand the detailed process of searching, rate comparing and booking
Understand the detailed process of searching, rate comparing and booking
3.
3.
Gather the client's pre-insights of ideas and user pain points
Gather the client's pre-insights of ideas and user pain points
Who needs DrayEasy?
Who needs DrayEasy?
DrayEasy is essential for Freight Forwarders (FF) and Cargo Owners who act as agents, organizing shipments for shippers.
DrayEasy is essential for Freight Forwarders (FF) and Cargo Owners who act as agents, organizing shipments for shippers.
By researching, we learned their representative needs and concerns are:
By researching, we learned their representative needs and concerns are:
⏱️
⏱️
Time-consuming
Time-consuming
Spending a lot of time searching for the right routes and comparing prices
Spending a lot of time searching for the right routes and comparing prices
💰
💰
Reliability Concerns
Reliability Concerns
Often worry about the inaccuracy of the quoted prices, price fluctuations, and unreliable truckers
Often worry about the inaccuracy of the quoted prices, price fluctuations, and unreliable truckers
✨
✨
Direct Booking
Direct Booking
Hoping to be able to place orders directly on a particular website
Hoping to be able to place orders directly on a particular website
User Journey Mapping
User Journey Mapping
We mapped out the entire workflow from research to completion to identify pain points and opportunities throughout the freight forwarding process.
We mapped out the entire workflow from research to completion to identify pain points and opportunities throughout the freight forwarding process.
What does the user said?
What did the user said?
We interviewed 5 people to better understand users' emotions and mindsets when completing tasks—from searching and comparing to booking. Three pain points were identified:
We interviewed 5 people to better understand users' emotions and mindsets when completing tasks, from searching and comparing to booking. Three pain points were identified:
01
01
Users are not sure how to get started
Users are not sure how to get started
"When I opened the main page, I saw a lot of long blank fields and a small button, and I don't know how to start."
"When I opened the main page, I saw a lot of long blank fields and a small button, and I don't know how to start."
02
02
Beyond understanding
Beyond understanding
"When I am comparing prices, there are many technical terms and abbreviations that I don't understand."
"When I am comparing prices, there are many technical terms and abbreviations that I don't understand."
03
03
Lack of efficiency
Lack of efficiency
"I need to spend a lot of time figuring out the relationship between the different pieces of information, which is very frustrating for me."
"I need to spend a lot of time figuring out the relationship between the different pieces of information, which is very frustrating for me."
Design Question
Design Question
How do we redesign the user-friendly portal with better user experience so that customers can rely on it for
rate review, rate comparing and rate request?
How do we redesign the user-friendly portal with better user experience so that customers can rely on it for
rate review, rate comparing and rate request?
Testing &
Iteration
Key Sections A/B Testing
Key Sections A/B Testing
We conducted two moderated usability studies with five participants to test the mapping and tables. By recording and observing participants' reactions and comments, we identified patterns and iterated on the designs. At every stage, we reported to the PM for discussion.
We conducted two moderated usability studies with five participants to test the mapping and tables. By recording and observing participants' reactions and comments, we identified patterns and iterated on the designs. At every stage, we reported to the PM for discussion.
2
2
Rounds of Testing
Rounds of Testing
5
5
Participants Per Study
Participants Per Study
3
3
Key Components
Key Components
1
1
Smart Recommendation + Popular Routes
Smart Recommendation + Popular Routes
The price range table on the right shows more accurate rates based on departure terminals and base rate cards. After two rounds of iteration, clients, the CTO, and designers agreed the final version is clearer, easier to compare, and more visually appealing.
The price range table on the right shows more accurate rates based on departure terminals and base rate cards. After two rounds of iteration, clients, the CTO, and designers agreed the final version is clearer, easier to compare, and more visually appealing.
2
2
Base Rate Cards + Price Range Table
Base Rate Cards + Price Range Table
The accessorial charges table on the left displays potential charges based on departure locations. However, users wanted clearer information on the likelihood of being charged. User interviews revealed this discrepancy, prompting us to refine the design for a more reliable and user-friendly rate comparison experience.
The accessorial charges table on the left displays potential charges based on departure locations. However, users wanted clearer information on the likelihood of being charged. User interviews revealed this discrepancy, prompting us to refine the design for a more reliable and user-friendly rate comparison experience.
3
3
Live Updates + Interactive Map
Live Updates + Interactive Map
The interactive map visually displays routes, terminals, types of ports, and ramps, matching the content in the cards and tables. During testing, users hoped the map would offer features like zoom-in with pop-up information. However, after discussions with the CTO, we decided against this due to technical limitations posed by the map being controlled by a third-party.
The interactive map visually displays routes, terminals, types of ports, and ramps, matching the content in the cards and tables. During testing, users hoped the map would offer features like zoom-in with pop-up information. However, after discussions with the CTO, we decided against this due to technical limitations posed by the map being controlled by a third-party.
Edge Case: Dallas and Chicago Terminals
Final Implementation
Problems with the Current Portal
Problems with the Current Portal
🧠
🧠
Mental Model Mismatch
Mental Model Mismatch
The existing "Rate" section design does not adhere to the users' mental models
The existing "Rate" section design does not adhere to the users' mental models
🔄
🔄
Redundant User Flow
Redundant User Flow
Users have to take extra steps to complete their tasks
Users have to take extra steps to complete their tasks
📊
📊
Overwhelmed Information
Overwhelmed Information
Users cannot grasp the information they need at first glance
Users cannot grasp the information they need at first glance
🗺️
🗺️
Frustrating IA
Frustrating IA
A lot of must-seen information are missing or hidden in deeper navigation
A lot of must-seen information are missing or hidden in deeper navigation
As a product designer, I...
• Reconfigured the rate review and comparison features for a California-based SaaS logistics startup by conducting market research and validating high-fidelity prototypes via stakeholder meetings & user interviews.
• Redefined the ideal information architecture to accommodate freight forwarders’ mental model.
• Collaborated with the PM and engineering team to improve order placement efficiency for freight forwarders on web platform.
• Reconfigured the rate review and comparison features for a California-based SaaS logistics startup by conducting market research and validating high-fidelity prototypes via stakeholder meetings & user interviews.
• Redefined the ideal information architecture to accommodate freight forwarders’ mental model.
• Collaborated with the PM and engineering team to improve order placement efficiency for freight forwarders on web platform.
Metrics & Impact
2×
2×
User Engagement
User Engagement
Within 3 months
Within 3 months
“I was proud our final design was released and heard our client reported the successful metrics! “
“I was proud our final design was released and heard our client reported the successful metrics! “
— DrayEasy Client Feedback
— DrayEasy Client Feedback
we empower efficient cargo container status tracking and management for freight forwarders to enhance user experience., resulting in a 62% decrease in time spent on rate selection.
we empower efficient cargo container status tracking and management for freight forwarders to enhance user experience., resulting in a 62% decrease in time spent on rate selection.
ACTION
ACTION
TASK LIST
TASK LIST
1
1
Researching Potential Broker
Researching Potential Broker
Understand the shipping requirements, which includes the type of gods, the destination, the timeline for delivery.
Understand the shipping requirements, which includes the type of gods, the destination, the timeline for delivery.
Look for broker that have experience handling shipments similarly and that have a good reputation in the industry.
Look for broker that have experience handling shipments similarly and that have a good reputation in the industry.
Ask referrals from other business.
Ask referrals from other business.
Determine one broker to go with.
Determine one broker to go with.
2
2
Requesting Quotes
Requesting Quotes
Log in to the TMS portal.
Log in to the TMS portal.
Enter the shipment details, including origin, destination, weight, dimensions, etc.
Enter the shipment details, including origin, destination, weight, dimensions, etc.
Select the desired service level, including delivery time proper terminals and additional services.
Select the desired service level, including delivery time proper terminals and additional services.
Submit the quote request and wait for the quotes.
Submit the quote request and wait for the quotes.
(DrayEasy)
Immediately get quotes / search for more quotes
(DrayEasy)
Immediately get quotes / search for more quotes
3
3
Comparing Quotes
Comparing Quotes
Review detail charges in each quote, including standard fees and other possible charges.
Review detail charges in each quote, including standard fees and other possible charges.
Compare all the quotes together and choose one that is most economical/affordable.
Compare all the quotes together and choose one that is most economical/affordable.
4
4
Confirming Booking
Confirming Booking
Type in book details (route info, pickup terminals, destination, delivery time, container info)
Type in book details (route info, pickup terminals, destination, delivery time, container info)
Review the total cost (any taxes, duties or specific charges that may apply).
Review the total cost (any taxes, duties or specific charges that may apply).
Confirm the order.
Confirm the order.
get an email with order details and rate info
get an email with order details and rate info
Payment
Payment
5
5
Tracking Shipment
Tracking Shipment
6
6
Completion and Evaluation
Completion and Evaluation
Receive notifications while the shipment is in transit.
Receive notifications while the shipment is in transit.
Get a notification when the product gets delivered.
Get a notification when the product gets delivered.
Contact customer service for detailed information.
Contact customer service for detailed information.
Access online portal to retrieve shipment details including current location, estimated delivery date and time, and any updates on delays or issues that may have occurred.
Access online portal to retrieve shipment details including current location, estimated delivery date and time, and any updates on delays or issues that may have occurred.
Evaluate and add reviews for different aspects of the entire process, including the user experience of the portal, the reliability of the broker, and the punctuality of the shipment and so on.
Evaluate and add reviews for different aspects of the entire process, including the user experience of the portal, the reliability of the broker, and the punctuality of the shipment and so on.
OPPORTUNITIES
OPPORTUNITIES
Different brokers comparison:
Provide a portal that can compare different brokers and offer transparent pricing, reviews, and other information that can help user to make a informed decision.
Different brokers comparison:
Provide a portal that can compare different brokers and offer transparent pricing, reviews, and other information that can help user to make a informed decision.
Error validation:
Implement real-time error validation and feedback during data entry, helping users correct mistakes and ensuring accurate shipment information.
Recommended route:
Provide recommended route for possible nearby destinations to avoid unreasonable charges.
Notification and Progress Indicators:
Once a rate request is submitted, the progress of the request to receive quotes will be informed through progress indicators or status updates.
Error validation:
Implement real-time error validation and feedback during data entry, helping users correct mistakes and ensuring accurate shipment information.
Recommended route:
Provide recommended route for possible nearby destinations to avoid unreasonable charges.
Notification and Progress Indicators:
Once a rate request is submitted, the progress of the request to receive quotes will be informed through progress indicators or status updates.
Simplify language:
consider using more common phrase instead of jargons.
Clear explanation for domain-specific terms:
Provide clear and streamlined explanation for specific terminology and charges.
Quote transparency:
Provide shippers educational resources such as industry quote guidelines, customer ratings, 24/7 customer support ahd shipper community/forum.
Simplify language:
consider using more common phrase instead of jargons.
Clear explanation for domain-specific terms:
Provide clear and streamlined explanation for specific terminology and charges.
Quote transparency:
Provide shippers educational resources such as industry quote guidelines, customer ratings, 24/7 customer support ahd shipper community/forum.
User friendly shipment interface:
Provide a clear and easy-to-use interface for reviewing and editing shipment details before confirmation.
Data security portal:
Implement clearly communicate data security measures to reassure users.
User friendly shipment interface:
Provide a clear and easy-to-use interface for reviewing and editing shipment details before confirmation.
Data security portal:
Implement clearly communicate data security measures to reassure users.
Personalized tracking:
Offer personalized tracking that allows users to review the status of their shipments in their preferred time zone or language, and to customize their notifications and alerts.
Interactive tracking information :
Provide regular updates and answer any questions and concerns that may arise.
Customized delivery options:
Provide personalized delivery options that meet the unique needs and preferences of users.
Personalized tracking:
Offer personalized tracking that allows users to review the status of their shipments in their preferred time zone or language, and to customize their notifications and alerts.
Interactive tracking information :
Provide regular updates and answer any questions and concerns that may arise.
Customized delivery options:
Provide personalized delivery options that meet the unique needs and preferences of users.
Data privacy: Provide reviews anonymously or with the option to keep their personal information confidential.
Relevant prompts: Provide relevant prompts to help users provide specific feedback and valuable insights on key aspects of the whole process.
Data privacy: Provide reviews anonymously or with the option to keep their personal information confidential.
Relevant prompts: Provide relevant prompts to help users provide specific feedback and valuable insights on key aspects of the whole process.
PAINPOINT
PAINPOINT
Feel annoyed when the review process is cumbersome and time-consuming.
Hesitant to share their honest feedback if they are required to provide personal information or if their reviews are not anonymous.
Feel challenging to provide relevant feedback if they are not given sufficient context or prompts on what aspects to focus on in their review.
Feel annoyed when the review process is cumbersome and time-consuming.
Hesitant to share their honest feedback if they are required to provide personal information or if their reviews are not anonymous.
Feel challenging to provide relevant feedback if they are not given sufficient context or prompts on what aspects to focus on in their review.
Time
Time
Reliability
Reliability
Security & Transparency
Security & Transparency
Function
Function
Feel anxious about the there are only a limited number of brokers that can meet the needs in term of special request for goods and time frame.
Feel challenging to evaluate the reputation of a broker especially if user don’t have direct experience working with them.
Feel overwhelmed to compare quotes from different brokers and determine which one is offering the best value for the business.
Feel anxious about the there are only a limited number of brokers that can meet the needs in term of special request for goods and time frame.
Feel challenging to evaluate the reputation of a broker especially if user don’t have direct experience working with them.
Feel overwhelmed to compare quotes from different brokers and determine which one is offering the best value for the business.
Confused about the unintuitive interface when entering shipment details.
Feel uncertain about the accuracy of information entered when no confirmation or validation features.
Feel frustrated when the quotes for nearby destination is really high.
Feel impatient when quote request process is time-consuming and waiting for request more rate.
Confused about the unintuitive interface when entering shipment details.
Feel uncertain about the accuracy of information entered when no confirmation or validation features.
Feel frustrated when the quotes for nearby destination is really high.
Feel impatient when quote request process is time-consuming and waiting for request more rate.
Feel challenging to understand all kinds of charges based on different routes.
Feel overwhelmed to compare different quotes due to excessive information and disorganized layout.
Feel confused about specific charges due to lack of transparency and knowledge in pricing and transportation routes.
Feel uncertain about the reliability of the service providers.
Feel challenging to understand all kinds of charges based on different routes.
Feel overwhelmed to compare different quotes due to excessive information and disorganized layout.
Feel confused about specific charges due to lack of transparency and knowledge in pricing and transportation routes.
Feel uncertain about the reliability of the service providers.
Feel challenging in editing or modifying shipment details.
Hesitant to share personal information online, concerned about privacy issues.
Feel challenging in editing or modifying shipment details.
Hesitant to share personal information online, concerned about privacy issues.
Worried about when the shipment appears to be delayed.
Get anxious when the tracking information is unclear or inaccurate.
Feel frustrated when having difficulties accessing the tracking information.
Worried about when the shipment appears to be delayed.
Get anxious when the tracking information is unclear or inaccurate.
Feel frustrated when having difficulties accessing the tracking information.
FEELINGS
& THOUGHTS
FEELINGS
& THOUGHTS
Market Research
Market Research
Competitive AnalYsis
Competitive AnalYsis
Searching
Searching
Comparing
Rate
Comparing
Rate
Rather complete search options in the dropdown menu
Systemically corrected information such as addresses, cargo types, etc.
Clear layout with step-by-step guide
Rather complete search options in the dropdown menu
Systemically corrected information such as addresses, cargo types, etc.
Clear layout with step-by-step guide
Visualized searching, booking and shipping process
Can search on-going or passed quotes or shippings
Visualized searching, booking and shipping process
Can search on-going or passed quotes or shippings
Can compare the cost of hire, transmit time, margin and total rate through different competitors
Can compare the cost of hire, transmit time, margin and total rate through different competitors
platform only operates in several major metropolitan areas in the United States
platform only operates in several major metropolitan areas in the United States
Reasonable sorts of rates
Comparing rates by scrolling vertically
Transparent reviews and credible ratings
Strong IR features on map
Reasonable sorts of rates
Comparing rates by scrolling vertically
Transparent reviews and credible ratings
Strong IR features on map
Visualized data on map
Attractive visual style including data, mapping and web layouts
Real time of the transportation status is displayed on the map
Quotes are differentiated by colors and icons
Visualized data on map
Attractive visual style including data, mapping and web layouts
Real time of the transportation status is displayed on the map
Quotes are differentiated by colors and icons
Booking
Booking
Quotes are classified into categories
Full-sentence questions with multiple options of answers-when filling forms
Many specialized icons
Quotes are classified into categories
Full-sentence questions with multiple options of answers-when filling forms
Many specialized icons
All input sections are integrated into one page
Can save the on-going booking as draft
Icons are designed for types of shipping
All input sections are integrated into one page
Can save the on-going booking as draft
Icons are designed for types of shipping
Order of the quotes appears to be randomly sorted
uses icons to indicate features/words such as Air, Train, Truckload and Ocean.
Order of the quotes appears to be randomly sorted
uses icons to indicate features/words such as Air, Train, Truckload and Ocean.
I learned from competitors how they perform on our priority features and gained valuable insights. We mainly looked into the user flow, information structure and visuals.
Refine ideas with customer value in mind
We then refined the ideas and solutions with a focus on empathy and customer value. This divergence-convergence ideation process helped us find the root problem and precisely meet users' needs and capabilities.
I learned from competitors how they perform on our priority features and gained valuable insights. We mainly looked into the user flow, information structure and visuals.
Refine ideas with customer value in mind
We then refined the ideas and solutions with a focus on empathy and customer value. This divergence-convergence ideation process helped us find the root problem and precisely meet users' needs and capabilities.
Layout Exploration
Through multiple iterations, we explored different layout approaches to optimize information hierarchy and user flow.
Through multiple iterations, we explored different layout approaches to optimize information hierarchy and user flow.
Early exploration of different information architectures
Early exploration of different information architectures
Final layout direction with improved hierarchy
Final layout direction with improved hierarchy
The basic rate in Dallas and Chicago vary based on the choice of terminal. When meeting with the stakeholders, one developer informed us that the base rate for two cities changes depending on the choice of terminal.
The basic rate in Dallas and Chicago vary based on the choice of terminal. When meeting with the stakeholders, one developer informed us that the base rate for two cities changes depending on the choice of terminal.
Solution: We proposed to provide users with a basic price range specifically for these two cities. At the same time, in the table, we bundled terminals with the same additional fee.
Solution: We proposed to provide users with a basic price range specifically for these two cities. At the same time, in the table, we bundled terminals with the same additional fee.
Key Takeaway
📚
📚
1. Quickly Understanding Domain Knowledge in B2B Product is Key
1. Quickly Understanding Domain Knowledge in B2B Product is Key
Grasping domain knowledge quickly is crucial to identify core user needs and align solutions with business objectives. Without knowledge in joint transportation, it was hard for me to understand the product even compared to users, impacting our user research judgment. Before conducting surveys and interviews, we immediately held meetings with stakeholders to inquire about domain knowledge, gather market research, clarify terminology, and internally test and critique the product.
Grasping domain knowledge quickly is crucial to identify core user needs and align solutions with business objectives. Without knowledge in joint transportation, it was hard for me to understand the product even compared to users, impacting our user research judgment. Before conducting surveys and interviews, we immediately held meetings with stakeholders to inquire about domain knowledge, gather market research, clarify terminology, and internally test and critique the product.
🎯
🎯
2. Affordances in User Interfaces Enhance Fluid User Flow
2. Affordances in User Interfaces Enhance Fluid User Flow
In the search field, we employed explicit affordances to make information and buttons discoverable and understandable. In the terminal-related table, we hid the additional fee under a dropdown menu. Overall, we adopted familiar UI patterns, like cards and price range bars, to instinctively aid users in comparisons and inquiries.
In the search field, we employed explicit affordances to make information and buttons discoverable and understandable. In the terminal-related table, we hid the additional fee under a dropdown menu. Overall, we adopted familiar UI patterns, like cards and price range bars, to instinctively aid users in comparisons and inquiries.
🤝
🤝
3. Communication Between Designers, Developers, and Engineers
3. Communication Between Designers, Developers, and Engineers
The product redesign was based on a very basic test version, so 90% of the interface changed. Despite numerous meetings, we had to forgo some features due to technical constraints. The final launched version had some differences from the hi-fi version, such as the map scale display. While some aspects were overlooked for the sake of progress, proactive follow-ups led us to conduct further iterative tests.
The product redesign was based on a very basic test version, so 90% of the interface changed. Despite numerous meetings, we had to forgo some features due to technical constraints. The final launched version had some differences from the hi-fi version, such as the map scale display. While some aspects were overlooked for the sake of progress, proactive follow-ups led us to conduct further iterative tests.
⚖️
⚖️
4. Balancing User Needs and Business Goals
4. Balancing User Needs and Business Goals
Given development time constraints, we prioritized features by balancing user needs and business objectives. Designing effective B2B SaaS products involves carefully weighing user requirements against the need to produce results that meet business expectations and drive revenue.
Given development time constraints, we prioritized features by balancing user needs and business objectives. Designing effective B2B SaaS products involves carefully weighing user requirements against the need to produce results that meet business expectations and drive revenue.