Business Context

For freight forwarders, one of the most challenging part is to find a reliable trucker with good rate to help them move the container for the last miles. DrayEasy has built the first in the market rate engine that the customer can get rates instantly for over 95% of the lanes within 100 intermodal regions in North America.

Problems Overview With The Current Portal

Hover to check each problem from the current booking portal and the opportunity/insight from the existing design.

Promblem 1

Promblem 2

Promblem 3

Design Does Not Adhere To The Users’ Mental Models

Assumption

The existing product assumes customers would:
- pre-order if they are unsure about the quote;
- book if they are satisfied with the quote;
- bid if they are not satisfied with the quote and want to argue with their ideal rate in mind

Reality

However, after they finish rate searching and request in the previous steps, the freight forwarders would have an exclusive locked rate:
- if they want to place the order, they would just book;
- if they don’t want to place the order, an agent would contact them for the rate adjustment.

Insight 1

The three actions would confuse users and complicate the order placing process. There is no need to separate the actions.

- Lack of Information Hierarchy, Procedure, and Specificity

Information Layout

The existing product classify the major info as:
- Route Info
- Pickup Terminal
- Delivery Address
- Carrier Info
- Container Info

After Client Meeting and Domain Research...

1. Hierarchy - route Info, pickup terminal, and delivery address should be bounded as a single category.
2. Procedure - The sequence of information layout should match the mental models:
- route&container (major) - carrier (additional)
3. Specificity - The container info should include more specific info about special cases:
- If Dangerous Goods(DG), what is the Hazmat Class?
- If Shippers Owned Container (SOC), what is the Returning Address?
- ...

Insight 2

Simplify the information hierarchy, match the procedure with mental models, add information specificity

Time-Consuming for Massive Containers Info Input

A Common Case

The most challenging part of the booking feature is the information input for the shipping containers. Since there is a common case in which users have to input more than 20 identical shipping containers with sometimes partly different information regarding the identification, quantity, and condition info.

Insight 3

Add duplicate functions for identical container info input and manually infill the non-identical container info.

Problems Statement

How Might We help freight agents efficiently and smoothly place their orders during the booking step?

Design Goal

Allow users to be able to place their orders through a step-by-step process including 4 main features.

Solutions & Impact

• Simplify The Order Placement Flow
• Distinguish The Information Hierarchy
• Create Procedural And Instructional Guidance
• Clarify Required and Recommended Input
• Fasten The Input According To The Freight Nature

Key Wireframe

Critics From PM & Developers;
🅐 - The map component is excessive in the booking step since it already appears as a significant role in the former rate search and request step.
🅑 - Most identical containers’ info are the same but still some identification info are different.
🅒 - No place to overview multiple containers’ info.

Multiple Containers Challenge

For freight forwarders, the most challenging part of booking step is to fill information for multiple shipping containers, because there are often cases where more than 20 containers are loaded with the same cargo (the same quantity info) but the identity info is unique for each one.

A 'tab' format inspired by the daily-used browser was the first attempt I tried to make this process fast, smooth and intuitive.

Design Iteration

After multiple design iterations, I started to consider whether the shipping containers are identical or non-identical to differentiate the information inputting process and change the format from 'tab' to 'table'.
‍
Hover to see how I differentiated the info input scenarios to tackle the challenge.

Non-Identical Container

Identical Containers

1

2

3

*For Non-Identical Container

User only need to infill every specific info regarding to this exclusive container.

1

3

2

4

*For Identical Containers

User only need to manually fill the distinctive info about the identification numbers for each container, the other identical info will be automatically duplicated before creating the container item.

Wrap It UP

- A thoughtful SaaS UX design requires deep understanding of the domain knowledge and is critical to a product's success because it can directly impact whether users continue to use the product or abandon it for one of the competitors.
‍
- In large groups, design is often more than creating artifacts, and heavily involve communication, trade-off, and compromise. For a small team, artifacts usually mean the end of design; but for a large group, artifacts are often only the start of the conversation.