Anaplan’s Notification System
The Cloud Platform team wanted to incorporate a new feature, a notification system that allowed tenant administrators to have the ability to send product, marketing, and system updates to their users. Currently, the system does not have any kind of tool for tenant admins to contact their users in their organizations.
I was the UI designer, collaborating with other designers in their respective areas that share the same styling of components, such as the collaboration panel and global navigation. I worked closely with the UI Engineering team to understand the technology limitations and if there are any other dependencies with this new feature.
In order to start designing, I worked closely with the Cloud Platform team to look at other products that also had a notification system.
I reviewed Facebook, Medium, Twitter and LinkedIn's visual cues to let the user know they have an unread notification.
I also viewed the notification drawer during the research phase for the same products to see the standard pattern used.
The notification pattern is made up of:
Preview of message in 2 lines maximum. If more, ellipses is used
Other elements we wanted to incorporate into our designs were:
Title of notification
Mark notification as read/unread
URL link that allows users to view message via web
The ability to expand and collapse content container in notifications drawer
Design Stories for tenant admins:
As a tenant admin, I can create notifications.
As a tenant admin, I can edit notifications.
As a tenant admin, I can send notifications.
Design Stories for recipients:
As a user, I can view notifications.
As a user, I can mark notifications as 'read' and 'unread.'
As a user, I can archive old notifications.
I worked with the product designers of the collaboration team to keep this new feature consistent with their template. As soon as they made the revision in the collaboration updates template using users' initials instead of avatars, I made the iteration to my wireframes during the next sprint. I used a letter to represent the type of notification -- P for Product, S for System and M for Marketing News Updates. This kept the layout consistent and made things easier for our UI Engineers when building out this feature.