Project Overview
This product is a 0-1 mobile app design based on desktop web applications. Both products share a common foundation, which is a comprehensive database containing thousands of drayage quotes across North America. The design responded to the increasing demand for mobile adaptiveness. by simplifying key quote search features for seamless usage on the mobile app.
I collaborated closely with the PM, developers, engineers, and fellow designers to deliver a mobile app design to DrayEasy's founder. After completing my time with them, the app was shipped and sent to some loyal customers.
This product is a B2B SaaS product that helps cargo owners search, book, and manage drayage services in North America. It focuses on the "last-mile" delivery of Intercontinental freights. Its rich database includes over 3000 main routes' quotations It has helped move over 26,000 containers and delivered them to more than 5,000 warehouses.
Business Goal
To help cargo owners find the best drayage price, connect carriers, and make drayage easier.
In various situations, users often need to retrieve quotes outside the office, whether it be at clients' offices or port sites. Recognizing the demand for the mobility of the services, a mobile app is required.
Problem Statement
Users are facing the challenge of searching for quotes efficiently outside the office while working onsite while current product doesn't support searching for quotes on mobile devices
Working with a design manager, a product manager, and two designers in the team, the team was in charge of designing the search experience. My responsibility was creating an experience for users to compare and comprehend quotes on mobile devices.
Visualizing routes and quotation data on maps, gradient bars, and easily readable tables to offer users a clear, graphical depiction of routes and pricing elements.
Users can utilize the visualized price bar on the terminal list and accessorial charges table to compare fee standards and potential cost variations among different terminals, enabling them to pinpoint the most advantageous quotation easily.
Users have the option to save orders as drafts at the mobile end, allowing them to complete the orders later on a computer. This feature enables users to secure a quotation without the need to immediately fill in all order information on a mobile device.
Following the creation of an order or order draft, users can apply a price markup and instantly share it with their clients on their mobile devices, making it possible to provide quotes to clients on-the-go.
The primary users of DrayEasy are Freight Forwarders who offer drayage services in the United States to clients worldwide. They are highly organized, detail-oriented, thoughtful, and price-conscious.
Thus, we asked
Given the design problem, the team conducted a competitive audit. We looked at mobile adaption on different drayage booking platforms, learning the strategies of transferring functions from desktop app to mobile app.
In the process of searching for the lowest price on the website, there are three specific points on the emotional curve where user satisfaction tends to decrease. Our design focuses on these critical points to enhance the user experience and address these areas of dissatisfaction. Crucially, our goal is to ensure that users' emotional journey concludes on a high note, as it significantly shapes their overall impression of this experience.
- Trying to understand why more than one route is showing up while reading long price break down list
- Facing difficulties inputting tons of order information at the planning stage with missing containers, shipping, and warehouse information
- Requiring additional effort to mark up prices and transfer detailed price data to a spreadsheet before sending quotations to clients.
The entire process can be divided into three steps: searching, browsing & comparing, and booking.
Recognizing that executing complex tasks on mobile devices can be challenging and frustrating, we have streamlined the process by eliminating certain time-consuming steps. The most significant change is in the booking phase, where we have simplified the required order information to only request user confirmation of route details before placing an order.
Following the ideation process outlined above, I have explored screen layouts as wireframes for the three primary screens corresponding to the three main steps.
And developed a whole wireframe based on the winners
1. Interactable map
Cluster nearby terminals into groups and show on the map with group names, port codes, and associated prices.
😞 While users have problems finding the terminal they were looking for because they can't see the full name on the map.
Show all terminals on the map when users jump onto the page. Automatically zoom in to one terminal and only show all terminals' names at that scale.
😕 Users still think it's difficult to find the terminal in the all-zoomed-out view.
Ensure that both the terminal's code and full name are consistently visible on the map view at various scales. This way, users can easily locate their desired terminal, even if there is an overlapping of names.
👍 Facilitate users in effortlessly locating terminals they are searching for.
2. Route's Card Design
3. Terminal List
Terminals' quotes are collapsed as cards with two buttons. Supplementary information is shown at the top as a red banner.
🙁Buttons are unnecessary since both the company and the customers tend to check price details before taking any actions. Alert color doesn't match with the property of the infromation.
Quotes are collapsed as cards with a button. Switch color from red to blue
😕 Users have difficulty comparing quotes horizontally with only two quotes can be shown on the screen.
Simplify the card and show more than 3 quotes on the default status screen.
👍Easy to compare, clear visualization.
4. Confirmation Page
The confirmation page only displays essential order information. Detailed route information and price breakdowns can be found on the price detail page. Additionally, users are reminded to complete the order on the desktop version.
😞 Users fail to find detailed order information
Display all order information on the confirmation page, and label the button with "Save as Draft."
👍 Users can review all information on this page, and the action is now clearer.
5. Markup Price
Viewing quotation details and marking up the price are on the same screen.
😕 Hard to operate complex tasks on one page.
Navigating to a new page to edit the quotation details
👍 Clear quotation price list and easier-to-operate price markup.
Allow users to select items that will be shown on shared quotations.
😞 The default price detail only includes relevant items. It is unnecessary to let users select.
Allow users to mark up the price of every item.
👍 Edit price details freely
Price can be marked based on percentage or manually input
👍 Flexible input
A Brand New Mobile Experience For Rate Searching
The mobile experience provides users with the opportunity to conveniently and quickly search for prices anytime and anywhere.
From 8 Hour To 5 Mins: Share Quotations With Clients Anytime And Anywhere
Before having a mobile app, freight forwarders would spend up to 8 hours preparing a quotation received from Drayage Carriers and converting it into a client-ready quotation, especially when there is a time difference between freight forwarders and drayage carriers. The mobile app allows freight forwarders to skip the waiting time for carriers, enabling instant sharing of client-ready quotations. The final user test with volunteer users showed that the time to search routes, understand quotations, mark up prices, and share the quotation with clients dropped to 5 min.
The mobile App design is under development. We did a beta test and usability tests on some feature with the loyal customer group
"I find the mobile version more convenient than the web app. I work from home every night because our clients are mostly in Asia. Using my phone for tasks lets me communicate with them faster"
"I really like the data visualization on quotes. The price bar is straightforward to read and makes it easy for me to compare prices"
"The markup price function is a big help. It'll save me a ton of time, as I won't have to create spreadsheets every time I send quotes to clients"
The biggest challenge in this project for me is to understand how users prioritize different types of information. Compared to the desktop version, the mobile device has limited space on each page. I had to organize a data hierarchy that allowed users to elaborate layer after layer. From the interview insight, users kept emphasizing all data are important because every price item can affect the final cost. Due to the time limit, I didn't have a chance to conduct card sorting to study how users prioritize information. But I got chances to ask them in usability tests. Finally, reflected the information hierarchy on users flow
Due to variations in user scenarios and habits across different devices, it's crucial to adapt functions as well when designing and developing mobile applications based on web applications. In this project, the team streamlined the booking process and introduced the ability to mark up prices and share quotes by cutting most features on the mobile app. However, it avoided leaving a negative experience to users.
As I was responsible solely for the quote search feature, collaboration with other teams was necessary to comprehensively design the app. Despite the ongoing development of the design system, we both had to continuously maintain and revise it to ensure effective communication. In the initial stages, we didn't have a well-established mobile app design system in place. I had to create and continuously add components to the design library as we progressed through the design process.