Shenyi Zhang

Overview

User Journey

Solution

Research

Design Iterations

Final Designs

Reflections

CONTENTS

Drayeasy Mobile App Design

Simplify the cargo delivery experience with efficiency and care.

Role

UX Researcher

Visual Design

Prototyping

Timeline

May 2023 - Aug 2023

Team

4 Developers
1 Project Managers
4 UX Designers

Live Site

Click to View Live Site

Overview

DrayEasy is a Digital Drayage Platform that Help Cargo Owners find best drayage price

Covers over 95% of the lanes Over 300,000 drayage routes Over 100 international regions in North America

How it interacts with the physical world ……

Some facts that you need to know... ...

Drayage Platform

Drayeasy facilitates the efficient and coordinated transportation

of goods over short distances, typically from ports to

nearby destinations, connecting shippers with local

carriers for seamless cargo movement.

Drayeasy facilitates the efficient and coordinated transportation

of goods over short distances, typically from ports to

nearby destinations, connecting shippers with local

carriers for seamless cargo movement.

Cargo Owners

Drayeasy facilitates the efficient and coordinated transportation of goods over short distances, typically from ports to nearby destinations, connecting shippers with local carriers for seamless cargo movement.

26K

containers moved each year

1.5M

Lanes Covered

5000

Partnered Warehouse

Some challenges for business clients:

challenging to find a reliable rate with good pricing

time consuming to gather information across various platforms

waiting time for receiving quotes is usually long

Drayesay is here to help:

built the first in the market rate
provide consumers with instant rates
covers over 95% of the lanes
over 100 international regions in North America

Solution

Integrated Homepage

Search, browser, and kept posted

• integrated homepage displaying rich information

• view realtime industry rates

• receive important updates of shipments

• integrated homepage displaying rich information

• view realtime industry rates

• receive important updates of shipments

Seamlessly distribute customised

search findings

Seamlessly distribute customised

search findings

Leave tedious tasks to desktop

• book a draft and lock the rate in advance

• complete container information to desktop later

• book a draft and lock the rate in advance

• complete container information to desktop later

Easy Compare

Understand complex options at a glance

• Enable users to visualized rate details in a quick time

• Live map helps users to digest information easier

• pinpoint the most relevant information

• Enable users to visualized rate details in a quick time

• Live map helps users to digest information easier

• pinpoint the most relevant information

Book a draft

Leave tedious tasks to desktop

• book a draft and secure the quotation in advance

• complete container information to desktop later

• book a draft and secure the quotation in advance

• complete container information to desktop later

Introduction of notification

Never missed out

• Leverage our mobile platform's full potential

with push notifications.

• Stay informed, never missing crucial updates.

• Leverage our mobile platform's full potential

with push notifications.

• Stay informed, never missing crucial updates.

Problem

Understanding the real needs of mobile application... ...

“I have limited access to my desktop during business trip, it is tedious to ask my collage to search and modify rates for me.”

“My stakeholders request timely feedback regarding quotes while checking emails and receiving calls are time-consuming for me. “

“I am a highly organized person, I need to access detail information of my quotes instantly while the current desktop is a mess.”

How Might We Design A Mobile App To Help Cargo Owner Complete Booking More Efficiently And Smoothly ?

Design Scope

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.

Design Impact

Research

What we have learned from competitors

Digging in to gain insights into competitors' strategies.

GOAL 1

look for design opportunities

of our app design

look for design opportunities

of our app design

identify design gaps and emerging trends

GOAL 2

learning design disparties from

web to mobile

learning design disparties from

web to mobile

Analyze competitors’ design to

pinpoint explore innovations.

Analyze competitors’ design to

pinpoint explore innovations.

GOAL 3

transferring web to mobile

app

transferring web to mobile

app

Leverage potential mobile functions to

boost user engagements.

Leverage potential mobile functions to

boost user engagements.

Takeaways

• Mobile app simplifies a lengthy process into short, user-friendly steps.

• It improves order tracking and providing timely shipping updates.

• The app streamlines processes with fewer data input steps, ensuring a seamless user interaction.

What we have learned from experts?

Conducting 6 expert interviews from industry experts, to user experts.

GOAL 1

Identify inefficiency points

for Web App

Identify inefficiency points

for Web App

Solve web pain points and better

collaborate through mobile design

Solve web pain points and better

collaborate through mobile design

GOAL 2

Understand users’ preferences and

information prioritization

Understand users’ preferences and

information prioritization

List user feedbacks and determine mobile page

layout priority and content hierarchy

List user feedbacks and determine mobile page

layout priority and content hierarchy

GOAL 3

Discover the scenarios where users’

need for the mobile App

Discover the scenarios where users’

need for the mobile App

Re-optimize mobile workflows to provide a

user-friendly experience

Re-optimize mobile workflows to provide a

user-friendly experience

Persona

User Journey Map

Identify crucial segments by crafting the existing user journey map.

How we improve the current desktop version on mobile ……

Understand current problem of web design

Disoriented landing page

Users are easily to feel confused and do not know what to do next

• non-hierarchy of information
• search bar is hard to find
• layout costs much time to read

Chaotic information display

Users could not target their desired quote quickly

• overwhelmed information to digest

• hard to read vertically displayed information

• can not compare selected quotations

• overwhelmed information to digest

• hard to read vertically displayed information

• can not compare selected quotations

Clustered notification with poor readability

Unorganized information of notifications causing long time to digest.

• poor structure of display of notifications

• information without smart filter

• unclarity of different types of notifications

• poor structure of display of notifications

• information without smart filter

• unclarity of different types of notifications

Summary from the top

Can’t search quotes quickly and easily due to chaotic information

Can’t receive notification in a timely and well-organized manner

Can’t compare rates efficiently due to long and complicated steps

Improvement of user workflow ......

Web to Mobile

Filtering down the most important features ......

Notification

Narrowing down the final selections of notification to display on the screen with considerations of both high importance and high urgency.

Design Iterations

Homepage

Industry news

Search History

Homepage focuses on main search function and search history.

Adding filters to the Search Card can enhance the overall search process, making it more efficient. Additionally, organizing the 'History Card' effectively aids in recalling previous routes.

Homepage focuses on main search function and search history.

Adding filters to the Search Card can enhance the overall search process, making it more efficient. Additionally, organizing the 'History Card' effectively aids in recalling previous routes.

Iteration 1

Lack of essential info on card.

Inefficient vertical layout.

Iteration 2

Lack of essential info on card.

Inefficient vertical layout.

Iteration 3

Lack of essential info on card.

Inefficient vertical layout.

Notification

Quote

shipments

Message

Notification helps to deliver the most essential information, category tab as well as Action tag help track different kinds of shipment progresses.

Iteration 1

Too much visual noise.

lack of clarification

Iteration 2

Confusing with different colors

not intuitive enough to indicate different news

Iteration 3

Category tab helps organize notification

'Action' and Acknowledge' tag imply differenttypes of notification

Live Map

Filter Card

Live map display

Choose Terminal

Live map leverages the route comparison with clear indication and card design to assist the terminal selection process.

Iteration 1

No map. Too abstract to select routes and compare.

Redundant info delaying viewing process.

Iteration 2

Cannot differentiate.‘Job Site’ with ‘Terminal’. Secondary info missing.

Inefficient ‘City Card’ layout. Lack of visual hierarchy.

Iteration 3

Map view for easier route compare

Intuitive price card design

Component Optimization

Cargo Type

Destination

Cargo Size

Smart card filters ease the visualization of possible route options with specified cargo criteria.

Final Design

Integrated Homepage

Search, browser, and kept posted

Integrated homepage displaying rich information
Keep track of industry news
Receive important updates of shipments

Integrated homepage displaying rich information
Keep track of industry news
Receive important updates of shipments

Unified front page showcasing abundant details

Request their own rates

Request their own rates

Keep track of industry news

Keep track of industry news

Suggested similar rates

Suggested similar rates

Warning of limited access

Warning of limited access

Introduction of notification

Never missed out

Leverage our mobile platform's full potential with push notifications
Stay informed, never missing crucial updates.

Instant push
notification received

Instant push notification received

Stay informed, never missing crucial updates.

Stay informed, never missing crucial updates.

Submit the required information easily

Keep posted of the submission

Keep posted of the submission

Check Routes & Edit Shipping Details

• check different route options

• interactive live map to visualize

• flexible to modify shipping details

• check different route options

• interactive live map to visualize

• flexible to modify shipping details

Live map helps with visualization of routes.

Live map helps with visualization of routes.

Easy switch of destinations.

Easy switch of destinations.

Modify cargo details easily.

Modify cargo details easily.

Choose the best route option.

Choose the best route option.

Compare Port with details

Checkout different port charges details

• Responsive display of different ports and prices

• Smart filters to target selections

• clear structure of price details overview

Quick display of route options.

Quick display of route options.

Smart filter to target options.

Smart filter to target options.

Easy switch between types of transportation.

Easy switch between types of transportation.

Clear display of price range.

Clear display of price range.

Clear structure of price overview.

Clear structure of price overview.

Next step

Continue development of notification

Users are seeking for timely update of their orders, thus notification is crucial for increase of efficiency and serve as supplement with web.

Rate Request History

Although there is only less than 5% percent of the rates that aren’t covered by DrayEasy database, a centralized page for users to check past rate quote requests can still be helpful.

Further Integration Between Mobile and Web App

Mixing various methods of layout can help covering more info. However, after usability test with mobile, users said: “ mixing layout methods are not intuitive, and might not be friendly to green hands”.

Reflection

Edge Cases and Usability Testing

Different Cities and ports can very different and it is hard to imagine every cases without data insights and usability testing, therefore difficult to prevent errors from edge cases. If we can get more information on the database, we can optimize user experience based using a data driven approach.

Information Management

Due to mobile’s vertical & narrow shape, information might turns out too overwhelming when transferring web page to mobile app. Building a hierarchy and breaking down pages would be fairly efficient when displaying different level of info.

User Experience

More works