Notification System for Agent CRM Web App
Inform agents real-time events and appointments
Overview
Sureify is developing a CRM web app for life insurance agents to manage their book of business, service, sell and track compensation in a single platform. Our goal is to create a notification system in the app to inform agents real-time events or a variety of agent related items and appointments, helping agents manage their book of business and daily workload efficiently.
My Role
Product designer
(Worked through the entire design process and artifacts of this project.)
Team
Product manager (PM)
Engineering (Eng)
Duration
1.5 months (2022)
Design Process
Understanding the Notification System
Users
At the beginning of creating the product we conducted explorative user research with insurance agents in an interview format, understood their daily workflows and user journeys. From the research findings I learned how alerts and notifications will be involved in agents' daily work. These insights became the initial requirements for the notification system.
Notifications
From PM I learned that each unique notification type will contain detailed information, specific links and actions for users to interact with — to a specific policy or directly to a piece of information. Here is an anatomy I created to visualize a piece of notification.
Problem Solving
Information Architecture
The complex part was to sort through various categories of notifications generated to the agent portal. With that knowledge, I organized them into a mind map as a clear overview, collaborated with PM to determine which categories fell within the scope of the notification system. To ensure agents focus on their busy work without unnecessary distractions, I decided what information is most essential to be included in each type of notification.

Some notifications are more important/urgent than others, so they should be taxonomized (and implemented) through varying levels of visibility, based on how much attention it requires from the user. I worked with PM to understand priority of each type of notifications and how they work and marked them on the mind map.
Navigation
As for where notifications should be located on the agent portal dashboard, I decided to have all notifications divided into 3 major locations:
• The Updates section is shown at the very top of the dashboard because these should be the first things agents see when they open up the portal. This way, they would know if there are any immediate tasks that need to be addressed at the beginning of the day.
• The News section is placed to the right next to Updates. Although insurance carriers may want to encourage agents to read them, the content may not be that important to agents’ day-to-day work.
• Since notifications are more time-sensitive, the Notification history is not important enough to be shown on the dashboard; an entry point is provided from the bell icon.
Design & Iterations
Interaction design
With an understanding of agents’ daily work and priorities, I designed the interaction of each kind of notifications, presented as cards, within each location of navigation. I made major decisions around:
• How each type of notification works and behaves.
• How notifications interaction impacts other Dashboard and the Bell dropdown (notification history) UI elements.
• How to show a limited number of notifications and the logic for when they get refreshed.
• How notifications get dismissed.
Individual notification templates
Next step is to design modular templates for each type of notifications. I first designed a few versions of each notification card, then fit multiple of them into the dedicated space on Dashboard (both desktop and mobile) to assess their appearance.

When agents log in to the portal dashboard, I aimed to prevent cluttering the space above the fold, ensuring visibility of other vital sections like data tables and snapshots. Consequently, the space allotted for each notification is limited. The primary design challenge was making notifications easy to skim in this confined space across various viewports, demanding each card to deliver key information and call-to-action concisely to fit its space.
1. Updates
Iteration: The notification card is full of information and links asked by the PM, which can be distractive to users to find real important things; it also didn’t help to reduce the size of each card, which can end up cluttering the dashboard.
(iterations)
To improve these issues, I decided to only include info and links that are closely relevant to the type of notification, adjusted font size and weights to show better information hierarchy and tried more ways to reduce the space each UI element takes.

Shipped version:
• This section shows all auto-generated alerts triggered by updates in the system.
• This section only shows 3 alerts at a time. Prioritize showing critical rated alerts, once they are all dismissed, show less critical - non critical alerts.
• Users can choose to click any links / buttons to check specific info related to the alert or take actions.
2. News
Iteration: The goal in designing this section was to maintain a similar height as the Updates section while displaying as many news tiles as possible. After experimenting with various design patterns and getting inspirations from news websites, I found that the carousel pattern does the best job.
(iterations)
Shipped version:
• This section shows all auto-generated alerts triggered by updates in the system.
• This section only shows 3 alerts at a time. Prioritize showing critical rated alerts, once they are all dismissed, show less critical - non critical alerts.
• Users can choose to click any links / buttons to check specific info related to the alert or take actions.
3. Announcements
Iteration: Initially, I placed this section above Updates and News, considering the importance of these announcements for users. However, after consulting with stakeholders, I received advice to make it less prominent since the information doesn’t directly contribute to the agent’s work. Taking inspiration from e-commerce websites, I created a top banner for these announcements, ensuring visibility at all times without disrupting users' workflow.
(iterations)
Shipped version:
• Top bar of the page holds 3 types of notifications : Emergency alert, 3rd party Maintenance updates, Office closures / Holiday Hours.
• When user log into the portal, these alerts will show up first in Override format. When the override is closed the alert will show up here.
4. Notification history dropdown
Iteration: This is where users can view all past notifications. Given the time-sensitive nature of notifications and to keep the feature simple, I decided to retain notifications for the last 30 days only. This ensures the dropdown has ample space to accommodate all notifications, eliminating the need for users to manually clear or delete old ones.
(iterations)
Shipped version:
• The section is divided into 3 categories: Book of Business; General Notices; Agent specific.
• Unread notifications will be indicated. Users can also filter out messages that have been read.
Learnings & Reflections
• Understanding the gravitational effect of each visual element is crucial. Similar to the composition of a drawing, visual elements influence users' eye movements. Recognizing this visual weight aids designers in strategically placing information and affordances to enhance user navigation and comprehension.
‍
• When simplifying UI design, it's essential to ask critical questions: What is the objective behind creating a specific visual element? How does it contribute to improving the user experience? By considering these questions, designers can ensure that each visual element serves a clear purpose and effectively assists users in achieving their goals.
‍
• In this project, the PRD includes 4 types of notifications. However, they were not categorized in a way that helped clarify all possible notifications the portal may have. It is good to start the design process with the PRD that the PM provided, but be mindful if anything is missing or needs to be clarified by jumping out of the PRD and thinking from a bigger view.
Want to check out more projects?
Get in touch!
rupingmadesign@gmail.com
WORKaboutresume
Copyright © 2024 Ruping Ma Design - All  Rights Reserved.