Find Best Drayage Quotes At Anywhere

A Mobile App searching quotes feature design

Timeline

Device

Team

Responsibilities

Jun. - Sept. 2023
Mobile Application
PM: Walter Zhou
Design Lead: Bing Liu
Design Team: Freya Pan, Ziyu Song
UX research, Wireframe, Design Iteration, Mid-fi Mockup, Hi-fi Mockup, Prototyping

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.

Before Starting

πŸš›

Expedia For Drayage!

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.

πŸ“±

But what's the gap? - scenarios requires mobile adaption

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

πŸ’Ό

My responsibility

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.

Check Out My Solutions

Comparing Price Easily

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.

Locking the Rate before completing the order

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.

Sharing Marked-Up Quotations Effortlessly

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.

But wait, how did you get there?

πŸ€”οΈ

Firstly, I synthesized data from user interviews to understand why do customers prefer searching for quotes on their mobile phones and how they feel about the experience now.

What users need from the quote searching feature:
‍
1. To get quick quotes
Users wants to get instant quotes and generated price sheet to her customers quickly so that she can secure orders as soon as possible
2. To get a price with low fluctuation in future
Users normally book drayage service 2-3 months before. She want to the quote she get has low fluctuation compare with the actual price.
3. To get enough information for predicting possible price change in future
Users want to get as much information as possible to predict potential price fluctuation, especially location, drayage route, and weather impact. They are most common factors whose impact on final price can be predicted.

Thus, we asked

HMW provide users an efficient, intuitive, and conventient experience for users to search quotes, compare quotes, and share quotes with their customers on phones

🧐

Meanwhile, The team tried to capture a first impression on mobile adaption from our competitor, and gained some insight from them.

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.‍

1. Simplify: Streamlining functionality at mobile end and suggesting users to complete complicated tasks at desktop-end.
‍
2. Adaption: Adapting wide table at mobile screen meanwhile making sure uesrs can get all information they need and compare quotes easily.
‍
3. Mapping: Displaying route and terminal information on a map coordinately to help users better understand and predict price.
‍

😩

Besides, the team also identified some segments that we can do better during users' journey. and users' emotional curve ends with a down point!

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.

What Are The Pain Points in Current Experience

Lack Of Data Hierarchy

Inefficient Horizontal Price Comparison

Cumbersome Order Placement

Time-Consuming Quotation Handling

Ideation & Design Iteration

Workflow

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.

Wireframe & Iteration

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

Testing & Iteration

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

We Made it!

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.

Design Impact

90% satisfaction rate

The mobile App design is under development. We did a beta test and usability tests on some feature with the loyal customer group

Users' Feedback

"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"

What I Learned

1. Biggest Challenge: Prioritizing data when adapting desktop interface to mobile screen

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

2. Simplify & Efficiency

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.

3. Create new components with existing design system

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.