[BR] Notification Center

Problem

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

Solution

• 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”

      1. 

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

Settings

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