Problem brief given to me
We need to drive forward work on the BigFix UI Notification Center. At a high-level this is where a user can come to engage with all of their notifications.
Engaging means a lot of things: dismiss notifications, find notifications of a certain type, act on the notification (follow a link, kickoff a remediation flow etc.)
More functionality (e.g. filtering and viewing more data) was required. We want to drive forward on page-based notifications.
Project Process
Research, Discovery, and UX Auditing
Started with research on Notification center, architecture and purpose it serves in Enterprise environments. The qualitative data validates the use and design of notification center for software products.
Understood the real user pain points and challenges in HCL BigFix environment, current user journey and identified opportunities for design intervention.
Conducted detailed competitive benchmarking and documented the features, UI architecture and design elements that builds the notification center.
Low fidelity wireframes and Ideation
Created and explored different layouts for the notification section. Generated multiple examples of notification specific to HCL BigFix using Figma Make.
Designed low-fidelity wireframes based on Figma make ideas and included different functionalities like - how to mark notification as read, filter mechanism, read/unread sort. Categorised notifications based on severity.
Medium Fidelity and Information density optimization
Discussed low fidelity wireframes with the design leaders and product managers to discuss the architecture of notification center. Discussed the design tradeoffs and prioritise the features which need to be designed for the current release.
High Fidelity Designs and Design handoff
Created high fidelity designs after design leaders and PMs approval, used design system and design patterns to build the high fidelity designs. Created detailed design handoff for the design which included user flow (interaction), responsive behaviour (zoom support), alt text, labels, heading structure, keyboard navigation, dark mode, generic links and page region (semantics).
QA testing and Validation
The design is handed over to developer for the development and UI is yet to be released. Once UI is released QA testing will be performed to check whether design has been implemented correctly or not.
Key Features
Filtering notifications based on app source
Users can use multi-select to filter the notifications based on the app source. In HCL BigFix environment there are different pages from where notification can be triggered. Users can prioritize based on what app source they are concerned about.
Read/Unread toggle
Users can quickly filter out notifications based on read and unread states helping them to focus on unread ones first.
Notifications archive
Users can move the notifications into archive so that they can refer them back later.
Mark as read
Users can mark the notifications as read either by marking them individually or performing the bulk actions.
Filtering Mechanism
Users can engage multiple filters at a time to see notifications specific to their requirements. This helps them to deal with huge number of notifications.
App source: Select the source of notifications from the multi-select dropdown.
Severity pills: Users can sort out the notifications based on severity namely - critical, warning, success and info.
Read/unread toggle: Switch on the toggle to view only unread messages.
Search by keyword: Users can narrow their notifications view by specifically targeting the notifications containing a particular keyword.
Outcome Measurement Framework
The design performance metrics are yet to be tracked, but following metrics can be used to conduct the usability testings of the delivered UI.
Time to Triage
The primary metric which can be used to track the performance of notification is Time to triage. This means time user takes from opening bell popover to taking an action. The action could be - clicking, filtering and marking as read.
Click through rate (CTR) by Criticality
A successful design means 'Critical' alerts get clicked or resolved almost immediately, while 'Info' alerts have a lower, slower engagement rate. If users are clicking 'Info' alerts at the same rate as 'Critical' alerts, it means the visual coding isn't distinct enough and the system is failing to signal true urgency.
Feature Adoption for “Mark all as read”
Tracking this metric will help me to understand how many percentage of users are interacting with “mark all as read” feature. If more number of users are clicking on “mark all as read” this can be inferred that system is generating too many alerts.
Drop off rate for “View more” notifications
This will help me to understand how many percentage of users are clicking on “View all” link at the bottom to load another list of notifications. If most users clicks this, this means they are engaging with the notifications and lesser drop off.
Feature adoption for “Search by keyword”
Search by keyword is an additional way of filtering notifications. The more the number of users interacting with this feature means more the adoption and users are finding it useful probably while dealing with huge number of notifications.
What next?
The project has been completed till designing drawer for notification center. This project can be further taken forward to explore possibilities for full page notifications and customization options to enhance the user experience.
Full page version
A full page notification center where users can view all alerts, filter and prioritize based on severity and other factors.
Customized notifications
A user interface for settings and customization which will help users to decide which notifications they want to see and which ones to ignore.
Advanced Filters
An advanced filtering mechanism where users can filter notifications based on categories within applications source. This is something proposed by product managers which can looked into in next release.
