CONTENTS
Find best transportation quote on mobile
Find best transportation quote on mobile
Find best transportation quote on mobile
Simplify the cargo delivery experience with efficiency and care.
Simplify the cargo delivery experience with efficiency and care.
Simplify the cargo delivery experience with efficiency and care.
Simplify the cargo delivery experience with efficiency and care.
Role
Role
UX Researcher
Visual Design
Prototyping
UX Researcher
Visual Design
Prototyping
UX Researcher
Visual Design
Prototyping
Timeline
Timeline
May 2023 - Aug 2023
May 2023 - Aug 2023
May 2023 - Aug 2023
Team
Team
4 UX Designers
4 UX Designers
4 UX Designers
4 Developers
4 Developers
1 Project Managers
1 Project Managers
Team
4 UX Designers
4 Developers
1 Project Managers
DrayEasy is a Digital Drayage
Platform that Help Cargo Owners
find best drayage price
DrayEasy is a Digital Drayage
Platform that Help Cargo Owners
find best drayage price
DrayEasy is a Digital Drayage
Platform that Help Cargo Owners
find best drayage price
DrayEasy is a Digital Drayage
Platform that Help Cargo Owners
find best drayage price
Built first in the market rate
Over 100 international regions in North America
Over 300,000 drayage routes
Covers over 95% of the lanes
Covers over 95% of the lanes
Over 100 international regions in North America
Over 100 international regions in North America
Over 100 international regions in North America
Built first in the market rate
Covers over 95% of the lanes
How it interacts with the physical world ……
How it interacts with the physical world ……
How it interacts with the physical world ……
How it interacts with the physical world ……
Drayage Platform
Drayage Platform
Drayage Platform
Cargo Owners
Cargo Owners
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.
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.
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.
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.
Drayage Platform
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.
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.
Some facts that you need to know... ...
Some facts that you need to know... ...
Problem
Problem
26K
+
containers moved each year
1.5M
+
Lanes Covered
5000
+
Partnered Warehouse
Some challenges for business clients:
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
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
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
Integrated Homepage
Integrated Homepage
Search, browser, and kept posted
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
Leave tedious tasks to desktop
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
Easy Compare
Understand complex options at a glance
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
• 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
Book a draft
Book a draft
Leave tedious tasks to desktop
Leave tedious tasks to desktop
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
• book a draft and secure the quotation in advance
• complete container information to desktop later
Introduction of notification
Introduction of notification
Never missed out
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.
• Leverage our mobile platform's full potential with push notifications.
• Stay informed, never missing crucial updates.
Introduction of notification
Never missed out
• Leverage our mobile platform's full potential
with push notifications.
• Stay informed, never missing crucial updates.
Solution
Solution
Solution
Solution
“I am a highly organized person, I need to access detail information of my quotes instantly while the current desktop is a mess.”
“My stakeholders request timely feedback regarding quotes while checking emails and receiving calls are time-consuming for me. “
“I have limited access to my desktop during business trip, it is tedious to ask my collage to search and modify rates for me.”
Understanding the real needs of mobile application... ...
Understanding the real needs of mobile application... ...
Problem
“I am a highly organized person, I need to access detail information of my quotes instantly while the current desktop is a mess.”
“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. “
Understanding the real needs of mobile application... ...
Understanding the real needs of mobile application... ...
How Might We Design A Mobile App To Help Cargo Owner
Complete Booking More Efficiently And Smoothly ?
How Might We Design A Mobile App To Help Cargo Owner
Complete Booking More Efficiently And Smoothly ?
How Might We Design A Mobile App To Help Cargo OwnerComplete Booking More
Efficiently And Smoothly ?
Our design scope was to focus on the DrayEasy Mobile App rate search process.
Our design scope was to focus on the DrayEasy Mobile App rate search process.
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.
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.
There is another team working on the Web App redesign at the the same time.
Design Scope
Design Scope
Design Scope
Design Scope
Design Impact
Design Impact
Design Impact
Design Impact
Research
Research
Research
Research
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
Transferring web to mobile
Understand current problem of web design
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
How we improve the current desktop version on mobile ……
Understand current problem of web design
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
look for design opportunities
of our app design
look for design opportunities
of our app design
learning design disparties from
web to mobile
learning design disparties from
web to mobile
learning design disparties
from web to mobile
transferring web to mobile
app
transferring web to mobile
app
transferring web to mobile app
identify design gaps and emerging trends
identify design gaps and emerging trends
identify design gaps and
emerging trends
Analyze competitors’ design to
pinpoint explore innovations.
Analyze competitors’ design to
pinpoint explore innovations.
Analyze competitors’ design to
pinpoint explore innovations.
Leverage potential mobile functions to
boost user engagements.
Leverage potential mobile functions to
boost user engagements.
GOAL 1
GOAL 1
GOAL 2
GOAL 2
GOAL 3
GOAL 3
Leverage potential mobile functions
to boost user engagements.
transferring web to
mobile app
Leverage potential mobile functions to
boost user engagements.
What we have learned from competitors
What we have learned from competitors
Digging in to gain insights into competitors' strategies.
Digging in to gain insights into competitors' strategies.
Digging in to gain insights into competitors' strategies.
Takeaways
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.
• 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.
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.
Let’s collaborate,
coffee chat,
or learn more!
Let’s collaborate,
coffee chat,
or learn more!
Identify inefficiency points
for Web App
Identify inefficiency points
for Web App
Understand users’ preferences and
information prioritization
Understand users’ preferences and
information prioritization
Understand users’ preferences and
information prioritization
Discover the scenarios where users’
need for the mobile App
Discover the scenarios where users’
need for the mobile App
Solve web pain points and better
collaborate through mobile design
Solve web pain points and better
collaborate through mobile design
List user feedbacks and determine mobile page
layout priority and content hierarchy
List user feedbacks and determine mobile page
layout priority and content hierarchy
Re-optimize mobile workflows to provide a
user-friendly experience
Re-optimize mobile workflows to provide a
user-friendly experience
GOAL 1
GOAL 1
GOAL 2
GOAL 2
GOAL 3
GOAL 3
What we have learned from experts?
What we have learned from experts?
Conducting 6 expert interviews from industry experts, to user experts.
Conducting 6 expert interviews from industry experts, to user experts.
What we have learned from experts?
Conducting 6 expert interviews from industry experts, to user experts.
Chaotic information display
Chaotic information display
Users could not target their desired quote quickly
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
Understand current problem of web design
Understand current problem of web design
Understand current problem of web design
How we improve the current desktop version on mobile ……
How we improve the current desktop version on mobile ……
How we improve the current desktop version on mobile ……
Disoriented landing page
Disoriented landing page
Disoriented landing page
Users are easily to feel confused and do not
know what to do next
Users are easily to feel confused and do not know what to do next
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
• non-hierarchy of information
• search bar is hard to find
• layout costs much time to read
• non-hierarchy of information
• search bar is hard to find
• layout costs much time to read
Clustered notification with poor readability
Clustered notification with poor readability
Unorganized information of notifications causing long time to digest.
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
• poor structure of display of notifications
• information without smart filter
• unclarity of different types of notifications
01
01
01
02
02
02
Can’t search quotes quickly and easily due to chaotic information
Can’t search quotes quickly and easily due to chaotic information
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
Can’t compare rates efficiently due to long and complicated steps
Can’t receive notification in a timely and well-organized manner
Can’t receive notification in a timely and well-organized manner
03
03
03
Can’t compare rates efficiently due to long and complicated steps
Summary from the top
Summary from the top
Summary from the top
Book
Finish
Select city & terminal
Get search result
Search Address Input
Order Details input
Explore order history
Explore industry news
Aware of cities gets affected
Book a draft
Rate locked
Continue on web
Continue on web
Select city & terminal
Get search result
Search Address Input
Explore notifications
Explore industry news
Aware of relevant cities gets affected
Explore order history
Improvement of user workflow ......
Improvement of user workflow ......
Improvement of user workflow ......
Web to Mobile
Web to Mobile
Web to Mobile
Filtering down the most important features ......
Filtering down the most important features ......
Filtering down the most important features ......
Map takes up too much space for mobile.
Horizontal layout needs to adapt to vertical layout.
Overwhelming information for one single mobile page.
Website does not support instant ‘Industry News’ checking.
Information break down to 2 main parts.
Rearranging information hierarchy. (Showing only subtitles on home screen)
Adding the ‘News’ feature.
Message
Level of importance
Acknowledge Demurrage Fee
Please Submit Pick-up Number
Industry News
Quote Pogress
Shipment Detail
Needed Action
Shipment
Request Rate is Ready
Please Upload Custom Materials
Unfinished Payments
App-regarding System Updates
Notification
Notification
Narrowing down the final selections of notification to display on the screen with considerations of both high importance and high urgency.
Narrowing down the final selections of notification to display on the screen with considerations of both high importance and high urgency.
Narrowing down the final selections of notification to display on the screen with considerations of both high importance and high urgency.
Message
Level of importance
Acknowledge Demurrage Fee
Please Submit Pick-up Number
Industry News
Quote Pogress
Shipment Detail
Needed Action
Shipment
Request Rate is Ready
Please Upload Custom Materials
Unfinished Payments
App-regarding System Updates
Lack of essential info on card.
Lack of essential info on card.
Lack of essential info on card.
Overwhelming layout
Overwhelming layout
Overwhelming layout
Search
Industry news
Industry news
Search History
Search History
Homepage
Homepage
Iteration 1
Iteration 1
Iteration 1
Iteration 2
Iteration 2
Iteration 3
Iteration 3
Iteration 3
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.
Narrowing down the final selections of notification to display on the screen with considerations of both high importance and high urgency.
Inefficient vertical layout.
Inefficient vertical layout.
Lack of information hierarchy.
Lack of information hierarchy.
Lack of information hierarchy.
New layout + Highlight color to emphasize main features
New layout + Highlight color to emphasize main features
Efficient organization of ‘History Card’, more details are shown.
Efficient organization of ‘History Card’, more details are shown.
Notification
Notification
Too much visual noise.
Too much visual noise.
Category tab helps organize notification
Category tab helps organize notification
lack of clarification
Lack of clarification
'Action' and Acknowledge' tag imply differenttypes of notification
'Action' and Acknowledge' tag imply differenttypes of notification
Quote
shipments
shipments
Message
Message
Notification helps to deliver the most essential information, category tab as well as Action tag help track different kinds of shipment progresses.
Notification helps to deliver the most essential information, category tab as well as Action tag help track different kinds of shipment progresses.
Notification helps to deliver the most essential information, category tab as well as Action tag help track different kinds of shipment progresses.
Iteration 1
Iteration 2
Iteration 2
Iteration 3
Iteration 3
Iteration 3
Confusing with different colors
Confusing with different colors
not intuitive enough to indicate different news
not intuitive enough to indicate different news
No map. Too abstract to select routes and compare.
No map. Too abstract to select routes and compare.
No map. Too abstract to select routes and compare.
Cannot differentiate.‘Job Site’ with ‘Terminal’. Secondary info missing.
Cannot differentiate.‘Job Site’ with ‘Terminal’. Secondary info missing.
Map view for easier route compare
Map view for easier route compare
Map view for easier route compare
Inefficient ‘City Card’ layout. Lack of visual hierarchy.
Inefficient ‘City Card’ layout. Lack of visual hierarchy.
Redundant info delaying viewing process.
Redundant info delaying viewing process.
Redundant info delaying viewing process.
Intuitive price card design
Intuitive price card design
Intuitive price card design
Live Map
Live Map
Filter Card
Filter Card
Filter Card
Live map display
Live map display
Live map display
Choose Terminal
Choose Terminal
Choose Terminal
Live map leverages the route comparison with clear indication and card design to assist the terminal selection process.
Live map leverages the route comparison with clear indication and card design to assist the terminal selection process.
Iteration 1
Iteration 1
Iteration 1
Iteration 2
Iteration 2
Iteration 3
Iteration 3
Iteration 3
Component Optimization
Component Optimization
Not intuitive enough
Not intuitive enough
Not intuitive enough
Clean and organized visual
Clean and organized visual
Clean and organized visual
Touch friendly clickable areas
Touch friendly clickable areas
Touch friendly clickable areas
No Cargo type information
No Cargo type information
No Cargo type information
No space to display detailed cargo type information
No space to display detailed cargo type information
No space to display detailed cargo type information
Complex Development
Complex Development
Complex Development
Cargo Type
Cargo Type
Destination
Destination
Cargo Size
Cargo Size
Smart card filters ease the visualization of possible route options with specified cargo criteria.
Smart card filters ease the visualization of possible route options with specified cargo criteria.
Smart card filters ease the visualization of possible route options with specified cargo criteria.
Design Iterations
Design Iterations
Integrated Homepage
Integrated Homepage
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
Keep track of industry news
Suggested similar rates
Request their own rates
Warning of limited access
Final Design
Final Design
Final Design
Introduction of notification
Introduction of notification
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.
Instant push
notification received
Instant push
notification display
Stay informed, never missing crucial updates.
Submit the required information easily
Keep posted of the submission
Search
Check Routes & Edit Shipping Details
• check different route options
• interactive live map to visualize
• flexible to modify shipping details
Live map helps with visualization of routes.
Easy switch of destinations.
Modify cargo details easily.
Choose the best route option.
Live map helps with visualization of routes.
Easy switch of destinations.
Modify cargo details easily.
Choose the best route option.
Search
Check Routes & Edit Shipping Details
check different route options
interactive live map to visualize
flexible to modify shipping details
Compare Port with details
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
Responsive display of different ports and prices
Smart filters to target selections
Clear structure of price details overview
Quick display of route options.
Smart filter to target options.
Clear display of price range.
Clear structure of price overview.
Easy switch between types of transportation.
Quick display of route options.
Smart filter to target options.
Easy switch between types of transportation.
Clear display of price range.
Clear structure of price overview.
Next step
Next step
Continue development of notification
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.
Users are seeking for timely update of their orders, thus notification is crucial for increase of efficiency and serve as supplement with web.
Further Integration Between Mobile and Web App
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”.
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”.
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.
Reflection
Reflection
Edge Cases and Usability Testing
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.
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.
User Experience
User Experience
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”.
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”.
Information Management
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.
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.
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.
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”.
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.
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.
User Experience
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”.
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.
Productivity presentation
Productivity presentation
Exploring use cases with AI
powered slide creation tool.
3D Modelling Community
3D Modelling Community
Crafting a collaborative
customized experiences for 3D
creators and buyers.
Cabinet E-commerce
Cabinet E-commerce
Transforming the cabinet
shopping journey: A new era
in discovering, selecting, and
acquiring cabinetry.
Let’s collaborate,
coffee chat,
or learn more!
