Create An Intuitive Dashboard To Increase Engagement For New/Old Users
Truck drayage, an integral and essential part of freight transportation in global trade, focuses on the last-mile short-haul market from port to warehouse. 40% of the cost of importing (warehouse-to-warehouse) is spent on the last-mile trucking (port-to-warehouse). The top 5 U.S. seaports alone see 15M containers and $80B worth of
freight spending annually.
How does drayage carriers handle the industry challenges nowadays?
Most operations still heavily rely on phone calls, emails, and paperworks.
Web interface to help?
Yes, but 80% requires manual tasks.
Terminal 49, a San Francisco based Startup, seeks to optimize their drayage process by providing a SaaS platform to automate over 80% of the manual trucking tasks.
I worked alongside a product manager, a design lead and four product designers. In Lo-Fi and Hi-Fi phases, I led the design of all container pages and collaborated with the team from initial research to final validations. After the MVP is delivered, I refined the UI of dashboard, container and notification pages.
The client approached us with one primary goal — to enhance the visibility and productivity of Terminal 49’s drayage service while alleviate the data overload to different personas and tech savviness.
To get a better understanding of what the goal truly means, we kicked off the project by diving into the world of drayage, its logistics and operations.
With the insights gained from client's research, team-wide drayage studies, and client meetings, we broke down the high-level goal to more actionable challenges:
• Create an intuitive dashboard to increase engagement for new/old users
• Automate and digitize the manual coordination
• Prioritize daily actionable items on the dashboard
• Optimize and simplify the visual
With the pre-existing insights from client's research and deeper understandings through our drayage studies and client meetings, we breakdown the high-level goal to more actionable challenges:
Create An Intuitive Dashboard To Increase Engagement For New/Old Users
Automate And Digitize The Manual Coordination
Prioritize Daily Actionable Items On The Dashboard
Optimize And Simplify The Visual
With the understanding of client’s vision, we started to discover existing users' experiences. Due to the lack of online presence of competitors, we did not run the competitive analysis, but conducted a range of client calls and interviews with existing users. The discovery phase revealed five personas with
different level of engagement and interaction to the dashboard — three import
coordinators with different responsibilities, one logistic manager (same level of
access with import coordinators), and one trucking company.
Under the scope of
the MVP, we narrowed down to two distinct personas: an import coordinator (Jenny),
and a trucking coordinator (Maritza).
Jenny
[Import Coordinator]
20s, Comparatively tech-savvy.
Jenny has a lot of responsibilities, a super user of the account, not involved end-to-end, but oversees from the initiation of delivery until the order is completed and payment is received.
Maritza
[Trucking Coordinator]
30s, not tech-savvy.
Responsibilities include issuing and dispatching trucks to pick up containers from terminal, as well as obtaining proof of delivery.
• Manually tracking containers
• Manually releasing holds/fees
• Scheduling appointments via calls
• Manually invoicing customers
Import Coordinator
Jenny's
Pain Points
• Manually tracking containers
• Manually releasing holds/fees
Trucking Coordinator
Maritza's
Pain Points
• Scheduling appointments via calls
• Manually invoicing customers
In summary, the experience mapping represented four primary pain points: two for Jenny, two for Maritza. Jenny desired a platform to save her time of tracking the status of containers and handling traditional paperwork and communications to resolve holds and fees. Maritza also sought for a system entailing her needs of scheduling appointment and streamlining the invoicing process. All those pain points brought our attention to the automation of manual tasks on the dashboard, tying back to the primary challenges delineated in the previous chapter.
Starting at high-level, there were two primary goals that reflect our vision: 1) to automate the manual tasks for import and trucking coordinators; and 2) to prioritize the task for users on the dashboard. As we began to structure the content, those two goals started to piece together: a dashboard interface to surface and prioritize containers that needs attention at each stage of the journey, for both personas.
Our team carried out multiple design studios to sketch UI wireframes, illustrate user journeys, and prioritize features and elements for the MVP.
Concept 1
• Dashboard (customized card style) with highlights of immediate action items.
• Side navigation with icons of delivery orders / containers / account / activities / fees.
• Delivery order has four sub menus of active / archived / cancelled / all. (Default as active)
• Container page has four sub menus to show status of containers: on ship / at terminal / picked up / delivered.
Concept 2
Has similar information architecture as Concept 1, except that the navigation is on the top with text instead of side icons.
Concept 1
• Dashboard (customized card style) with highlights of immediate action items.
• Side navigation with icons of delivery orders / containers / account / activities / fees.
• Delivery order has four sub menus of active / archived / cancelled / all. (Default as active)
• Container page has four sub menus to show status of containers: on ship / at terminal / picked up / delivered.
Concept 2
Has similar information architecture as Concept 1, except that the navigation is on the top with text instead of side icons.
My first concept was selected for the MVP and I started to generate the low-fidelity wireframes. The diagram below shows the initial interface flow in the first round prototyping.
Dashboard
Side Navigation
Delivery Order List
Container List
In the first round low-fi testings we identified a fundamental problem of dashboard's information architecture: delivery order page had repetitive information with container pages. Users were confused by switching between delivery order tab and container tab to find actionable items. We then looped ourselves back to research for a deeper understanding of how to prioritize information between containers and delivery orders for Jenny and Maritza.
Delivery order summarizes contents of the shipment. Containers, mostly multiple, are part of the delivery order. For our personas, delivery order level actions only include creating new order and issuing an order to trucking company. Most daily actionable items for Jenny and Maritza happen on the container level - releasing holds and fees, picking up and delivering.
We decided to respect the nature that containers need to be nested underneath delivery order and represent this hierarchy in the UX design. To make the actionable items more discoverable, we chose to segment the delivery orders to four distinct stages of containers: On Ship, At Terminal, Picked Up, and Delivered.
With the new dashboard structure we followed up with a second round validation testings with six Terminal 49 users. Key takeaways from the testings:
• Users appreciated the customized dashboard to break out the most important action items
• Users felt the side navigation by stages of container makes good sense
• User could easily find container details by expanding the delivery order
• Users preferred less icons and more words to get the message across on the dashboard
• User could easily find where to release the holds/fees for containers
Those user feedback validated most of the design goals we conceptualized. Persona Jenny could track containers and release holds and fees through simple clicks. Persona Maritza could schedule appointments on dashboard and automatically invoicing customers.
Based on those insights I moved forward to address visibility concerns on the dashboard. Five out of six users needed clarification on some particular icon’s purpose or meaning. I chose to replace some icons with hyperlinked text for ease of understanding by users. Meanwhile I redesigned the side navigation to adapt with multiple width screens and save real estate of the interface. Color pie chart on the dashboard identified and prioritized the at-terminal containers with approaching LFDs and holds/fees. The filter page and desktop notification UI were also refined for a more intuitive interaction.
The founders of Terminal 49 provided very positive feedback to our final deliverables. We are glad to see that Terminal 49 is transitioning its entire platform to the dashboard we proposed.
The site navigation by four stages of containers is now under development and expected to be live to the users soon. Other features of notifications and order structures will also be implemented in following phases.
To comply with the non-disclosure agreement, in this case study I have omitted the dashboard page for persona Maritza, the expanded view of containers, and other pages with confidential information.
To comply with the non-disclosure agreement, in this case study I have omitted the dashboard page for persona Maritza, the expanded view of containers, and pages with confidential information.
© 2021 TINGRAN LIU