Design

Takeaways

DrayEasy Mobile APP

Making It Easier for Clients to Search for the Best Price

My Role

UX Design/Research Intern

Contribution

Primary Research; Wireframing & Prototyping; Visual Design; High-fidelity Prototype

Team

1 ×Product Leader
3 ×UIUX Designer(Jianing Yin, Rushuang Wang, Wentao Zhang)

Tools

Figma; Photoshop; Illustrator; HTML/CSS/JS

Client

DrayEasy

Duration

2023.6-2023.9(12 weeks)

Overview

DrayEasy help cargo owner find the best drayage price, connect carriers, make drayage easier

Drayage

Refers to the transportation of goods over a short distance, particularly within the same metropolitan area, or within the vicinity of ports, warehouses, or rail terminals.

Drayage Carrier

Are responsible for providing drayage services. They own or lease the trucks that carry the goods.

Our design scope was to focus on the DrayEasy Mobile App rate search process.

Our client want to build a mobile experience to expand their user base.
There is another team working on the Web App redesign at the the same time.

From 15min to 1min

If our user want to do rate search when they are traveling, it will take more than 15 minutes using web since they will have to setup their laptop and network.

However, they can just do it in under 1 minute using DrayEasy mobile App.

Moreover, both mobile and web app can be a supplement to each other in different use cases.

Final Solution

Visualizing routes’ information and datas

Understand complex options at a glance

A revamped visual and information architecture made previously complex drayage options easier to digest, so that the user can focus on what’s truly helpful to city and port selection.

Comparing price horizontally at terminals’ list and accessorial charges

Provide detailed information required by clients

In the price details page, we will provide price breakdown and accessorial charge to meet the needs of customers to compare prices and learn more.

Allowing users to save draft orders, lock the rate, and manage drafts before complete it

Leave tedious typing to the desktop

To simplify drayage order processing, users can now start a draft on their mobile app and then switch to the desktop app for entering container details, streamlining the process.

Marking up price and sharing it with clients

A more convenient way to communicate with clients

Clients often need to communicate with their customers and share prices even when they are not in the office. The "markup and share" feature helps them address this need.

Discovering

Interview

To start with, we conducted several expert interviews.

Goal 1

Identify the shortcomings and inefficiency points for Web App

Goal 2

Understand users’ preferences and information prioritize

Goal 3

Discover the scenarios when users' need for the mobile App

Goal 4

Identify the Dreyeasy marketing strategy and direction

Overview of the current website

We first do analysis on the current website to identify the existing problems for Web app.

· Hard to understand the layout of the homepage and confused about how to search the quote;
‍
· Overwhelming amount of information without hierarchy made it hard to compare the routes and terminals’ price respectively and clearly
‍
· Feel overwhelming due to massive information in one page

Competitive Analysis

We started to look into the market to examine existing cargo products to help us understand how to redesign an app from Web to Mobile.

The mobile app improves the user experience by breaking down a relatively long process into several short steps.

The mobile app will have a notification feature to better track and remind users of their orders or shipping updated progress.

Pain Points

What we learn from these research?

Pain Points 1

Hard to read all information and data of one route correspondingly

Pain Points 2

Hard to compare routes and terminals’ price horizontally

Pain Points 3

Have to fill in tons of information to place the order and lock the rate, which is impossible to be done on mobile devices out of office

Pain Points 4

Obtaining the quotation spreadsheet and formatting its data for customer delivery is a time-consuming process

Defining

User Persona

User Journey Map

How Might We design a mobile app to help logistic manager Search and Compare Rate More Efficiently and Smoothly ?

Design

User Flow

Homescreen
· Notification
· Search box
· History
Request Rate
Filter page

Compare

Compare Pickup Cities
‍· Map view
· List view
Compare Pickup Ports
· Map view
· List view
Filter Page
Accessorial Charges‍‍

Book

Order Review
Mark up and share

To make the mobile version more convenient, we address the issue of information density and simplify user flow to boost booking efficiency

Wireframe - Layout Exploration

Draw essential screens’ wireframe and explore layout opportunity

All Wireframe Pages

User Testing + Iteration

Select A Terminal - Map Page

Select A Terminal - List Page

Book Confirmation &Lock the Rate

Edit the Draft

Markup Page

Final Design

Compare Rate & Get Detailed Information of Price

Markup & Share with the Clients

Lock the Rate & Edit the Draft

Takeaways

Team Collaboration and Multiple Insights✌️

During this internship, we learned the value of teamwork in generating a variety of solutions for a single problem, ultimately aiming to identify the best one. This experience highlighted the limitations of working in isolation.

Aligning User, Stakeholder, and Business Objectives👍

Through this internship, I realized that UX design goes beyond understanding user needs; it also involves listening to stakeholders and aligning with business goals. A UX designer must have diverse skills to capture user requirements, harmonize different needs, and provide insights for company success.

Web to Mobile Transition👌

Moving a product from web to mobile is complex. It requires considering business models, user behavior, and medium-specific aspects. In our internship, we discovered mobile and web complemented each other for user scenarios and adapted for mobile's format to reduce cognitive load.

Home

Invisible Guardian