Alert Notifications (Part 1)

Overview

Alerts is one part of a notification system designed to efficiently connect (and make aware of) the user to many different types of activity within the Black Diamond Wealth Platform. Alerts notify the user when reactive or proactive information is available to act upon. The complexity of this project lies in combining job processing & tracking with standard system alerts. Email and text messaging (coming soon) will be used to connect information to users outside of the platform.

Roles

Design Lead
User Experience
Visual Design

Step 1: Define use cases - what is eligible to receive an alert?

• Tracking Jobs the user initiates, such as running a Report or Data Mining Query
• Receiving Information from Black Diamond, such as release notes or reconciliation delays
• Action the user needs to take, such as changing a password or resolving integrated account errors
• Actions the user needs to be aware of, such as document or report sharing by another user

This generated a target list of alerts to solve for: (report runs, file upload, file sharing, new accounts). Data tells us how often certain processes are ran. Example: Reports. Users run A LOT of reports and this was the first challenge:

Challenge: Don't over alert the user!

Users who work within the Reports run multiple reports for multiple clients from multiple locations within Black Diamond. Because our user base targets both small and very large firms, data showed a user would often run more than 10 reports in one sitting, therefore Toasting every “job completed” alert would result in a poor, invasive experience. Additionally, some run processes could take up to an hour to complete (this is where we are exploring toasting behavior). Therefore, we would bucket alerts offscreen and allow user to access them as needed.

Step 2: Flows

Alerts are generated from either a job process by a user or automatically by the system. This is a high level flow for the creation of an alert. Processes started by a user may vary slightly depending on the job workflow, but they will always have a state of “in progress” and “complete”.

Job Processes:
• Run Report
• Run A Data Mining Query
• Uploads
• Billing Report
• Long running jobs

Automatic Alerts:
• Update Password
• BD Broadcast (System messaging)
• New Accounts added
• Shares and document posting
• Custom Defined

Below is a workflow for a user who runs a report from the Report Builder. A tooltip and badge icons will notify that a process is complete. As mentioned in the challenge above, the tooltip is a less intrusive way to notify the user of completed activity because of the expected high volume of job processes from the Reports section.

When multiple processes are running AND completed, the Alerts Icon will need to clearly show both statuses. This illustrates the different states that the Alerts Icon will have.

Step 3: Visual Design

Sliding Panel vs Dropdown:

Below are low-fi comps of the alerts notification panel. The first decision was whether or not to use a dropdown or a side panel for the alerts. I chose to use the panel because of: A) the large amount of alerts expected B) the future addition of alert functionality C) more real estate to build in side panel settings and filters D) feedback consideration of pinning the panel to always be open.

After review and feedback, and although it seemed helpful for high amounts of job processes, the icon tabs (which sorted alerts by app) were removed. Instead, we placed all alerts in one chronological list and display the APPLICATION TITLE subtly within the header of each alert. *****We allow sorting by app via a dropdown***

The alerts themselves went through a few changes as well. I was very concerned with showing too much VS showing too little and finding the right balance within an individual alert. An alert was put into card style boxes so that they could be toasted (if/when needed). I made new icons that were more relevant with the items found amongst Job Processes (i.e. report, folder share, file upload, etc). The final UI treatment of font size & styles was meticulously chosen to provide scanability and clarity of an item name, its status and source.

Below is a current hi-fi mockup for the alerts panel.

Interactions & Animations:

1) Tracking a job process and alerting the user when its complete:



2) Deleting & recieving an alert while panel is open:



3) A process finishes while panel is open:



4) Alerts icon showing both a "running" and "completed" status:



This project is in development now and we are starting on the preferences for alerts as well as filtering and bulk operations. There is more to come! Thanks for reading.

More Case Studies