Timeline
2024 03-06
2024 03-06
2024 03-06
Role
Product Designer
Product Designer
Product Designer
Service
Web Design
User Experience Design
& Research
User Interface Design
Web Design
User Experience Design
& Research
User Interface Design
Web Design
User Experience Design
& Research
User Interface Design
Team
3 Designers (Me)
1 Developer
1 Product Manager
3 Designers (Me)
1 Developer
1 Product Manager
3 Designers (Me)
1 Developer
1 Product Manager
DrayEasy
DrayEasy
DrayEasy
Enable the freight forwarders to search for the best FTL/LTL rates and easily place order in DrayEasy web plaform.
View Site
View Site
View Site
What DrayEasy Does?
DrayEasy’s Services Include
DrayEasy’s Services Include
DrayEasy’s Services Include
Full-truckload (FTL)
Shipping where an entire truck is used exclusively for one shipment.
Shipping where an entire truck is used exclusively for one shipment.
Shipping where an entire truck is used exclusively for one shipment.
Less-than-truckload (LTL)
Shipping where multiple shipments share space on the same truck.
Shipping where multiple shipments share space on the same truck.
Shipping where multiple shipments share space on the same truck.
Drayage
Short-distance transport of goods, typically between ports, warehouses, or distribution centers.
Short-distance transport of goods, typically between ports, warehouses, or distribution centers.
Short-distance transport of goods, typically between ports, warehouses, or distribution centers.
The initial brief
DrayEasy was losing customers.
The team initially attributed this to an inefficient quoting and booking process that relied on emails and phone calls, and wanted to build an online platform to digitize the workflow.
My approach
Moving the existing workflow online wouldn’t necessarily address why customers were leaving. Before making design decisions, I interviewed existing and potential customers to understand how they worked, where they encountered friction, and what drove them away.
My research identified two design priorities: address pain points in the existing workflow and make the transition online easier for existing customers.
Result – The First Month of Launch
Result – The First Month of Launch
67%
67%
67%
Increased Order Value
Increased Order Value
70%
70%
70%
Reducing in email orders
Reducing in email orders
1.2K
1.2K
1.2K
Attracted New Users
Attracted New Users
User Research
& Pain Points
User Research & Pain Points
User Research
& Pain Points
In this project, we conducted unstructured interviews with 6 current clients and 4 potential clients to gain open-ended insights and understand their needs and pain points. The feedback highlighted four major issues and three key expectations:
Key Issues:
In this project, we conducted unstructured interviews with 6 current clients and 4 potential clients to gain open-ended insights and understand their needs and pain points. The feedback highlighted four major issues and three key expectations:
Key Issues:
In this project, we conducted unstructured interviews with 6 current clients and 4 potential clients to gain open-ended insights and understand their needs and pain points. The feedback highlighted four major issues and three key expectations:
Key Issues:
1.
1.
1.
Long timeline for inquiries and waiting for responses.
Long timeline for inquiries and waiting for responses.
Long timeline for inquiries and waiting for responses.
2.
2.
2.
Complicated booking process.
Complicated booking process.
Complicated booking process.
3.
3.
3.
Easy to make mistakes when filling information.
Easy to make mistakes when filling information.
Easy to make mistakes when filling information.
4.
4.
4.
Lack of transparency in freight pricing due to fluctuations, hidden fees, or unexpected charges.
Lack of transparency in freight pricing due to fluctuations, hidden fees, or unexpected charges.
Lack of transparency in freight pricing due to fluctuations, hidden fees, or unexpected charges.
Other Findings:
Other Findings:
Other Findings:
1.
1.
1.
Most customers are cross-border e-commerce sellers who repeatedly ship similar products to warehouses in the same cities, making shipment details and addresses highly reusable.
Most customers are cross-border e-commerce sellers who repeatedly ship similar products to warehouses in the same cities, making shipment details and addresses highly reusable.
Most customers are cross-border e-commerce sellers who repeatedly ship similar products to warehouses in the same cities, making shipment details and addresses highly reusable.
2.
2.
2.
Existing customers were accustomed to requesting quotes through traditional ways. Moving them to an unfamiliaronline workflow could create friction and make adoption harder.
Existing customers were accustomed to requesting quotes through traditional ways. Moving them to an unfamiliaronline workflow could create friction and make adoption harder.
Existing customers were accustomed to requesting quotes through traditional ways. Moving them to an unfamiliaronline workflow could create friction and make adoption harder.
These findings shaped our product strategy: address the pain points driving customers away, rather than treat digitization as the end goal.
These findings shaped our product strategy: address the pain points driving customers away, rather than treat digitization as the end goal.
These findings shaped our product strategy: address the pain points driving customers away, rather than treat digitization as the end goal.
Current Product
Problem
Current Product Problem
We conducted an internal review of the existing Drayage module’s Searching and Booking design.
Searching:
Unclear hierarchy, poor readability, and low screen efficiency.
Booking:
The step-by-step order process makes it difficult for users to get an overview of all required information. They have to complete the current step before previewing what comes next.
However, in freight booking scenarios, users often need to collect complex shipping details before filling out the form — unlike filling out familiar personal information. Without a full view of the required fields, users are forced to constantly switch between different tools to gather the necessary information, which can be frustrating and slows down the workflow.
We conducted an internal review of the existing Drayage module’s Searching and Booking design.
Searching:
Unclear hierarchy, poor readability, and low screen efficiency.
Booking:
The step-by-step order process makes it difficult for users to get an overview of all required information. They have to complete the current step before previewing what comes next.
However, in freight booking scenarios, users often need to collect complex shipping details before filling out the form — unlike filling out familiar personal information. Without a full view of the required fields, users are forced to constantly switch between different tools to gather the necessary information, which can be frustrating and slows down the workflow.
We conducted an internal review of the existing Drayage module’s Searching and Booking design.
Searching:
Unclear hierarchy, poor readability, and low screen efficiency.
Booking:
The step-by-step order process makes it difficult for users to get an overview of all required information. They have to complete the current step before previewing what comes next.
However, in freight booking scenarios, users often need to collect complex shipping details before filling out the form — unlike filling out familiar personal information. Without a full view of the required fields, users are forced to constantly switch between different tools to gather the necessary information, which can be frustrating and slows down the workflow.
Competitive Analysis
Current Product Problem
Then, we analyzed five web platforms offering similar services to to gain insights and opportunities.
Identify the key issues need to be addressed in this update
Key Challenges to Address
Key Challenges to Address
Through user research, current product critique, and competitive analysis, we collaborated with the product manager to define four key design objectives for this project.
1.
1.
1.
Present complex information input modules for LTL services efficiently.
Present complex information input modules for LTL services efficiently.
Present complex information input modules for LTL services efficiently.
2.
2.
2.
Improve the booking flow to enhance the sense of control and reduce drop-off rates.
Improve the booking flow to enhance the sense of control and reduce drop-off rates.
Improve the booking flow to enhance the sense of control and reduce drop-off rates.
3.
3.
3.
A well-structured and informative search result display.
A well-structured and informative search result display.
A well-structured and informative search result display.
4.
4.
4.
Provide essential tools within the workflow to simplify quote requests + reduce errors + ease the transition to the online platform.
Brainstorming
Brainstorming
Brainstorming
During the brainstorming session, we rapidly gathered ideas—regardless of their feasibility or practicality.
We formulated...
How might we streamline the booking process?
How might we effectively display information to help users select the ideal quotes?
How might we help users find reliable trucks/carriers?
How might we increase the transparency of freight pricing? (fluctuation / additional / unexpected fees)
During the brainstorming session, we rapidly gathered ideas—regardless of their feasibility or practicality.
We formulated...
How might we streamline the booking process?
How might we effectively display information to help users select the ideal quotes?
How might we help users find reliable trucks/carriers?
How might we increase the transparency of freight pricing? (fluctuation / additional / unexpected fees)
During the brainstorming session, we rapidly gathered ideas—regardless of their feasibility or practicality.
We formulated...
How might we streamline the booking process?
How might we effectively display information to help users select the ideal quotes?
How might we help users find reliable trucks/carriers?
How might we increase the transparency of freight pricing? (fluctuation / additional / unexpected fees)
Design Solution
Design Solution
Design Solution
Optimize search layout: Reassess the layout of the LTL search while ensure consistency
Reorganize quote results to highlight key details: Carrier, price, transit time, and insurance coverage.
Simplify the workflow into 3 clear stages: Cargo details → Compare quotes → Booking.
A progress bar shows users where they are and what comes next, reducing cognitive load for those less familiar with digital tools.
Revamp the booking process: Change the step-by-step filling to a scrollable layout and reorganize the information modules
Add assistance features: Add AI Auto-fill, Pallet Calculator, Item Book, and Address Book as support features
Optimize search layout: Reassess the layout of the LTL search while ensure consistency
Reorganize quote results to highlight key details: Carrier, price, transit time, and insurance coverage.
Simplify the workflow into 3 clear stages: Cargo details → Compare quotes → Booking.
A progress bar shows users where they are and what comes next, reducing cognitive load for those less familiar with digital tools.
Revamp the booking process: Change the step-by-step filling to a scrollable layout and reorganize the information modules
Add assistance features: Add AI Auto-fill, Pallet Calculator, Item Book, and Address Book as support features
Optimize search layout: Reassess the layout of the LTL search while ensure consistency
Reorganize quote results to highlight key details: Carrier, price, transit time, and insurance coverage.
Simplify the workflow into 3 clear stages: Cargo details → Compare quotes → Booking.
A progress bar shows users where they are and what comes next, reducing cognitive load for those less familiar with digital tools.
Revamp the booking process: Change the step-by-step filling to a scrollable layout and reorganize the information modules
Add assistance features: Add AI Auto-fill, Pallet Calculator, Item Book, and Address Book as support features
User Flow
User Flow
User Flow
To better address the issues, we started by focusing on the interaction and designed a new user flows for FTL and LTL functionalities.
To better address the issues, we started by focusing on the interaction and designed a new user flows for FTL and LTL functionalities.
To better address the issues, we started by focusing on the interaction and designed a new user flows for FTL and LTL functionalities.
Design Decision
Design Decision
Reevaluate the Layout of Search
Reevaluate the Layout of Search
Design Decision
Design Decision
Redesign Quote History Panel
Redesign Quote History Panel
Redesign Quote History Panel
User interviews revealed two key issues:
Low value of hot route recommendations
Most clients follow relatively fixed shipping routes on a regular basis, so dynamic “hot route” suggestions provide little added value.Insufficient location precision in history records
In typical user scenarios, it's common to ship within the same city but to different warehouses. Therefore, saving history only at the city level is insufficient to support efficient user selection.
Design Decision
Design Decision
Redesign Information Structure of Search Results
Redesign Information Structure of Search Results
Design Decision
Design Decision
Redesign Booking Process
Redesign Booking Process
Highlight Features
Highlight Features
Highlight Features
Instant quote comparison
Instant quote comparison
Instant quote comparison
Just enter pickup and delivery locations to get time-insensitive price and price fluctuations over a 2 week period
Just enter pickup and delivery locations to get time-insensitive price and price fluctuations over a 2 week period
Just enter pickup and delivery locations to get time-insensitive price and price fluctuations over a 2 week period
Order Information Auto-fill
Order Information Auto-fill
Order Information Auto-fill
This feature was designed to help traditional users (those used to booking via email and uninterested in online booking) transition smoothly to the web platform. Users can upload their previously completed form files, which are then auto-filled into the system.
This feature was designed to help traditional users (those used to booking via email and uninterested in online booking) transition smoothly to the web platform. Users can upload their previously completed form files, which are then auto-filled into the system.
This feature was designed to help traditional users (those used to booking via email and uninterested in online booking) transition smoothly to the web platform. Users can upload their previously completed form files, which are then auto-filled into the system.
Pallet Calculator
Pallet Calculator
Pallet Calculator
The Pallet Calculator helps users quickly estimate commodity information, offering a one-stop, efficient filling process that reduces errors
The Pallet Calculator helps users quickly estimate commodity information, offering a one-stop, efficient filling process that reduces errors
The Pallet Calculator helps users quickly estimate commodity information, offering a one-stop, efficient filling process that reduces errors
Item Book
Item Book
Item Book
Interviews revealed that most clients ship the same types of goods regularly. The Item Book feature helps reduce the hassle of re-entering the same item details each time.
Interviews revealed that most clients ship the same types of goods regularly. The Item Book feature helps reduce the hassle of re-entering the same item details each time.
Interviews revealed that most clients ship the same types of goods regularly. The Item Book feature helps reduce the hassle of re-entering the same item details each time.
LTL booking process
LTL booking process
LTL booking process
Simple and clear information entry steps
Simple and clear information entry steps
Simple and clear information entry steps
Order confirmation
Order confirmation
Order confirmation
Information review and acknowledgment
Information review and acknowledgment
Information review and acknowledgment
Next Steps
Next Steps
Next Steps
Continuously track post-launch data
Continuously collecting and analyzing user feedback to make ongoing improvements based on user experience and needs.
Continuously track post-launch data
Continuously collecting and analyzing user feedback to make ongoing improvements based on user experience and needs.
Continuously track post-launch data
Continuously collecting and analyzing user feedback to make ongoing improvements based on user experience and needs.
Takeaways
Takeaways
Takeaways
Faced with diverse demands, take a holistic approach to prioritize effectively
When receiving a large volume of diverse requests from stakeholders—including users, product, engineering, and business teams—it's critical to take a holistic approach. This involves evaluating each request for alignment with key objectives and feasibility under current constraints, enabling effective prioritization and distill the core design goals.
Faced with diverse demands, take a holistic approach to prioritize effectively
When receiving a large volume of diverse requests from stakeholders—including users, product, engineering, and business teams—it's critical to take a holistic approach. This involves evaluating each request for alignment with key objectives and feasibility under current constraints, enabling effective prioritization and distill the core design goals.
Faced with diverse demands, take a holistic approach to prioritize effectively
When receiving a large volume of diverse requests from stakeholders—including users, product, engineering, and business teams—it's critical to take a holistic approach. This involves evaluating each request for alignment with key objectives and feasibility under current constraints, enabling effective prioritization and distill the core design goals.
Professionalism and process-driven UX in B2B products
B2B platforms prioritize efficiency, scalability, and process integration. Compared to consumer-facing B2C platforms, they place greater emphasis on professionalism, stability, and system coordination.
Professionalism and process-driven UX in B2B products
B2B platforms prioritize efficiency, scalability, and process integration. Compared to consumer-facing B2C platforms, they place greater emphasis on professionalism, stability, and system coordination.
Professionalism and process-driven UX in B2B products
B2B platforms prioritize efficiency, scalability, and process integration. Compared to consumer-facing B2C platforms, they place greater emphasis on professionalism, stability, and system coordination.