Global - Header - Notification Center

Description	Platform notifications accessible from a single notifications panel
Type	Roadmap Feature
Story
Mockup	https://invis.io/XPKIPNDGUA3 (This is very old)
Ticket
Assets	https://drive.google.com/open?id=0B0Ou1BX7e1gAVTZHNDZycl82NjQ

Data driven justification for ux/ui changes, especially necessary for organic changes that do not originate from client requests or roadmap features.

Link

Date Range

Item

Metric & Value

Assumption

00/00/2021
to
00/00/2021
(0 Days)

Metric name

Metric Value

HYPOTHESES

Lorum ipsum

REASONING

Lorum ipsum

Function	Findings	Takeaways
Icon and Position & Badge/Counter	Marketo Header placement, uses ‘paper’ icon Counter as plaintext Hubspot Header placement, uses ‘bell’ icon Counter with red badge and number Facebook Header placement, uses ‘bell’ icon Counter with red badge and number LinkedIn Header placement, uses ‘bell’ icon Counter with red badge and number Twitter Sidebar placement, uses ‘bell’ icon and ‘Notifications’ title Counter with blue badge and number Jira Header placement, uses ‘bell’ icon Counter with red badge and number Trello Header placement, uses ‘bell’ icon No counter, entire icon turns red	EMBRACE Icon position placed in header most of the time Current ‘notification center’ implementation already in header ‘Bell’ icon used most of the time ‘Bell’ icon currently used, seems to be the most common Counter most of the time contains number of new notifications Good idea to give an indication of how many new things have happened without having to open the notification center REJECT Counter most of the time is red/orange This would be a preferable change as the red colour implies importance, however header is already orange so until this is changed, notification badge will have to be blue colour Icon placement in sidebar Would cause more friction as current notification center implementation is already in header and open action would be harder to facilitate if it doesn’t go directly to full page TO DISCUSS
Open Action Notification View	Marketo Full page dedicated to all notifications Hubspot Opens with popout Facebook Opens with popout LinkedIn Full page dedicated to all notifications Twitter Full page dedicated to all notifications Jira Opens with popout Trello Opens with popout	EMBRACE Contents of notification items options on initial open: Show X notifications on popover load, then can scroll or click to ‘load more’ or have pagination, regardless of if read or not, ordered in terms of newest first REJECT Contents of notification items options on initial open: Only show new notifications and ‘read’ notifications are not shown Should show complete history of notifications and shouldn’t ‘remove’ notifications if they’ve been read as users may come back to notifications, e.g. re-downloading reports TO DISCUSS Mix of opening in full page or opening initial popup Popup has the benefit of having a ‘quick view’ into most recent popups, and can then have the option to ‘View all notifications' from a dedicated page Based on how ‘busy’ this will be, it can be a popout (requires less space) or slide-out (requires more space) and then if even more space is required then we can have a whole dedicated page
Item Structure and Indicators	Marketo Table on left with basic briefing of subject and time Panel on right with more information on what the notification is and actions on notification New notifications are in bold, then once read they are normal font weird Hubspot Icon shows type of notification at a glance Type subtitle above main subject of notification Time of receipt on right of notification New notifications have ‘dot’ on the right as well as coloured time of arrival Facebook Photo and icon combination shows type of notification at a glance Sentence structure includes ‘who’ it’s for and ‘what’ the notification is about changes depending on type of notification Time of receipt on below of notification New notifications have ‘dot’ on the right as well brighter text colour for new notifications LinkedIn Profile photo/company logo/photo combination shows type of notification at a glance Sentence structure includes ‘who’ it’s for and ‘what’ the notification is about changes depending on type of notification Time of receipt on right of notification New notifications have ‘blue’ highlight to contrast again others Twitter Photo and icon combination shows type of notification at a glance Sentence structure includes ‘who’ it’s for and ‘what’ the notification is about changes depending on type of notification New notifications have blue background on item panel Jira Profile picture shows ‘who’ did the action which provided you a notification Title shows ‘what’ the notification is Preview of notification gives a link to where it occured Time of receipt at bottom of notification New notifications have dot on the right and bold title text Trello A whole card containing the action and a preview of all the changes made Title is the card name or subject Time of change next to all actions that have taken place within card timeline Notification dot and blue highlight behind new notifications	EMBRACE Blue background highlight to indication new notification Visually this is the easiest way to identify a new notification, and will couple well with bolder font weight for specific copy on notification or time of notification arrival Placement of notification time should be either below or on the right of the notification Depending on the amount of copy shown for each notification item, maybe bottom alignment would be better to allow more space horizontally for copy Different sentence structure for different types of notifications Allows for a subtle differentiation between different notification types REJECT Dot indicator to show new notifications Takes up unnessary space where a different coloured background change achieve the same effect without taking up space TO DISCUSS Differenciate notification types achieved through icon or type title Icon can be used to show differernt types of notification usually placed on the left of the item copy, but can take up horizontal space A ‘type’ heading for each notification item could also be helpful but can then increase scrolling
Single Item Interaction	Marketo Common mark as read or unread, delete actions Subscribe action allows setup of notification emails Hubspot Option to hide all notifications of a particular type Clicking item marks as unread Clicking notification takes you to related area Facebook Common mark as read or unread, delete actions Option to report issue to support Clicking notification takes you to related area LinkedIn Common delete action Unfollow action unique to this platform Turn off function hides all notifications of particular type Can only mark a notification as read if it’s clicked on Clicking notification takes you to related area Twitter Various social media specific actions Jira When hovering over notification, can remove it with 'x' Can only mark individual notification as read by clicking it Clicking notification takes you to related area Trello Various links in the timeline within card to take you to notification which marks as read Can click the blue notification dot to mark as read and unread Clicking notification takes you to related area	EMBRACE Include ability to take action on types of notifications, e.g. Campaign related notification can be clicked to go to that campaign Report download ready notifiction can be clicked to take you to report download page REJECT TO DISCUSS How to handle mark as read or unread? Options: Clicking on notification marks as read (but can be marked as read via global ‘mark as read’ button) Dedicated button to mark individual items as read (allows more control) What happens when we mark as read? Do they just unhighlight? This ties in with the amount that we’re going to show in the popup? Do we allow deleting/hiding of notification items? Or keep all notification items permanently there and therefore can only be organised by read and unread Do we allow control to not show notifications of a particular type? Do we have sections for when notifications came in, e.g. section for todays notifications, for yesterday, for last week, etc.
Additional Settings	Marketo Filter for type of notification Subscribe action allows setup of notification emails Hubspot Filter for type of notification Dedicated settings page (https://app.hubspot.com/notification-preferences/4975419/desktop) Can turn on/off all bell notifications Can turn on/off all popover notification Can turn on/off all browser push notifications Play browser sound when new notification comes in Depending on notification type, decide if it comes in via bell/popover/browser notification Facebook Dedicated settings page Can select which types of notifications come through LinkedIn Dedicated settings page Can toggle on/off different types of notifications Twitter Can turn on/off all browser/sms/email notifications Jira Mark all as read option No dedicated settings page Tabs for different notification priority (direct/watching) Trello Filter by unread notifications Mark all as ready button Change email frequency	EMBRACE ‘Mark all as read' action Include this action as it allows quick management of new notifications REJECT TO DISCUSS ‘View all notifications’ action Do we have this dedicated page to show a history of all notifications? This page can inclue a search to help find history of notifications Can allow subscribing to different notification types/hiding notifications Depending on level of feature scope, a ‘subscribe’ service to send equivalent notification via email could be a great addition But will then need a management area for this