Find Best Drayage Quotes At Anywhere
Making It Easier for Clients to Search for the Best Price
TASK
UX Research
Visual Design
Prototyping
TEAM
8 developers
1 project manager
4 UX designers
TIMELINE
06 2023 - 09 2023
PROJECT BRIEF
As the lead designer, I spearheaded the end-to-end design of DrayEasy's mobile app from 0-1, streamlining the rate search process for optimal mobile usability. Working closely with PMs and developers, I adapted desktop features into a mobile-friendly interface, utilizing a shared drayage quote database. The app launched successfully, capturing over 40% of mobile login attempts while a parallel team revamped the web app.
IMPACT
x
4
Fasrer in Work Completion
+
230
Increase in Active Users
%
8 hrs to 5 mins
96% reduction in time spent
WHAT IS Drayeasy
DrayEasy is a Digital Drayage Platform that Help Cargo Owners find best drayage price
26K
+
Containers Moved
1.5M
+
Lanes Covered
5000
+
Network Warehouses
Over 100 international regions in North America
Covers over 95% of the lanes
Over 300,000 drayage routes
Logistic manager find it hard to access web during frequent business trips
Target Users
Logistic Manager
Who are always on business trips, need to manage, book get instant notification of their shipment orders.
Drayage
Refers to the transportation of goods over a short distance, particularly within the same metropolitan area, or within the vicinity of ports, warehouses, or rail terminals.
Drayage Carrier
Are responsible for providing drayage services. They own or lease the trucks that carry the goods.
CHALLENGES - USERS
The web application is challenging to access for logistic managers who are frequently outside the office.
From the initial interview of our main user group, I started to understand that It takes them up to 15 mins to search and book their desired quotes with current mobile version of the website.
Frequent Client Requests on Business Trips
“During the business trips, I was asked frequently by my clients to provide quotes.”
Delayed Access to Order Status in Web Portal
“Every time while I need to check my order status, I need to wait while opening my web portal.”
Challenges with Mobile Ordering on Web App
“The mobile version of web app is such a mess, there is no way to place my order with my phone!”
Business Focus
How Might We Help Cargo Owners Book Services More Efficiently And Effectively?
Thus I set the design goal is to design a convenient experience for users to search for best quote with mobile services.
Checkout the final design
Easy Compare of quotes
Understand complex options at a glance
Quick visualization of rate details with live map integration
Grasp most relevant information quickly
New Integrated Homepage
Integrated Homepage
View real-time industry rates
Receive important updates of shipments
Book a draft in 2 mins
Leave tedious tasks to desktop
book a draft and secure the quotation in advance
complete container information to desktop later
UNCOVER OPPORTUNITIES & RESEARCH INSIGHTS
Learn more about my research process
UNCOVER OPPORTUNITIES & RESEARCH INSIGHTS
Learn more about my research process
REGARDING THE POOR NAGIVATION EXPERIENCE
Create the most efficient search experience
Through a series of testing, I have came up with the best layout structure of the home page, filtered the most relevant information to assist the search process.
Design Iteration 01
Search Quotes
Need more info of cargo details display on card.
Need of increasing input detail for quote searches.
Design Iteration 01
Search Quotes
Lack of information hierarchy slows user navigation.
Information overload overwhelms users.
Checkout the new dashboard experience
FINAL DESIGN SOLUTION
New integrated homepage
Users need
Easy accessible search on-boarding experience.
Business prefer
Fast quote searching process.
Engineers require
Engineers need a streamlined information retrieval system.
Intuitive onboarding search
Convenient usability with prominently displayed search history and popular suggestions
Dynamic Rate Suggestions
Unavailable rates trigger alternative suggestions for quick decision-making.
Request Own Rate Directly
Users can request custom rates with cargo details and comments directly in the mobile app.
Engineers require
Users get instant notice for searched result with limited access.
Search efficiently with cargo details input within 2 mins.
Explore the previous history for fast reuse.
Clear and compact cargo information overview.
REGARDING THE DIFFICULTY IN COMPARING RATES
Currently, it takes users up to 15 mins to compare and select the best rate.
From the initial round of interviews, I realized that users often feel overwhelmed by unorganized search results. As a UX designer, my goal was to redesign the comparison experience, enabling users to quickly grasp key rate information and make faster selections.
Users need
Clear information hierarchy for quick decisions.
Business prefer
Streamlined comparisons to boost conversions.
Engineers require
Scalable, easy-to-implement components.
Design Iteration 01
Compare Quotes
Confusing quote details without visual context.
No route visualization hinders quick comparisons.
Design Iteration 01
Compare Quotes
Map size too small for clear navigation.
Single-route view limits side-by-side comparisons.
Design Iteration 01
Compare Quotes
Larger map improves route comparison.
Horizontal scrolling hinders cargo detail viewing.
REGARDING THE LACK OF INFORMATION DISPLAYED ON CARD
Enhanced Price Card Design for detail understaning
I made the price card more compact for better readability and moved terminal selection to the next step, maximizing map space and improving comparisons.
Design Iteration 01
Card Design
Design Iteration 02
Card Design
Final Design
Card Design
Oversized card limits screen space and reduced visibility.
Card design lacked clear terminal distinctions, and the button was unnecessary.
The final design uses a gradient bar for price ranges, a compact card, and highlights the average price.
Experience smarter rate comparisons!
FINAL DESIGN SOLUTION
Easy compare of different city routes in 2 mins
The live map displays terminal codes and names at all scales, enabling easy terminal location.
Streamlined and well-structured price card design that enhances readability and understanding.
An optimized layout and clear hierarchy enabling faster comparisons and more confident decision-making.
Enhanced Quote Comparison
Streamlined cards show 3+ quotes by default, enabling quick, clear comparisons.
Simplified Quotation Editing
Dedicated page enables clearer pricing and easier markup.
Flexible Price Markup
Users can freely edit prices per item, using percentages or manual input.
Comprehensive Order Review
Confirmation page shows all order details, with a clear 'Save as Draft' option for better user control.
Let’s Dive Into the Search Experience Design Exploration
From 8 Hour To 5 Mins
Book and Share Quotes With Clients Anytime And Anywhere
Streamlined Quotes, Faster Decisions
“The mobile version is more convenient, especially when communicating with clients internationally.”
Clear and Quick Price Comparison
“The price bar makes comparing quotes quick and easy.”
Effortless Pricing, No More Spreadsheets
“Markup pricing saves time—no more spreadsheets for every quote!”
FINAL IMPACT
REFLECTION & NEXT STEPS
Optimizing Data Hierarchy for Mobile from Web
I optimized the desktop interface for mobile by creating a layered data hierarchy for clarity and usability.
Streamlined Integration for Cross-Device Use
I learned to streamline mobile and web experiences with simplified booking, price markups, cross-platform editing, and seamless notifications.
Leveraging Usability Data for Cross-Team Alignment
I collaborated with engineers, using data to align user needs with engineering priorities for impactful solutions.
TASK
UX Research
UX Research
Visual Design
Visual Design
Prototyping
Prototyping
TEAM
4 developers
8 developers
8 developers
1 project manager
1 project manager
4 UX designers
4 UX designers
TIMELINE
06 2023 - 09 2023
06 2023 - 09 2023
PROJECT BRIEF
As the lead designer, I owned the end-to-end design of DrayEasy's 0-1 mobile app, simplifying the rate search process for seamless mobile use. Collaborating with PMs and developers, I translated desktop functionality into a mobile-friendly experience, leveraging a shared drayage quote database.
The app shipped successfully, addressing 40%+ mobile login attempts while a parallel team redesigned the web app.
Find Best Drayage Quotes At Anywhere
Find Best Drayage Quotes At Anywhere
Making It Easier for Clients to Search for the Best Price
Making It Easier for Clients to Search for the Best Price
IMPACT
WHAT IS Drayeasy
What is Drayeasy
DrayEasy is a Digital Drayage Platform that Help Cargo Owners find best drayage price
DrayEasy is a Digital Drayage Platform that Help Cargo Owners find best drayage price
26K
26K
+
Containers Moved
Containers Moved
1.5M
1.5M
+
Lanes Covered
Lanes Covered
5000
5000
+
Network Warehouses
Network Warehouses
Over 100 international regions in North America
Over 100 international regions in North America
Covers over 95% of the lanes
Covers over 95% of the lanes
Over 300,000 drayage routes
Over 300,000 drayage routes
Target Users
Target Users
Logistic Manager
Logistic Manager
Who are always on business trips, need to manage, book get instant notification of their shipment orders.
Who are always on business trips, need to manage, book get instant notification of their shipment orders.
Drayage
Drayage
Refers to the transportation of goods over a short distance, particularly within the same metropolitan area, or within the vicinity of ports, warehouses, or rail terminals.
Refers to the transportation of goods over a short distance, particularly within the same metropolitan area, or within the vicinity of ports, warehouses, or rail terminals.
Drayage Carrier
Drayage Carrier
Are responsible for providing drayage services. They own or lease the trucks that carry the goods.
Are responsible for providing drayage services. They own or lease the trucks that carry the goods.
CHALLENGES - USERS
The web application is challenging to access for logistic managers who are frequently outside the office.
The web application is challenging to access for logistic managers who are frequently outside the office.
From the initial interview of our main user group, I started to understand that It takes them up to 15 mins to search and book their desired quotes with current mobile version of the website.
From the initial interview of our main user group, I started to understand that It takes them up to 15 mins to search and book their desired quotes with current mobile version of the website.
Frequent Client Requests on Business Trips
Frequent Client Requests on Business Trips
“During the business trips, I was asked frequently by my clients to provide quotes.”
“During the business trips, I was asked frequently by my clients to provide quotes.”
Delayed Access to Order Status in Web Portal
Delayed Access to Order Status in Web Portal
“Every time while I need to check my order status, I need to wait while opening my web portal.”
“Every time while I need to check my order status, I need to wait while opening my web portal.”
Challenges with Mobile Ordering on Web App
Challenges with Mobile Ordering on Web App
“The mobile version of web app is such a mess, there is no way to place my order with my phone!”
“The mobile version of web app is such a mess, there is no way to place my order with my phone!”
BUSINESS FOCUS
How Might We Help Cargo Owners Book Services More Efficiently And Effectively?
How Might We Help Cargo Owners Book Services More Efficiently And Effectively?
Thus I set the design goal is to design a convenient experience for users to search for best quote with mobile services.
Checkout the final design
Easy Compare of quotes
Easy Compare of quotes
Understand complex options at a glance
Quick visualization of rate details with live map integration
Quick visualization of rate details with live map integration
Grasp most relevant information quickly
Grasp most relevant information quickly
New Integrated Homepage
New Integrated Homepage
Integrated Homepage
View real-time industry rates
Receive important updates of shipments
Book a draft in 2 mins
Book a draft in 2 mins
Leave tedious tasks to desktop
book a draft and secure the quotation in advance
complete container information to desktop later
UNCOVER OPPORTUNITIES & RESEARCH INSIGHTS
My research process
UNCOVER OPPORTUNITIES & RESEARCH INSIGHTS
My research process
UNCOVER OPPORTUNITIES & RESEARCH INSIGHTS
My research process
REGARDING THE POOR NAGIVATION EXPERIENCE
REGARDING THE POOR NAGIVATION EXPERIENCE
Create the most efficient search experience
Create the most efficient search experience
Through a series of testing, I have came up with the best layout structure of the home page, filtered the most relevant information to assist the search process.
Through a series of testing, I have came up with the best layout structure of the home page, filtered the most relevant information to assist the search process.
Design Iteration 01
Search Quotes
Design Iteration 01
Search Quotes
Checkout the new dashboard experience
Checkout the new dashboard experience
FINAL DESIGN SOLUTION
FINAL DESIGN SOLUTION
New integrated homepage
New integrated homepage
Users need
Easy accessible search on-boarding experience.
Easy accessible search on-boarding experience.
Business prefer
Fast quote searching process.
Fast quote searching process.
Engineers require
Engineers need a streamlined information retrieval system.
Engineers need a streamlined information retrieval system.
Intuitive onboarding search
Intuitive onboarding search
Convenient usability with prominently displayed search history and popular suggestions
Convenient usability with prominently displayed search history and popular suggestions
Dynamic Rate Suggestions
Unavailable rates trigger alternative suggestions for quick decision-making.
Unavailable rates trigger alternative suggestions for quick decision-making.
Request Own Rate Directly
Users can request custom rates with cargo details and comments directly in the mobile app.
Users can request custom rates with cargo details and comments directly in the mobile app.
Engineers require
Users get instant notice for searched result with limited access.
Users get instant notice for searched result with limited access.
REGARDING THE DIFFICULTY IN COMPARING RATES
REGARDING THE DIFFICULTY IN COMPARING RATES
Currently, it takes users up to 15 mins to compare and select the best rate.
Currently, it takes users up to 15 mins to compare and select the best rate.
From the initial round of interviews, I realized that users often feel overwhelmed by unorganized search results. As a UX designer, my goal was to redesign the comparison experience, enabling users to quickly grasp key rate information and make faster selections.
From the initial round of interviews, I realized that users often feel overwhelmed by unorganized search results. As a UX designer, my goal was to redesign the comparison experience, enabling users to quickly grasp key rate information and make faster selections.
Users need
Clear information hierarchy for quick decisions.
Business prefer
Streamlined comparisons to boost conversions.
Engineers require
Scalable, easy-to-implement components.
Design Iteration 01
Compare Quotes
Design Iteration 01
Compare Quotes
Design Iteration 01
Compare Quotes
REGARDING THE LACK OF INFORMATION DISPLAYED ON CARD
REGARDING THE LACK OF INFORMATION DISPLAYED ON CARD
Enhanced Price Card Design for detail understaning
Enhanced Price Card Design for detail understaning
I made the price card more compact for better readability and moved terminal selection to the next step, maximizing map space and improving comparisons.
I made the price card more compact for better readability and moved terminal selection to the next step, maximizing map space and improving comparisons.
Design Iteration 01
Card Design
Design Iteration 02
Card Design
Final Design
Card Design
Checkout the new dashboard experience
Checkout the new dashboard experience
FINAL DESIGN SOLUTION
FINAL DESIGN SOLUTION
Easy compare of different city routes in 2 mins
Easy compare of different city routes in 2 mins
Enhanced Quote Comparison
Streamlined cards show 3+ quotes by default, enabling quick, clear comparisons.
Simplified Quotation Editing
Dedicated page enables clearer pricing and easier markup.
Flexible Price Markup
Users can freely edit prices per item, using percentages or manual input.
Comprehensive Order Review
Confirmation page shows all order details, with a clear 'Save as Draft' option for better user control.
REGARDING THE DIFFICULTY IN COMPARING RATES
Currently, it takes users up to 15 mins to compare and select the best rate.
From the initial round of interviews, I realized that users often feel overwhelmed by unorganized search results. As a UX designer, my goal was to redesign the comparison experience, enabling users to quickly grasp key rate information and make faster selections.
Users need
Clear information hierarchy for quick decisions.
Business prefer
Streamlined comparisons to boost conversions.
Engineers require
Scalable, easy-to-implement components.
Design Iteration 01
Compare Quotes
Design Iteration 01
Compare Quotes
Design Iteration 01
Compare Quotes
REGARDING THE LACK OF INFORMATION DISPLAYED ON CARD
Enhanced Price Card Design for detail understaning
I made the price card more compact for better readability and moved terminal selection to the next step, maximizing map space and improving comparisons.
Design Iteration 01
Card Design
Design Iteration 02
Card Design
Final Design
Card Design
Checkout the new dashboard experience
FINAL DESIGN SOLUTION
Easy compare of different city routes in 2 mins
Enhanced Quote Comparison
Streamlined cards show 3+ quotes by default, enabling quick, clear comparisons.
Simplified Quotation Editing
Dedicated page enables clearer pricing and easier markup.
Flexible Price Markup
Users can freely edit prices per item, using percentages or manual input.
Comprehensive Order Review
Confirmation page shows all order details, with a clear 'Save as Draft' option for better user control.
FINAL IMPACT
REFLECTION & NEXT STEPS
Optimizing Data Hierarchy for Mobile from Web
I optimized the desktop interface for mobile by creating a layered data hierarchy for clarity and usability.
Streamlined Integration for Cross-Device Use
I learned to streamline mobile and web experiences with simplified booking, price markups, cross-platform editing, and seamless notifications.
Leveraging Usability Data for Cross-Team Alignment
I collaborated with engineers, using data to align user needs with engineering priorities for impactful solutions.
x
4
Fasrer in Work Completion
+
230
230
Increase in Active Users
%
Find Best Drayage Quotes At Anywhere
Making It Easier for Clients to Search for the Best Price
TASK
UX Research
Visual Design
Prototyping
TEAM
8 developers
1 project manager
3 UX designers
TIMELINE
06 2023 - 09 2023
PROJECT BRIEF
As the lead designer, I spearheaded the end-to-end design of DrayEasy's mobile app from 0-1, streamlining the rate search process for optimal mobile usability. Working closely with PMs and developers, I adapted desktop features into a mobile-friendly interface, utilizing a shared drayage quote database. The app launched successfully, capturing over 40% of mobile login attempts while a parallel team revamped the web app.
IMPACT
8 hrs to 5 mins
96% reduction in time spent
x
4
Faster in Work Completion
+
230
Increase in Active Users
%
WHAT IS Drayeasy
DrayEasy is a Digital Drayage Platform that Help Cargo Owners find best drayage price
26K
+
Containers Moved
1.5M
+
Lanes Covered
5000
+
Network Warehouses
Over 100 international regions in North America
Covers over 95% of the lanes
Over 300,000 drayage routes
CHALLENGES - USERS
The web application is challenging for logistics managers to access due to their frequent time outside the office.
From the initial interview of our main user group, I started to understand that It takes them up to 15 mins to search and book their desired quotes with current mobile version of the website.
Target Users
Logistic Manager
Who are always on business trips, need to manage, book get instant notification of their shipment orders.
Drayage
Refers to the transportation of goods over a short distance, particularly within the same metropolitan area, or within the vicinity of ports, warehouses, or rail terminals.
Drayage Carrier
Are responsible for providing drayage services. They own or lease the trucks that carry the goods.
Frequent Client Requests on Business Trips
“During the business trips, I was asked frequently by my clients to provide quotes.”
Delayed Access to Order Status in Web Portal
“Every time while I need to check my order status, I need to wait while opening my web portal.”
Challenges with Mobile Ordering on Web App
“The mobile version of web app is such a mess, there is no way to place my order with my phone!”
User Centric - Opportunities
How Might We Help Cargo Owners Book Services More Efficiently And Effectively?
Thus I set the design goal is to design a convenient experience for users to search for best quote with mobile services.
Checkout the final design
Easy Compare of quotes
Understand complex options at a glance
Quick visualization of rate details with live map integration
Grasp most relevant information quickly
New Integrated Homepage
Integrated Homepage
View real-time industry rates
Receive important updates of shipments
Book a draft in 2 mins
Leave tedious tasks to desktop
book a draft and secure the quotation in advance
complete container information to desktop later
UNCOVER OPPORTUNITIES & RESEARCH INSIGHTS
Learn more about my research process
Let’s Dive Into the Search Experience Design Exploration
REGARDING THE POOR NAGIVATION EXPERIENCE
Create the most efficient search experience
Through a series of testing, I have came up with the best layout structure of the home page, filtered the most relevant information to assist the search process.
Design Iteration 01
Search Quotes
Need more info of cargo details display on card.
Need of increasing input detail for quote searches.
Design Iteration 01
Search Quotes
Lack of information hierarchy slows user navigation.
Information overload overwhelms users.
Checkout the new dashboard experience
FINAL DESIGN SOLUTION
New integrated homepage
Users need
Easy accessible search on-boarding experience.
Business prefer
Fast quote searching process.
Engineers require
Engineers need a streamlined information retrieval system.
Intuitive onboarding search
Convenient usability with prominently displayed search history and popular suggestions
Dynamic Rate Suggestions
Unavailable rates trigger alternative suggestions for quick decision-making.
Request Own Rate Directly
Users can request custom rates with cargo details and comments directly in the mobile app.
Engineers require
Users get instant notice for searched result with limited access.
Search efficiently with cargo details input within 2 mins.
Explore the previous history for fast reuse.
Clear and compact cargo information overview.
REGARDING THE DIFFICULTY IN COMPARING RATES
Currently, it takes users up to 15 mins to compare and select the best rate.
From the initial round of interviews, I realized that users often feel overwhelmed by unorganized search results. As a UX designer, my goal was to redesign the comparison experience, enabling users to quickly grasp key rate information and make faster selections.
Users need
Clear information hierarchy for quick decisions.
Business prefer
Streamlined comparisons to boost conversions.
Engineers require
Scalable, easy-to-implement components.
Design Iteration 01
Compare Quotes
Confusing quote details without visual context.
No route visualization hinders quick comparisons.
Design Iteration 01
Compare Quotes
Map size too small for clear navigation.
Single-route view limits side-by-side comparisons.
Design Iteration 01
Compare Quotes
Larger map improves route comparison.
Horizontal scrolling hinders cargo detail viewing.
REGARDING THE LACK OF INFORMATION DISPLAYED ON CARD
Enhanced Price Card Design for detail understaning
I made the price card more compact for better readability and moved terminal selection to the next step, maximizing map space and improving comparisons.
Design Iteration 01
Card Design
Design Iteration 02
Card Design
Final Design
Card Design
Oversized card limits screen space and reduced visibility.
Card design lacked clear terminal distinctions, and the button was unnecessary.
The final design uses a gradient bar for price ranges, a compact card, and highlights the average price.
Experience smarter rate comparisons!
FINAL DESIGN SOLUTION
Easy compare of different city routes in 2 mins
The live map displays terminal codes and names at all scales, enabling easy terminal location.
Streamlined and well-structured price card design that enhances readability and understanding.
An optimized layout and clear hierarchy enabling faster comparisons and more confident decision-making.
Enhanced Quote Comparison
Streamlined cards show 3+ quotes by default, enabling quick, clear comparisons.
Simplified Quotation Editing
Dedicated page enables clearer pricing and easier markup.
Flexible Price Markup
Users can freely edit prices per item, using percentages or manual input.
Comprehensive Order Review
Confirmation page shows all order details, with a clear 'Save as Draft' option for better user control.
From 8 Hour To 5 Mins
Book and Share Quotes With Clients Anytime And Anywhere
Streamlined Quotes, Faster Decisions
“The mobile version is more convenient, especially when communicating with clients internationally.”
Clear and Quick Price Comparison
“The price bar makes comparing quotes quick and easy.”
Effortless Pricing, No More Spreadsheets
“Markup pricing saves time—no more spreadsheets for every quote!”
FINAL IMPACT
REFLECTION & NEXT STEPS
Optimizing Data Hierarchy for Mobile from Web
I optimized the desktop interface for mobile by creating a layered data hierarchy for clarity and usability.
Streamlined Integration for Cross-Device Use
I learned to streamline mobile and web experiences with simplified booking, price markups, cross-platform editing, and seamless notifications.
Leveraging Usability Data for Cross-Team Alignment
I collaborated with engineers, using data to align user needs with engineering priorities for impactful solutions.
