DrayEasy Web App Redesign

Redesign the order management and order tracking flows to meet the stakeholders' needs.

Project overview

DrayEasy is a tech-forward company specializing in software and data analytics solutions tailored for the logistics industry. However, the current platform presents significant user experience challenges, including cluttered interface elements, unclear information architecture, and an overwhelming amount of content that dilutes the user's focus.

Project Outcome

This project redesigned the DrayEasy user portal to help customers manage order and container status. By integrating the originally scattered 12 related function pages into 2 main pages, it achieved the ability to retrieve critical information in just 5s on average, leading to a marked 80% surge in operational efficiency.

Design goals

  1. Streamlined Interface: Eliminate clutter and enhance clarity.
  2. Optimized Information Architecture: Ensure intuitive navigation and content organization.
  3. Focused Content: Prioritize essential and relevant information for the user.
  4. Unified Design System: Ensure consistency across visuals and interactions.
  5. Scalable Design: Ensure adaptability for future needs and industry changes.
  6. Labor Cost Efficiency: Design solutions to automate tasks and processes, reducing manual efforts and associated labor costs.

HMW

How might we redesign Dray Easy user portal to deliver a better user experience so that customers can rely on it for order and container management？

Information

Type
Web app Design
Platform
Website
My Role
Project Management & Design Lead in Profession Project
Design Methods
User Surveys | Personas | Competitive Analysis | Journey Maps | Content Strategy Map
Visit DrayEasy Web

Design Solutions

Final Design

Based on the conclusions from our research, we redesigned the entire interface flow from order management to container tracking, effectively addressing the needs of the stakeholders.
feature 01
Order Management
Overview of the Orders and Containers
feature 02
Container Tracking
Access to needed container shipment status easily and clearly
feature 03
Container Invoice
View and Download Container Invoice by only 3 clicks
feature 04
Documents
Easily Upload and delete file in bulk
feature 05
Container Rate
Easy access to transparent, real time update rates

Research

To identify the problems and find the design solutions, we researched the original product, stakeholders, and competitors. After finished the product critique, user persona and journey map, and competitive analytics, we concluded the interview insights to guide the design.

01 Product critique

01 Redundant user flow

Users have to take extra steps to complete their tasks

02 Overwhelmed information

Users cannot grasp the information they need at their first glance

03 Frustrating information architecture

A lot of must-seen information are missing / hidden in deeper navigation

02 Journey Map

03 Competitor Analysis

Flexport is an corporation focuses on supply chain management and logistics, including order management, delivery, freight forwarding and customs brokerage.

Use a two-level progress bar for hierarchical information display:

  • Horizontal bar: represents the overall order status.
  • Vertical bar: indicates detailed cargo status like ready date.

Uber Freight is a platform and service that helps shippers and carriers of take control of their freight and deliver on their goals.

Use card view and table view simultaneously to achieve a clear information hierarchy:

  • Left-side cards: present higher-level information.
  • Right-side table: Display lower-level details.

Dray Alliance provides comprehensive end-to-end drayage management, simplifying container shipping from ports to distribution centers with ease and efficiency.

  • Container status label: helps users get the info at a glance
  • Progress bar: clearly displays the shipping progress

04 Two Types of Customers

Two Types of Customers

01 - Key Customers with Large Order Volumes
  • This type of user accounts for less than 10%, but they are the company's loyal users and main partners.
  • Their order usually contains more than 20 containers with a huge amount of information, better to be displayed with “table” view.
  • We need to make the page easy to search, sort, and filter, highlighting important information, such as blocked containers, with labels and appropriate colors.
02 - Regular with Sporadic Orders
  • This type of user accounts for more than 90% of all. They make routine purchases from businesses.
  • Their orders normally contain less than 5 containers and have less demand for sorting large information, and can be displayed by “card” view.
  • Their order contains fewer containers and can be expanded to see them all in one page.

05 Interview Insights

User Needs

  • Visualize the past, current and future activities to make users see easily what needs to be taken care of.
  • Quickly resolve unusual status in orders

Client Needs

  • Develop additional features to free users from dependence on other websites: Uploading files Viewing the invoices and rate Tracking traces
  • Reduce personnel costs

06 Product User Flow

Design Explorations

01 Ideation Wireframe

The original design displayed all functionalities without logical order, causing user issues and increased customer service needs. In the design phase, we conducted two wireframe rounds, testing 12 functional architectures, and then selected a few for mid-fidelity design.

02 Exploration Order

01 Side Panel + Card

Pros:

  • Can see the most relevant information for each status.
  • Side panel to show both container and order info at the same page.

Cons:

  • Bad for info comparison.
  • Potential cost of learning for novice users.

02 Nested Table

Pros:

  • Meet client requirements and preference for displaying both container and order info.
  • Aligns well with user’s habits (Jakob's Law).
  • Can compare information.

Exploration Container

01 Modal

Pros:

  • Clear display of container information
  • Quick switching between container and order

Cons:

  • Space limitations Intrusiveness
  • Don’t allow arbitrary switch among containers.

02 Full Screen

Pros:

  • More space for more info display.
  • Easy and clear navigation.

Cons:

  • Unable to switch between containers.
  • Too much info showed at the same level

03 Slide-Out

Pros:

  • Achieve fast return to the order page.
  • Can still see part of the order page.

Cons:

  • Space limitations
  • Seeing the order page can be distractive.

04 Card List + Tab

Pros:

  • Achieve fast return to the order page.
  • Can still see part of the order page.

Cons:

  • Achieve fast return to the order page.
  • Can still see part of the order page.

Design Iterations

01 Iterations Tracking

Initial UI

What could be improved?

  • Enhance information hierarchy
  • Use more understandable terminology
  • Include more relevant container information
  • Reduce space occupied by events
  • .Clarify relationships between statuses.

Iteration 1

Pros:

  • Clear navigation on request status.

Cons:

  • Map feature doesn’t align well with user scenario
  • Request status and sub status appear unrelated
  • Didn’t display shipment information
  • Iconography fails to differentiate release status effectively

Iteration 2

Pros:

  • Hight light and visualize shipment timeline through key events and dates.
  • Better iconography for navigate and comparison

Cons:

  • Visual imbalance due to the layout
  • Read logic is weak

Iteration 3

Pros:

  • Horizontal layout allows better visual balance.

Cons:

  • Shipment timeline takes too many space.
  • Lack of shipment history.
  • Status difference isn’t clear.

Iteration 4

Pros:

  • Better visual consistency and distinction.

Final Solution

Client Requirement:
1. Display of blocked containers clearly.
2. Visualize status and activities.
‍How We Solve:
  • Clean and consistent visual style.
  • Provide error prompts and helpful documentation.
  • Incorporate shipment timeline to highlight key events and dates.
  • Show the latest shipment update.
  • Able to notice changes in release and request status easily.
  • Establish a better information hierarchy that aligns with users' needs.
One Step Further:
Use distinct colors and iconography to highlight each status and activity effectively, including identifying blocked containers.

02 Iterations Rate

Initial UI

What could be improved?
  • Avoid making rates look like clickable buttons
  • Clarify the relationship between "best" and "average" rates.
  • Enhance visual hierarchy for clearer presentation.

Iteration 1

Pros:
  • Clear labeling of rate information.
Cons:
  • Lack of highlighting for the total rate amount.
  • Potential readability issues with the horizontal layout.

Final Design

Cons:
  • Highlight the final total rate.
  • Clearer and more concise layout.
  • Provide prompts if rates change.
  • Allow visibility of previous rates and comparison if change occurs.

Next Steps

Based on the research and design, we also created the next steps for the uture development.

Usability Testing

We plan to conduct more usability tests to define and address usability issues.

Iterative Update

Keep communicating with engineers during the development process to update some features.