X

DrayEasy Redesign

Design Overview

For freight forwarders, one of the most challenging part is to find a reliable truck 🚚 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 region in North America. We want to make the user portal more user-friendly and customers will rely on the user portal for instant quotes, order placement.

This redesign project mainly focused on the booking feature after rate searching and requesting steps.

My Role

Research, Brainstorm, UX/UI Design and Prototype, Usability Test

Tool

Figma, Photoshop, Illustrator

Teammates

1 product manager, 1 developer, 1 data, 1 operation team

Duration

16 weeks - desktop

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.

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.

Route Info

• Differentiate Delivery Type for Warehouse or Residential due to truck access limit
• Autosaved address info for fast input

Container Info

• Differentiate the user flow of Duplicated or Single Container info input
• Accommodate container special conditions for delivery heads-up

Carrier Info

Differentiate container ticket file and type for corresponding containers

Confirmation

Double-check the input info and rate the experience for product evolution

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

70% Decrease

in time spent on order placement

Improving User Flow

Hover to see how I improved the existing user flow for the booking portal regarding each painpoint from the exiting portal.

Painpoint: Redundant Order Placing Actions with Pre-Order, Book, and Bid
Improvement: Simplify The Order Placing Actions Into A Linear Booking Feature

Painpoint: No Information Hierarchy, All In One Page
Improvement: Separate Different Categories of Info Into Multiple Pages

Painpoint: Containers’ Info Lack Specificity
Improvement: Add Specification Info for Special Container Conditions

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.

Painpoint

However, this format can be redundant for users to jump back and forth to edit information, and hard for users to check and compare each container's info clearly and intuitively.

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.

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.