Notifications

[Spark450]

Objective

• Conduct comprehensive discovery work to understand user needs, pain points, and expectations regarding notifications.
• Design the "Notifications" feature from initial concepts through to detailed visual designs.
• Ensure the design aligns with the approved Workspace pattern and utilizes the updated components from the new Figma library.

Tasks

• [x] Discovery Phase

  • User Research

    • Review existing DDD products that include a notification feature.
    • Conduct designer interviews to gather insights on notification designs.

  • Competitive Analysis

    • Analyze how other jurisdictions and industry leaders implement notification systems within a workspace context.
    • Identify best practices

  • Technical Consultation

    • Meet with developers to understand constraints.
    • Document any technical limitations or opportunities.

• [x] Define Requirements

  • Compile findings from the discovery phase into actionable requirements.
  • Prioritize features based on user needs and business goals.

• [x] Ideation and Sketching

  • Brainstorm design solutions and interaction models for the Notifications feature.
  • Map out different notification types, states (read, unread), and user interactions.
  • Collaborate with team members for initial feedback.

• [x] Visual Design

  • Apply the approved visual styles and component updates to create high-fidelity designs.

• [ ] Usability Testing

  • Plan and conduct usability tests
  • Document findings and identify areas for improvement.

• [ ] Design Documentation

  • Prepare detailed design usage guidelines and specifications, including annotations for developers.
  • Document interaction behaviors, edge cases, and responsiveness guidelines.

• [x] Acceptance Criteria

Considerations

• Types of Notifications

  • In-App Notifications: Messages that appear within the application while the user is active.
  • Email Notifications: Messages sent to the user's email address
  • SMS Notifications: Text message notifications

• User Preferences and Control

  • Notification Settings: Allow users to customize which types of notifications they receive.
  • Opt-In/Opt-Out Options (Email and SMS): Provide clear options for users to subscribe or unsubscribe from notifications.
  • Do Not Disturb Mode: Enable users to silence notifications during specific times.

• Notification Content and Relevance

  • Personalization: Tailor notifications based on user behaviour and preferences.
  • Content Design: Guidelines notification messages
  • Priority Levels: Differentiate between critical and non-critical notifications.

• Delivery Timing and Frequency

  • Optimal Timing: Send notifications at times when users are most likely to engage.
  • Rate Limiting: Prevent overwhelming users by limiting the number of notifications sent within a time frame.

• Interaction and Behavior

  • Dismissal Mechanism: Provide easy ways to dismiss or snooze notifications.
  • State Management: Indicate read vs. unread notifications clearly.

• Responsive Design and Accessibility

  • Responsive Design: Ensure notifications display correctly on various devices and screen sizes.
  • Screen Reader Support: Ensure notifications are readable by screen readers.
  • Keyboard Navigation: Make sure all notification interactions are accessible via keyboard.

• Notification Management

  • Organization: Allow users to sort, filter, and search through notifications.
  • Bulk Actions: Enable users to perform actions on multiple notifications simultaneously (e.g., mark all as read).
  • Archiving: Decide how long notifications are stored and provide options to archive or delete them.

• Edge Cases and Scenarios

  • Offline Mode: Determine how notifications behave when the user is offline.
  • Multiple Accounts: Handle notifications for users with multiple accounts or roles.

Dependencies

• Availability of stakeholders and users for interviews and testing.
• Completion or availability of updated components in the new Figma library.

Acceptance Criteria

• Notification Card

  • Functional Requirements:

    • The notification should adhere to the behaviours based on its type, state, urgency, and read/unread status.
    • Notifications should dynamically update based on user interaction and service-provided triggers.


  • Variants

    • Default, Success, Critical, Warning, Info, Event

  • Properties

    • Timestamp

    • Human Readable Format:

      • Notifications less than 1 week old are displayed in short timestamp format (e.g., 1h ago, 2d ago, 4d ago).

    • Exact Time Format:

      • Notifications between 1-4 weeks old are displayed with exact timestamps (e.g., Mon, Jun 20 at 4:15 pm).

    • When notifications disappear from the notifications centre will be determined by the services.


    • Urgent Status

    • Urgent status is displayed above the notification label.

    • Trigger: Urgent status is determined by a service decision.


    • Badge

    • (Optional for default notification), displayed next to the notification, matching the notification type.


    • Read/Unread Status

    • Unread:

      • A green dot appears by the timestamp in the top-right corner to indicate unread status.

    • Read:

      • No green dot appears.
      • Trigger: Status changes to Read when the user clicks and opens the notification.


    • Label (optional)

    • Context Specific: The label reflects the content of the notification.


    • Description

    • Character Limit: 100 characters maximum.

    • Description: Should be concise.

    • e.g. “Rita Lee assigned you a new case.”, “Outage scheduled for Sep 15 at 10 pm to Sep 16 at 10 am.”, “Gilbert Barton’s application for income support was approved.”


    • Preview (optional)

    • Context Specific: If applicable, displays the first 50 characters of the notification link’s content.

• Notification Centre

  • Functional Requirements:

    • The notification centre should dynamically position itself depending on whether the notification bell icon is in the header or side panel.
    • The notification centre should accommodate the container dimensions, stroke, shadow styling, and spacing defined below.
    • Upon dismissing or closing, the container should collapse.

  • Position

    • Dynamic Positioning:
    • The placement of the notification centre depends on the location of the notification bell icon:
      • Side Panel:
        • Positioned to the right of the notification icon.
      • Header:
        • Positioned below the notification icon.

  • Container

    • Label
      • Header: Displays the text "Notifications".


  • Close Icon

    • A close icon should be present, allowing users to dismiss the notification centre.


  • Day group

    • Label: Depending on the day the notification is received displays “(week)day”
      • e.g. Today, Yesterday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday

  • Notification Cards

    • The container should display individual notification cards within the defined container, following the notification card specifications (from the Notification Cards criteria).
    • Scroll bar: When the number of displayed notifications exceeds the defined container max height, a scroll bar appears on the right allowing user to scroll through the notification cards.
    • When notifications disappear from the notifications centre will be determined by the services.


  • Notification End Message

    • Content: When there are no older notifications to display, the message "No older notifications to display" should be shown.


  • Bottom Action

    • Label: The bottom action displays "Mark all as read".
    • On click:
      • Marks all notifications as read.
      • Green dots on notification cards disappear.
      • Button state remains as default.

[Spark450]

Jira issue

[Spark450]

@riannazad I left a few comments there for you to address, great work!