Anaplan’s Notification System

 

Overview

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.

 

ROLE

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. 

 
Notification counter in global nav for Facebook, Medium, Twitter and LinkedIn

Notification counter in global nav for Facebook, Medium, Twitter and LinkedIn

Notifications/Messages drawer for Facebook and LinkedIn

Notifications/Messages drawer for Facebook and LinkedIn

COMPARATIVE ANALYSIS

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:

  • User's avatar

  • Preview of message in 2 lines maximum. If more, ellipses is used

  • Timestamp

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

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.

 

Wireframes

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.

Wireframe with user's avatar

Wireframe with user's avatar

Wireframe with product update notification

Wireframe with product update notification

 

Hi-Fi Mockups

 

Visual Specs Deliverable

NotificationTemplate.png