[BR] Load Tracking

Document Status

DESIGN COMPLETED APPROVED BY MOE

Last updated

Document Owner

Chris Son

Designer

Chris Son

Developer

 cristi boariu

QA

 

Sprint

 Broker Refinement

Monday Ticket

https://zuumapp-team.monday.com/boards/645526190/pulses/645600412

Design

 https://zuum.invisionapp.com/console/share/DS1IV0JAJT/480839761

Challenges

  • It's hard to tell where the truck started ... where he is going ... where his route finishes.... when I see my postmates/uber eats driver on map super user-intuitive ... even our carrier and shipper app has better you... what can we do some minor fixes here?  

Solution

  1. Cosmetic fixes on the map and information around them

    1. Added a job status so it's easier to identify where our truck is and where it's heading.

    2. Update the illustration for the route

  2. Map logic when they enter the pickup and dropoff location

    1. I think we should close up the map when the truck enters a certain radius of pickup and dropoff location so you have a better idea of where exactly this truck is. 

    2. If they go outside of the radius then we could go back to the default view to see the whole route in one screen. 

Tracking Tab

Design: Here

  1. Load Status

    1. We want to integrate the load status in the tracking.

    2. The same load status that we display in the carrier/shipper app.

    3. Below load, display stop date/time for each stops

    4. Each stop is clickable and it will give you a modal to display the details

      1. Design: Here

  2. Pickup Pin

    1. This is a new pin style for pickup

    2. The pickup pin color will be #204FC6

    3. Indicator: P1 for pickup #1 / P2 for pickup #2 and so on.

  3. En Route illustration

    1. We want to change how we display en route.

    2. Color: #204FC6

  4. Issue Pin

    1. We want to track when someone has reported an issue.

    2. This pin will pinpoint where the issue had occurred.

    3. This event will also appear in the Tracking Log on the right side (See Item #8)

  5. Truck Pin

    1. This is a new Truck pin

    2. Arrow indicates which way the truck is heading

    3. If possible, can we use the color to show truck status?

      1. Green: Driving

      2. Orange: Idling

      3. Red: Parked

  6. Route Pin

    1. We want to distinguish the route between the one that has been driven and the one that will be driven.

    2. One that has been driven: #204FC6

    3. One what will be driven: #204FC6 with 40% opacity

  7. Dropoff Pin

    1. This is a new pin style for dropoff

    2. The pickup pin color will be #F44336

    3. Indicator: D1 for dropoff #1 / D2 for dropoff #2 and so on.

  8. Issue Report Log

    1. We want to add the “Issue Reported” event to the tracking log

    2. Bar color: #F6873E

  9. Driver Info

    1. As a default, this Driver section will be expanded

    2. Tracking status

      1. First tag: Source / Second tag: Status

      2. Source

        1. Display if the drive is using iOS or Android

          1. tag color for iOS: #757575

          2. tag color for Android: #359E51

      3. Tag Status

        1. Tracking

        2. Waiting on app download (tag color: #F6873E)

        3. App is not working (tag color: F44336)

  10. Edit Assigned Driver

    1. Gives you a pop-up modal to change the driver

    2. Need to incorporate Ben’s design for service failure

  11. Send SMS

    1. This gives an option to choose from Driver and Dispatcher

    2. Once selected, it will open up the message feature (Future)

  12. Customer Information

    1. This section will be collapsed as a default

    2. When clicked, it will expand like below:

        1. Customer

        2. Contact Information

  13. Pay

    1. This section will be collapsed as a default

    2. When clicked, it will expand like below:

        1. Load Price

        2. Accessorial Fee

        3. Total Price

        4. Rate Mile

  14. Load Details

    1. This section will be collapsed as a default

    2. When clicked, it will expand like below:

        1. Truck Type

        2. Weight

        3. Accessorials

        4. High Value

        5. Packaging

        6. PO / Order #

        7. Commodity

        8. Notes

  15. New Map UI

    1. Grayed-out map

    2. Same map that Judy had provided for Instant Pricing.