About

Improving B2B Logistics Quotation Process

User-friendly online forms to streamline and simplify the quotation process, reduces costs, and increases conversions.

Date

2022-23

Role

Solo Product Designer

About The Project

Beeontrade, an omnichannel B2B logistics company, serves businesses of all sizes across a wide range of logistics sectors. The company wanted to streamline and improve the quotation process using their website.

I have designed more than 10 different user-friendly online quote request forms, aiming to simplify and streamline the quotation process for a seamless experience.

Customs

Brokerage

FTL Truck

Shipments

LTL Truck

Shipments

Ocean FCL

Shipments

Ocean LCL

Shipments

Air

Shipments

Express

Shipments

Fulfillment

Services

Warehouse

Services

Insurance
Services

Drayage

Services

Problem Definition

In logistics, obtaining quotes has traditionally been a time-consuming and inefficient process with low discoverability, often requiring multiple email exchanges or phone calls. This not only creates a burden for both parties involved, but also leads to potential delays and errors in communication.

Goal

Improve the discoverability of the services offered, accelerate the quoting process, attract customers to use our services with ease, and save costs by optimizing our team's valuable time.

Process

We initiated the process by holding a stakeholder meeting to gain a comprehensive understanding of the business, product vision, and limitations, as well as the organization's insights on potential users and current solutions.

Analyzing The Existing Solution

I have mapped out the user journey of the current way of providing quotes with our team to learn more about the process and uncover opportunities for both online and offline quotation processes.

This exercise revealed valuable insights for both the quotation forms we were creating manual way of handling the quotation process.

This exercise revealed valuable insights for both the quotation forms we were creating manual way of handling the quotation process.

This exercise revealed valuable insights for both the quotation forms we were creating manual way of handling the quotation process.

Competitor Analysis

I analyzed competitors for each service type, examining their flow, the structure of their quotation forms, the information they requested, and the methods of presenting information.

Through this process, I discovered that some competitors had lengthy quotation forms that required users to provide extensive information upfront or in some cases required users to sign up. On the other hand, some competitors did not request essential information, causing a cycle of back-and-forth emailing for accurate quotes.

Defining The Target Users

Quotation forms can be used by anyone, but knowing our target audience is crucial for an good user experience, especially since logistics can have complex terminology and overwhelming details.

Using our team's experience and available data from previous interactions with the customers, we determined the target audiences for each service type in line with the existing marketing segmentation.

Ideation

For each quotation form, we had meetings with the operations team to find out what information they need in order to give an accurate quote. We have analyzed e-mails exchanges and the issues they have faced during quotation process.

Based on our outcomes of our meetings, I've developed an early text-based prototypes of the forms to identify any missing information required from customers or unnecessary questions that don't serve a purpose at this stage of the quotation process.

After optimizing these text based forms, I requested quotes from the team using hypothetical scenarios. This exercise uncovered critical follow-up questions, such as “Is your load stackable?” or “Does your shipment contain flammable materials?” which were not initially considered but significantly impact pricing. I refined the forms based on these discoveries.

Design

UI Design

The company had a visual language in place, but inconsistent UI across the website. I systemized the user interface by creating a responsive UI Kit using Atomic Design Methodology in Figma. After creating the basic elements and components, I have expanded this UI kit as our needs grew.

We chose a multi-column layout for aesthetic purposes, even though it is generally advised to use a single column layout for forms. But, in an effort to keep cognitive load low, I organized form fields into logical groupings and established a common pattern across forms:

  • transportation method,

  • direction details,

  • shipment details,

  • and shipment features.

We chose a multi-column layout for aesthetic purposes, even though it is generally advised to use a single column layout for forms. But, in an effort to keep cognitive load low, I organized form fields into logical groupings and established a common pattern across forms:

  • transportation method,

  • direction details,

  • shipment details,

  • and shipment features.

We chose a multi-column layout for aesthetic purposes, even though it is generally advised to use a single column layout for forms. But, in an effort to keep cognitive load low, I organized form fields into logical groupings and established a common pattern across forms:

  • transportation method,

  • direction details,

  • shipment details,

  • and shipment features.

We chose a multi-column layout for aesthetic purposes, even though it is generally advised to use a single column layout for forms. But, in an effort to keep cognitive load low, I organized form fields into logical groupings and established a common pattern across forms:

  • transportation method,

  • direction details,

  • shipment details,

  • and shipment features.

I have utilized type-ahead search fields, also known as autocomplete search, to minimize the amount of user input required and to avoid the inconvenience of navigating through lengthy dropdown menus.

I have chosen colors and typography that are highly legible and have appropriate contrast for those with visual impairments. Additionally, I have ensured that error states are clearly and prominently displayed.

Testing & Improvements

We conducted limited number of user tests and used Clarity (a behavior analytics tool) to gather feedback on the implemented design. We were able to identify several key issues that need to be addressed:

Insufficient Feedback When Selecting Services

We organized similar service forms into groups with selectable buttons at the top of each page. Although the selected button was visually distinct, some initial text fields remained identical across services.

In our usability testing sessions, we observed that, this caused confusion as users tried to confirm if their selection registered by the system by reclicking their selection. The issue was worse on devices with shorter screens.

To quickly address this issue, I suggested adding the service name as a title on top of the form.

Poor Error Handling

As all fields were required in our forms, we refrained from using asterisk notation for every field. However, user testing and behavior analytics data revealed that some users left some fields blank and attempted to proceed to the next page.

We aimed for a system that would highlight fields requiring attention and return to the top when the user clicks 'Continue'." But development time constraints forced us to compromise on error handling.

As a quick improvement over just a deactivated button, we added a text telling the user to make sure they have filled in all the fields when the button is hovered or pressed.

Issues with Additional Information and UX Copy

Logistics, even for industry professionals, can be complex. To provide users with extra information, we opted for using tooltips as they are a familiar UI element. Initially, we used tooltips to provide further clarification. But, at times, we misused tooltips by adding unnecessary or unhelpful details.

Examples of unnecessary tooltips. Category filed is clear without a tooltip, and changing the title to "Ready Date" would be more useful for the Date field.

Examples of unnecessary tooltips. Category filed is clear without a tooltip, and changing the title to "Ready Date" would be more useful for the Date field.

Examples of unnecessary tooltips. Category filed is clear without a tooltip, and changing the title to "Ready Date" would be more useful for the Date field.

Our behavioral analytics data showed that tooltips were particularly troublesome for users on mobile devices because of their small target size and their problematic implementation.

Example of a tooltip with excessive copy.

Example of a tooltip with excessive copy.

Example of a tooltip with excessive copy.

To fix these issues, I have created some guidelines for our team to use:

  • Do not use tooltips for unambiguous things. (Like “Category”)

  • Provide clear copy for labels, so that there is no need for tooltips, if possible.

  • Keep tooltip copy short, provide additional information if needed.

  • Make the target size bigger, include the field title in the clickable area.

Next Steps

While we achieved our goal of creating a easy to use online quotation forms in a short time, there is still room for improvement several areas.

Moving forward, one of the top priorities is ensuring that the quotation forms meet accessibility standards. Additionally, addressing the information architecture challenge is crucial, especially as the number of forms for different logistics services has grown, making navigation more complex. Lastly, continuous user testing, refinements, and A/B testing are essential to ensure that the forms deliver a positive user experience.

Other Case Studies

E-Mobility Company · 2023

Electric Vehicle Charging Station Finder App

A mobile app that simplifies finding charging stations and enhances the overall charging experience. I investigated the problem context, conducted research, analyzed competitors, ideated solutions, conducted a usability test, and crafted the UI.

Beeontrade · 2021

Express Shipping Dashboard

A dashboard designed to simplify the management of international shipments for small and medium-sized businesses. During this project, I explored the problem space, analyzed competitors, identified pain points, created personas and crafted solutions.