Expect to launch in 2024
DrayEasy Mobile App Design
Overview
DrayEasy
DrayEasy is a B2B SaaS product that helps cargo owners search, book, and manage drayage services in North America. DrayEasy combines real-time quotes, top-tier drayage services, shipment tracking, and seamless API integration, all in one efficient platform.
The Project
Our project is dedicated to developing the DrayEasy mobile app from the ground up, focusing on key features like the order list, draft order, notification, and message system.
Duration: 3 months (September - December 2023)
What I Did
User Research
Competitive Analysis
User Journey Map
Ideation
Order Management Prototyping
Usability Testing / Iterations
The Team
Product Owner
5 Product Designer
Product Manager
Development team
Result
100% task completion rate
Reduce the order browsing time from 15 minutes to 2 minutes
90% approval rate from the product team
Background
Who are Freight Forwarders?
For freight forwarders (FF), one of the most challenging part in the whole process is to find a reliable trucker with good rate to help them move the container for the last miles. There are around 100 intermodal regions in North American and it's difficult for the FF to manage the trucks and rate quotes for different lanes.
DrayEasy has built the first in the market rate engine that the customer can get rates instantly for over 95% of the lanes. With an increase in users, DrayEasy find out that there is a strong need from FFs to have a mobile app for quick search and order checking.
Problem freight forwarders facing
Under many conditions, user want to check the order status or manage their order list outside of the office such as at port site or on the road. Recognizing the demand for mobility of service, the order feature of the mobile app is required.
Problem Statement
How might we optimizing DrayEasy mobile app with more accessible experience so that customer can rely it for order management?
Research / Domain Knowledge
Domain knowledge keyword
Research / Web Critique
To start with, we analyze the current website order feature to identify existing problem
Research / Competitive Analysis
Dig into competitors to understand the drayage market and identify opportunities and challenges
Take Aways
Improve user experience by breaking down the long process into several steps while maintain a seamless user flow
Avoid making interaction back and forth too many times between pages
Simplify user operation as mobile app has limitation with data input
Notification and message is an important feature to help user keep up to date with the orders
Business Model
Persona & User Journey
Based on the user interview from the previous team we created persona and user journey map to identify pain points and opportunities for app users
Ideation
We redesigned the mobile order management user flow based the previous web user-flow
Key Feature:
Order list to input container and check specific container
Push notification
Notification list
View draft order list
Click on image to zoom in
Wireframes
Key Wireframes
Cross-functional team feedback & Iterations
Based on the feedback from product owner, product manager, and the development team we performed various iterations
Order List Iterations
Iteration 1
Card style is inefficient for limited mobile space
Using a bottom sheet for draft orders is unnecessary as there's no back-and-forth interaction between draft and my orders.
Draft Order List Iterations
Iteration 1
Filter is unnecessary for draft order list as there will be fewer orders comparing to the order list typically range from 4 -7
Notification Iterations
Iteration 2
Too much info in text on the left
Too much colors on the right
User use city name instead of MBL# for browsing
Limited space for IR city or destination city details
Iteration 1
Unnecessary to show order status at notification
Too many color distract users from the important notification content
Final Iteration
Using tabs for more accessible switch between order lists
Highlight IR city and destination city for easy scanning by casual browsers
Color-highlight only the release status
Ensure ample white space for clearer information hierarchy
Final Iteration
Distinction in color to visualize approaching expiration date
Grey out expired draft orders
Following similar card layout as the “my order” list destination and price aligns right for better readability
Final Iteration
Delete order status from the design for readability
Add “flag” sign for user to mark important message
Final Prototype
Draft order 1.1(order details)
Displays the status of draft orders (Editable, Expiring Soon, Expired)
Provides a detailed view of each draft order
Offers a comprehensive breakdown of charges associated with each draft order
Notification1.1
Unread notifications are shown with blue dots and unread notifications are shown with bold fonts
Users can flag important information, and swipe left for deleting notifications
Search & Filter feature, users can search by keywords or filter by “Flagged” and “Unread” category.
Pushed notification shows highlighted informations of new notifications.
Quick Action
With a simple left swipe on the order list, users can instantly access the 'hold' action button to pause deliveries, eliminating the need to delve into further details.
Draft order 1.2
Find the draft order you wish to delete and swipe left on the order card to reveal the 'Delete' button
A confirmation pop-up will appear asking if you're sure you want to delete the draft order. It will warn you that this action is permanent.
Tap 'Confirm' to permanently delete the draft order from your list or 'Cancel' if you've changed your mind or tapped 'Delete' accidentally.
Notification 1.2
There are three forms of notifications:
Linked to App internal page with quotes in progress
Linked to App internal page with incomplete quotes
No links / linked to outside platforms
Notification content includes the following:
Upload custom materials/ Invoice Update/ Delay due to weather condition/ Please submit pick-up number/ Request rate is ready/ Unfinished quotes expiration date