[BR] Notification Center

Document Status


Last updated

Document Owner

Chris Son


Chris Son





Notification Document



 Gamification 1.0




  • Since we don't have a notification center on our platform, we can't see and track all our alerts and notifications. 


  • Create a notification center that stores all the alerts and notification.

  • Reference: Monday notification center

Notification Button: Inactive

Design: here

  1. Notification button placement

    1. We want to place the button next to the user name on the main header

  2. Report Bug or Feature Idea

    1. Move this button to the far left side

  3. Notification Icon

    1. Outline button is when it’s inactive

    2. The filled button is when it’s clicked or active

  4. Badge

    1. Place this red badge when there are any unread notifications

Notification Button: Active

Design: here

  1. Active notification button

    1. The button becomes solid when it’s clicked

  2. Option button

    1. Gives you the option to “Mark all as read” and “Settings”

  3. All Tab

    1. Display all the alerts and notification coming from the system

  4. For Me

    1. Only display the alerts/notifications and load activities that are assigned to you.

  5. For Everyone

    1. Displays all the alerts/notifications that need to be seen by everyone in the system

      1. EDI Tender MVP

        1. Receive new EDI tender

        2. EDIs being accepted or Rejected

      2. *FYI, More notifications will be added down the road*

  6. Zuumanity

    1. Only display the alert/notification/activities that are related to Zuumanity

      1. Your activities

      2. Team member’s activities

  7. Unread

    1. Display all the alert/notification/activities that aren’t clicked

    2. Please refer Monday notification center

  8. Unread Item

  9. Read Item

Unread Item

  1. Unread Bar

    1. Unread items will have this bar

  2. Profile Picture

  3. Username

    1. Name of the operator

  4. User’s rank

  5. Rank Badge

    1. Display badge

  6. Verb

    1. Will always start with the verb

    2. Will color it blue

  7. Body

    1. Text will be varied based on what action this person has taken

  8. Load #

    1. The text will be varied based on what action this person has taken

  9. Timestamp

    1. The time this action was taken place

  10. Parent Page

    1. Where this action was taken place

Read Item

  1. The blue bar on the left is gone

  2. The background color is changed to light gray

    1. See invisionapp for detail spec

EDI Tender Accepted

Zuum Notification

  1. Zuum logo on the profile picture

  2. Name: Load #

  3. Please see below for the detailed instruction for the content


  1. The setting is divided into three parts

    1. Notification when my shipment…

    2. Notification when someone…

      1. Needed for accounting team when assigning appointment task

    3. Zuumanity

  2. Department dropdown

    1. If you click the department dropdown, you will get a dropdown like a screenshot on the left side.

    2. Here, you can deselect a department that you don’t want to receive a notification on or you can go very specific by clicking the department and deselect a certain user.

Types of Notification



Verb (Colored Blue)


Supporting (bold)

My Shipment

When my shipment is assigned to a carrier

Is assigned

to a carrier:

Carrier Name

When my shipment has been picked up

Has been picked up


Location Name

When my shipment has been delivered

Has been delivered


Location Name

When the driver reports an issue

Has been reported an issue


Issue Type

When it’s missing a POD

Is missing



Someone else

When someone assigned a task to you


you to an [task name] for

Load #

When someone accepts the EDI tender

Accepted (via Platform used)

the EDI Tender for

Load #


Has leveled up

Has level up!

to Specialist

When someone reaches a kill streak

Has reached


kill streak!

Brought a new customer



new customer!

Received a purple heart

Just received


Purple Heart