Overview:

Description	Platform notifications accessible from a single notifications panel
Mockup	https://www.figma.com/proto/vRu58Ydb3kgZcVOqiWIDkX/GLOBAL---Header---Notification-Centre?node-id=1%3A4&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A4
Assets	https://drive.google.com/open?id=0B0Ou1BX7e1gAVTZHNDZycl82NjQ

Quantitative Data:

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

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

Competitor Research:

Function	Findings	Image	Takeaways

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 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 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
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 Dot indicator to show new notifications Takes up unnessary space where a different coloured background change achieve the same effect without taking up space But can also be used to mark items as ‘read’ Use dot indicator as the single action for items will likely just be ‘mark as read’ 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 Depends on the different notifications we’ll be adding Reject TO DISCUSS
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 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) Either dot indicator or words that say ‘mark as read’ that toggles to ‘mark as unread’ when clicked Do we allow control to not show notifications of a particular type? V2 Allow a filter to show just ‘unread’ notifications Reject 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 Just marking as read and unread (for v1 for now) Do we have sections for when notifications came in, e.g. section for todays notifications, for yesterday, for last week, etc. TO DISCUSS
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 read button Change email frequency	Embrace ‘Mark all as read' action Include this action as it allows quick management of new notifications Reject ‘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 V2 probably 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 Probably not, as notification center will try and reduce the amount of emails that we’re current;y sending TO DISCUSS

Proposal Feedback:

Stakeholder	Date	Changes

Stakeholder

Date

Changes

Done

Rejected

need more info

TO DISCUSS

Retrospective:

To be completed after this features release. The retrospective should allow a basis for further improvements to this feature.

User Feedback

Stakeholder	Date	Description

Stakeholder	Date	Description

Quantitative Data

Link	Date Range	Item	Metric & Value	Assumption