Global - Header - Notification Center

Description	Platform notifications accessible from a single notifications panel
Type	Roadmap Feature
Story
Mockup	https://invis.io/XPKIPNDGUA3
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	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 REJECT 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
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 Something 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
Item Interaction	Marketo Something Hubspot Something Mailchimp Something Facebook Something LinkedIn Something Twitter Something Jira Something Trello Something
Additional Settings	Marketo Something Hubspot Something Mailchimp Something Facebook Something LinkedIn Something Twitter Something Jira Something Trello Something