[BR] Message Center

Objective

• Integrate messaging in the admin so the broker can easily communicate with the internal team, carriers, shippers, and website visitors in our platform

• As an MVP , we want to start with two features:

  • Communicate with Driver through SMS

  • Communicate with internal admin users

• For the future:

  • Communicate with Carriers

  • Communicate with Shippers

  • Communicate with the visitors from the website

Three channels to send and receive messages

1. In-app Chat

   1. Internal admin users MVP

   2. Carriers

      1. Fleet Manager & Dispatcher

      2. Driver

   3. Shipper

   4. Website visitors

2. SMS with Driver MVP

3. Email

Two ways to create a chatroom

1. Via Name MVP

   1. Normal chat between you and other person or people

   2. Other people don’t have access to it.

   3. Only way for other people to join is to get invited by user who is already in it. (Think of Slack Chat and Slack Group Chat)

2. Via Load Number (Load Chat)

   1. Chatroom is created under a specific load number

   2. Anyone can join the meeting if you are Zuum members

      1. Carriers are not allowed to see Shipper chatroom and visa versa

   3. Any conversation you are having in that chatroom will be seen by anyone who joins the meeting

Places to open the messaging center

There are 4 places to open the messaging center:

A) Universal messaging button MVP

Design: Here

1. Messaging Button

   1. This button will be placed next to the notification button on the main header

   2. When click, the messaging center will slide up from the bottom right corner

   3. Different States:

      1. When there are no unread messages

         1. Gray color: #757575

      2. When there are unread messages

         1. Blue color: #204FC6

2. Alert Badge

   1. This displays the number of unread messages

B) Shipment Detail MVP

Design: Here

1. Details Tab

   

   1. “Contact” Button

      1. When clicked, you will get a dropdown:

         1. Operator MVP

            1. This will open up the chat with the operator who is in charge of this shipment

         2. Driver MVP

            1. This will open up the chat with the assigned driver

         3. Dispatcher (coming soon)

         4. Shipper (coming soon)

2. Customers Tab

   

   1. This will open up the chat with the customer contact person

3. Carriers Tab

   

   1. When click, you will get a dropdown:

      1. Driver MVP

         1. This will open up the chat with the assigned driver

      2. Dispatcher (coming soon)

4. Tracking Tab (Design)

   

   1. Right below the tracking map, there are four accordion elements: Driver, Customer Information, Pay, Load Details.

      1. On the driver section, we have “Contact Carrier” MVP

         1. This will give you the same dropdown as the carrier contact tab

      2. On the customer information section, we have “Contact Customer”

C) Carrier Database MVP

Design: Here

1. Carrier List

   1. Place the message icon next to the “call” button

   2. This will give you the same dropdown as the other “contact carrier”

      

2. Carrier Detail

   

   1. If you click the carrier from the carrier database, it takes you to the carrier detail page and the “Carrier Contact” will be placed on the top right corner

   2. This will give you the same dropdown as the other “contact carrier”

D) Customer

Main Messaging Center

Design: Here

1. Collapse Floating Button MVP

   1. When click, the messaging center will slide down and disappear from the screen.

2. Create Message MVP

   1. This will take you to create a message flow below.

3. All Tab MVP

   1. This is a place where the user can see all messages

   2. Display “All Tab” as a default

   3. Tab will turn into the active mode

4. Company Tab MVP

   1. This is where all the chat with internal users will live

5. Carrier Tab MVP

   1. This is where all the chat with carriers will live

6. Shipper Tab

   1. This is where all the chat with shippers will live

7. Website Tab

   1. This is where all the website chat inquiries will queue

   2. When the visitor requests to chat with the admin, the inquiry will be seen by every admin until someone starts chatting, then it will disappear from everyone else’s.

8. Company Chat List MVP - This is what it looks like when we receive the message from the internal users.

   

   1. Profile picture

   2. User Name

      1. The color will be blue when you didn’t read it

      2. FYI- The color is black and the background is gray when you read it

   3. User Description

      1. Company Name • Role

   4. Message Preview

   5. Timestamp

   6. Option

      1. When click, it will give you a dropdown to select from the options below:

         1. Mark as Read for unread messages

         2. Mark as Unread for read messages

         3. Remove from the list

         4. Make it a group chat

9. Carrier/Shipper Chat List

   

   1. Profile Picture

   2. User Name

   3. App Status

      1. Tells you about the app accessibility

      2. Green means

         1. For Driver - They have downloaded the app and is able to receive a message

            1. For MVP, just show green if they downloaded the app

         2. For Fleet Manager/Dispatcher - They are using Zuum Carrier platform and have Zuum Messaging Center

         3. For Shipper - They are using Zuum Shipper platform and have Zuum Messaging Center

      3. Red means

         1. For Driver - They haven’t downloaded the app and can only be reached through SMS. App will send out the message as SMS

            1. For MVP, just show red if they don’t have the app installed

         2. For Fleet Manager/Dispatcher - They are not using Zuum Carrier platform. App will send out the message via email

         3. For Shipper - They are not using Zuum Carrier platform. App will send out the message via email

   4. Load Number

      1. Display the load number if the chat is linked to the specific load

         1. You will be able to see how the message can be linked to the load # later on.

   5. User Description

   6. Chat Preview

   7. Timestamp

   8. Option

      1. *For group chat, you can add anyone from the internal users and anyone from the same carrier but not SHIPPER.*

10. Website Chat List

    

    1. Dedicated profile image for the website visitors

    2. Visitor Name

    3. Visitor’s Email Address

    4. Chat Preview

    5. The rest is the same

11. Group Chat List MVP

    

    1. Group profile image

       1. When it’s a group chat, we want to combine users' profile images into one.

       2. Max to 4 images

    2. Name of everyone who is in the chat

       1. Admin or whoever creates the chat can edit the name of the group

       2. But as a default, it will just display everyone in the chat room.

    3. Company names whom they are from

    4. The rest is the same

12. Shipper Chat List

    1. Please see item 9

Chat Interfaces

Normal 1-on-1 Chat MVP

Design here

1. Back button MVP

   1. Takes to back to the message list

2. Profile image MVP

   1. Displays other person’s image

3. User Name MVP

4. App Status MVP

   1. Please see [Main Message Center > Item 9 > letter C]

5. Option Button MVP

   1. This will give you two options:

      1. Remove from the list

      2. Make it a group chat

6. Company & Role MVP

7. Load ID Banner

   1. This will only appear when the chatroom is linked to a specific load number.

      1. As I addressed, I will discuss how the chatroom gets linked to a load number

8. View Button

   1. This button takes you to that load detail page

9. Chat-User Profile MVP

   1. To identify who is chatting, place a profile picture next to it

10. Message Bubble MVP

11. Channel Icons MVP

    1. This indicates how the message is sent.

       1. Zuum icon = via Zuum Messaging Center

       2. Letter = Email

       3. Phone = SMS

12. Timestamp MVP

13. Chat Input Box MVP

14. Upload Icon MVP

15. Send as Email

    1. When the checkbox is checked off, whatever the message you send will be sent as an email

    2. As a recipient,

       1. if they DO NOT have Zuum platform, they will only receive an email

       2. If they DO have Zuum platform, they will both receive an email with CTA button to open the app to respond and Letter-icon-marked (see item 11 > item a) Zuum Message

16. Send Button MVP

Group Chat MVP

Design here

1. Name of everyone who is in the chat

   1. Admin or whoever creates the chat can edit the name of the group by clicking here

      1. I will discuss the flow later on

   2. But as a default, it will just display everyone in the chat room.

2. The rest is the same as above

Website Visitor Inquiries

Design here

1. Email Address

   1. I am assuming the person who is inquiring will need to enter their email address to start the chatting

2. Transfer to another representative

   1. In case you are not the right person to talk to, you can transfer this person to a more appropriate agent.

   2. Transfer flow will be discussed later on

3. Option button

   1. Will give you options below

      1. Send email

Use Case #1: Creating a new message via name MVP

Design here

Step #1: messageCenter_01

Step #2: messageCenter_name_01

1. Create Type

   1. This is “By Name” icon

      1. As a default, this icon will be selected

   2. When click, it will give you the option to choose from “By Name” or “By Load Number”

2. Name Input Field

   1. Here you can either enter name of the company or user’s fully name

   2. As you type, you will get an autocomplete dropdown like below

   3. There are three ways to initiate:

      1. Select the autocompleted name

      2. Press enter

      3. Click on the on “add button' on the right

3. Add Button

   1. Entering will enter the name you type

4. Back

   1. Takes you back to the message list

5. Inactive Send Button

   1. Since no recipient has been selected, it will be in active mode

Step #3: messageCenter_name_02

1. Name input field

2. Autocomplete Dropdown

   1. As the user types in the letter, autocomplete will display that matches with the letter you have written

   2. Matched letters will be in BOLD

Step #4: messageCenter_name_03

1. Recipient Queue

   1. When you select the name, it will appear in the queue.

   2. At this point, you can either add more users to make it a group chat or press send to start talking

   3. Once you enter at least one user, the Send button will become an active mode

Use Case #2.1: Creating a new message via load number

Design here

Step #1: messageCenter_name_01

• See [Use Case #1 > Step2 > Item 1] here

Step #2: messageCenter_load_01

1. Selected Option

   1. As a default, the Name type will be selected and this is how it looks like

      1. Blue icon/Gray background (Please see invision for the design spec)

2. Load Number

   1. Select here to change from creating by name to creating by load number

   2. Once clicked, the chatroom that you are about to create will be tied to the load number

Step #3: messageCenter_load_02

1. Load Number Input Field

   1. Once you select the Load Number, the description is now changed to “Enter Load Number”

   2. You need to enter the load number not the name

2. Search Button

   1. You have three ways to enter the load number

      1. Pressing the enter button from the keyboard

      2. Select from the autocomplete which you will see next

      3. Press the search button

Step #4: messageCenter_load_03

1. Load Number Input Field

2. Autocomplete Dropdown

   1. As the user types in the number, autocomplete will display values that match with the number you have written

   2. Matched numbers will be in BOLD

Step #5: messageCenter_new_05

1. Clear Button

   1. This button will clear the load number you’ve entered

2. Recipient

   1. By clicking, you will get the list of all the stakeholders that are involved in this load

      1. Operator

      2. Shipper

      3. Carrier

3. Load Details/Status

   1. The user gets to see the load detail/status

4. Load Status

5. Pickup Details

6. Dropoff Details

7. If there is more than one pick up or dropoff, the list will get longer

   1. Detail background container can be stretched up the red line and if the contents is longer than that, the user will need to scroll.

Step #6: messageCenter_new_06

1. Brokers

   1. List all the brokers who are involved in this load

2. Shipper

   1. List all the shipper contact people associated with this load

3. App Status

   1. This will only appear to Shipper and Carrier

      1. Shipper

         1. Green means: They are using Zuum platform and has access to Zuum Chat

         2. Red means: They are not

      2. Carrier Fleet Manager/Dispatcher

         1. Green means: They are using Zuum platform and has access to Zuum Chat

         2. Red means: They are not

      3. Carrier Driver

         1. Green means: They have downloaded the app and has access to Zuum Chat

         2. Red means: They haven’t downloaded app or have issues with it

4. Carrier

   1. List all the carrier contact people associated with this load

Step #7: messageCenter_new_07

1. Selected View

   1. This is how it looks like when one is selected

2. Disable View

   1. Since shipper and carrier can’t be in the same chatroom, when one is selected, the other will be disabled and visa versa.

   2. However, the Operators will be able to join both chatrooms.

Step #8: messageCenter_new_08

• Once the send button is clicked, it will take the user to [chat interface > group chat] here

Use Case #2.2: Joining existing chat via load number

Design here

Step #1 - #4: It will be the same as Use Case #2.1

• See [Use Case #1 > Step2 > Item 1] here

Step #5: messageCenter_joinChat_01

1. Existing Chat Banner

   1. When someone already created a load chat, we need to display this banner telling them chat is already existed

2. Join Chat Button

   1. Button will say “Join Chat” instead of Send

Use Case #3: Add users to the chatroom MVP

Design here

Step #1: messageCenter_name_09 MVP

1. Names

   1. Displays all the users who are in the chatroom

   2. You can customize the name in the next screen

Step #2: messageCenter_name_10 MVP

1. Name the Chat MVP

   1. You can replace the name by entering the unique name you want

2. Search by Name

   1. Left illustration

      1. This is when you are trying to add someone in the load chat (please see here if you don’t know what load chat is)

      2. As a default, you will only see the people associated with the load but when you start typing letters, autocomplete will start looking for the name

   2. Right illustration MVP

      1. This is when you are trying to add someone to your regular chat

3. Update

   1. This button will initiate the action

Step #3: messageCenter_name_11 MVP

Step #4: messageCenter_name_12 MVP

1. Joined Banner

   1. This is what you get someone join the chat

Use Case #4: Linking messages to load number

Design here

Step #1: messageCenter_name_04

• There are three “Link Tag”

  • 1. #link

    • This link tag compiles all the “active” loads assigned to the carrier or shipper and display it

  • 2. #link12030

    • If you know specific load # you want to discuss with them, you can directly put load number next to the #link

  • 3.#end

    • If you end the Link Tag, you can do it by entering #end

Step #2: messageCenter_name_05

Step #3: messageCenter_name_06

1. Active shipments are assigned to this carrier

2. Load Number

3. Load Status

Step #4: messageCenter_name_07

1. When the linking is initiated successfully, you will get the “Linked to” banner like the first one

2. When you enter #end, you will get the “Link has ended” banner

Use Case #5: Transfer inquiry to another representative