This site was hand-crafted with love and care ❤️

Notehub Alerts & Notifications

Role
UXUI Product Engineer
Client
Blues Wireless
Deliveries
UX, wireframes, prototypes, customer journey, usability tests, UI component library, front-end development
Challenge

Important alerts and notifications related to devices, routes, events, anomalies, project or billing invites need to be easily accessible to customers in the app and via email and sms.

Objectives
#1 Outline differences between alerts and notifications.
#2 Outline all Notehub event types that should trigger alerts and notifications.
#3 Outline privacy conditions for restricting user access on shared projects and accounts.
#4 Define what types of activities should trigger an alert / notification.
#5 Categorize alerts and notification by states, groups and hierarchical priorities.
#6 Define UI components, behavior, interaction and functionality.
#7 Conduct research and user testing, across different platforms.
Research
Definition

- General notifications —Displayed as bell icon on the top right of Notehub navbar with a number indication, and opens up, and can be modified under account settings when clicked to list all unread notifications.

- Banner notifications (System generated) —Located below Notehub navbar and take up the entire with of the page. System generated and cannot be dismissed/modified by a user.

- Alerts (user defined) —Located in project settings, created by project owner to monitor and issue alerts for certain behaviors of elements in a project. Alerts are real-time unlike notifications.

Notes

- Notification system gives a user a quick overall status of important activities related to their Notehub account, without having to navigate to each specific page or email to check.

- Notification system consist of a quick dropdown menu which displays a handful of notifications and View all button which takes the user to a dedicated notification page with all notification related to the account.

- Notifications are dismissible, invites are not. The total number of active notifications is updated if dismissed or viewed. Notifications that require an action by account owner have a link to specific page or a CTA eg: Accept/Decline invite.

- Notifications are bundled into two groups: General informational notifications and Pending invites notification which requires user's action. Depending on level of complexity and number of notification groups we can include a filter system for specific notification group or type.

What type of activities trigger alerts or notifications?
  • — User's account is successfully verified
  • — Auto recharge successful / unsuccessful
  • — Payment successful
  • — Insufficient funds
  • — User is invited to join a project or billing account
  • — Device, event, route or anomaly
  • — Firmware update failed
  • — Payment Method added/edited/deleted
Impact

Knowing and understanding how projects are performing means being able to make better informed decisions. Users are more informed of how their projects are performing without having to manually check each time thus improving usability, efficiency and productivity. A rather unintended side effect of this implementation was that overtime we noticed people having to sign in to the app less once they resolved all outstanding issues with their projects.

Reflections
Team work make the dream work —It was inspiring having collaborative sessions with the team and getting useful perspectives and insights.
Alerts design mockups
Alerts design mockups
Alerts component documentation
Alerts component documentation
System generated Notifications
System generated Notifications
Notifications nav dropdown
Notifications nav dropdown
Notifications popup dropdown
Notifications dashboard
Notifications settings
Notifications settings
Alerts dashboard
Alerts dashboard
Alerts logs
Alerts logs
Custom Alert configuration
Custom Alert configuration - Alerts & Notification