IBM Cloudant: Notification Center

Summer 2015

Problem: Once notifications disappeared on the dashboard, there was no way of viewing them again.

Goal: Design a notification center so users can review past notifications.

Role: I was the sole designer on this project and collaborated with developers directly to build it.

Although this feature didn't exist before, there were many design constraints in place. It would have to follow the existing design style of the dashboard. Furthermore, the three different categories of notifications (success, error, and alert) were already built into the dashboard and, at this point, weren't going to be modified. This, however, did free me to think more deeply about the problem rather than the visual design.

Version 1

For the first iteration, I simply took the notifications that were showing up in the dashboard and placed them into this notification box to allow users to quickly scroll back through past notifications. While designing this, user feedback was also given to me detailing that they had no way of being made aware of responses to their support tickets. To remedy this, I tried incorporating "Support Tickets" alerts in the center as well. This is displayed right below "Notifications (4)" title. 

Version 2

Some users mentioned to us that they didn't care about certain types of notifications and would like some way to sort between notifications. In response to this, I added a sorting feature. I went through three different versions, two are below and the final version are in the screenshots after. The version on the right tested better since users could easily associate the notification color and the icon with the notification for which they cared.

Version 3

User testing revealed users wanted to see more information with fewer clicks. In response to this, I decided to show the notification in its entirety when in the notification center because users chose to open this panel, since hiding information proved inefficient. Furthermore, I was also able to add timestamp and "Copy to Clipboard" functions, providing additional utility.

I also looked at two different ways of presenting the notification center. Either a dropdown overlay (left) or a slide-in panel (right). The dropdown panel tested poorly because users seemed to think the dropdown would fade away after a specified time, and as such they felt compelled to click on something before it disappeared. With the slide-in panel, users said they felt less rushed when viewing the information and didn't feel pressured to click somewhere in an effort to keep the panel on the screen.

Upon further analyzation, I realized that the support tickets counter didn't work well in the notification center since it was more of a badge alert than a notification. To fix this, I placed the notification count next in the "Support" tab in the left navigation bar (pictured below). This still responded to the feedback, but gave context to the notification and encouraged users to click right there to go to Support.

The Final Design

The final design can be seen below. The product has shipped to users and is available to anyone using the dashboard. 


Things I would change

  • Redesign the notifications before they even make it to the notification center (that project is in development).
  • I would do a deeper rethinking of the differences between the categories of notifications. Like I said before, the categories (success, error, and alert) already existed as a constraint and I had to design around that. However, error and alert tend to cause some confusion among users as to what is the difference between them.
[unex_ce_button id="content_xoruhbcrx" button_text_color="#ffffff" button_font="bold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#f44336" button_padding="15px 40px 15px 40px" button_border_width="0px" button_border_color="#f44336" button_border_radius="3px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#e53935" button_border_hover_color="#e53935" button_link="" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]BACK TO WORK[/ce_button]