Trucking Services Web App Revamp
DrayEasy, a last-mile container delivery service, faced a critical issue: while most users searched for rates, seldom did they complete bookings. This disparity indicated significant barriers in the user journey.
As a UX consultant, I aimed to redesign DrayEasy's web interface to simplify the booking process and enhance the conversion rate.
My Role
Interface Design
User Research
Design System
Team
3 Designers (Me)
2 Developers
1 Product Manager
Duration
Mar - May 2023
Tool
Figma, FigJam
Project Background
DrayEasy seeks design recommendations for a visual overhaul and usability improvements to enhance its web portal for delivery bookings.
Project Scope
Redesign DrayEasy's web portal, especially the booking experience. The goal is to convert the high volume of search users into completed bookings by addressing key usability barriers.
Deliverable
Conduct primary research with target users, ideate feasible solutions to user pain points, develop high-fidelity screens and hand off to the development team.
RESULTS
Snapshots of what‘s achieved in this project
Before
After
What our client & user says
Walter Zhou
@Product Owner at DrayEasy
"Our collaboration with the design team was a game-changer. The new interface not only elevated our brand image but also helped us improve customer satisfaction rates."
Ms. Liang
@10+yoe as freight forwarder
"As a frequent user of DrayEasy's delivery service, the new design has transformed my booking experience. The interface looks nice and is incredibly user-friendly."
Background
BACKGROUND
DrayEasy is a platform for real-time quotes of container delivery
They provide instant online pricing for major carriage routes, so customers can skip the manual price checks and save time and effort.
PROBLEM
...but DrayEasy is currently seen as a quoting tool, not a booking platform
70% of users searching for quotes. However, only 10% of these users complete bookings on the web portal. The rest of the ordered are placed through emailing.
WHY IS THIS IMPORTANT?
Manual order placement is inflating operational costs
This inefficiency highlights roadblocks that keep users from fully leveraging the booking feature.
Research
PROCESS
How did we identify the key barriers in DrayEasy's booking experience?
Primary Research
Usability testing with 8 users
Current product critique
Secondary Research
Competitive analysis with 4 benchmarks
Synthesis
Affinity mapping
User journey mapping
KEY TAKEAWAY 1: PRE BOOKING
Multiple Call-to-actions in parallel causes confusion and prevents users from making a booking decision
75% of users reported that they have trouble selecting the next action to take.
— From usability testing
The current product presents three parallel CTAs after the price quote—"Pre-Book," "Book," and "Bid."
But the difference between them? Not clear.
KEY TAKEAWAY 2: DURING BOOKING
The lack of information hierarchy in the booking form caused users to feel overwhelmed
1/3 of users indicated that they feel overwhelmed by the too much information in the booking process.
— From usability testing
The current design bombards users with too much information at once—too many fields, too many options.
On top of that, inconsistent capitalization and jargon overload make it even harder to process.
KEY TAKEAWAY 3: DURING BOOKING
Bulk information must be uploaded manually, causing inconvenience to efficiency-driven users
“Sometimes we need to add more than 20 containers at one time. It's too much trouble inputting info for every container."
— Quote from current user
For larger orders with multiple containers, users have to manually upload each container’s details one by one—slow and tedious.
KEY TAKEAWAY 4: AFTER BOOKING
Users are skeptical of the price information in the quotation and are unsure what the final price is
87% of users indicated that they were unsure if the quoted price is valid. Lack of pricing clarity was the top reason mentioned.
— From usability testing
Each quote includes a list of potential extra charges and multiple charge "scenarios," making the price breakdown overly complex and confusing for users.
PROBLEM REFRAMING
Based on the issues identified in usability testing, I reframed the challenge to..
Pre Booking
How might we simplify the booking process by reducing the number of parallel call-to-actions to help users make clear booking decisions?
During Booking
How might we refine the information hierarchy and reduce the need for repetitive action in the booking form to prevent users from feeling overwhelmed?
After Booking
How might we build trust in the pricing by providing clearer and more transparent quotations to ensure users understand the final price?
Ideation
INSPIRATIONS
Next, we looked into how benchmarks approach these problems
From studying benchmarks, I discovered these actionable insights.
Visual Cues
Icons and font variations break up dense info, making it easier to scan.
Cut the Clutter
Limit on-screen fields to keep the process smooth and frustration-free
Price Guarantees
Highlight locked-in rates, refund policies, or comparisons to reassure users
WIREFRAME EXPLORATIONS
Through iterative wireframe explorations, we approached the preferred screen layout
By creating parallel wireframes, we systematically explored various interface layouts to identify the most effective design. Key takeaways included:
Enhancing the CTA button: We can use a gradient accent color to improve visual appeal and draw user attention, while applying more muted color for other actions such as the side bar.
Utilizing the space wisely: To maximize the form space, we can adopt a two-column layout and remove unnecessary information such as an address map.
Based on these reasons, we decided to move forward with option D.
DESIGN SYSTEM
To enhance the visual appeal and consistency of the product, we developed a comprehensive design system
Solution
Pre Booking
SOLUTION 1
To enhance decision-making, we focused on revising the product workflow to reduce the number of call-to-actions
We worked closely with the client team to determine the relative importance and priority of information and made a few key changes to the product workflow.
Combined three separate CTA flows into a single, cohesive flow
Made unnecessary information optional to reduce clutter
Broke each page into finer sections for improved clarity and usability
During Booking
SOLUTION 2
Step-by-step form to reduce user cognitive overload
Before:
Booking form as a one-page pop-up
Lots of required information
No zoning or advanced visual coding
After:
Four separate pages based on information affinity
Require only the necessary info at the start
Icons and colors to enhance visual appeal
SOLUTION 3
Support bulk uploading and multi-edit to allow users to upload and manage information for multiple containers simultaneously
Before:
Manually upload bulk information
Edit information of one container at a time
After:
Manage multiple containers info simultaneous
View all container info side by side
After Booking
SOLUTION 4
Use detailed price breakdowns and predictive pricing to enhance transparency and user trust
Before:
Confusing wording like "best/average scenario"
A long, uncertain list of possible charges
No way to check order information
After:
Detailed price breakdown
Predictive pricing based on historical data
Order info confirmation before placement
Next Steps
WHAT ARE THE NEXT STEPS?
More technical integration: Using OCR in file reading to reduce the need for manual input
HOW TO CONTINUOUSLY IMPROVE USER EXPERIENCE?
Leveraging user data to identify opportunities
Conversion Rate Tracking
Track users journey with finer granularity
Understand where users drop out of the journey
Net Promoter Score as Assessment
Regularly track users' satisfaction rate
Iterate based on user feedback
MY LEARNING & REFLECTION
Domain knowledge is especially important in B2B SaaS industry
I'm grateful for how research on the international logistics industry equipped me with deep domain knowledge. The background understanding allowed me to tailor solutions that precisely address the pain points to freight forwards, our target users.
