Notifications Center #13
Description
Description
Design a notification system including notification bell, dropdown, full notifications page, and notification preferences. Users need timely alerts about vault events.
Target Users
- Users monitoring vault status
- Verifiers receiving validation requests
- Users tracking deadlines
Design Requirements
Must Include:
- Notification Bell (Header):
- Bell icon with unread count badge
- Dropdown on click
- Visual indicator for new notifications
- Notification Dropdown:
- Recent notifications list (5-10 items)
- Mark all as read action
- View all notifications link
- Notification item:
- Icon by type
- Title/message
- Time ago
- Unread indicator
- Click to navigate to relevant page
- Notifications Page (Full):
- All notifications with pagination
- Filter by type (vault, milestone, system)
- Filter by read/unread
- Mark as read/unread actions
- Delete notification option
- Notification Types:
- Vault created successfully
- Milestone validated
- Vault deadline approaching (urgent)
- Funds released
- Funds redirected
- Verification requested (for verifiers)
- System announcements
Should Include:
- Notification preferences/settings
- Email notifications toggle
- Push notifications toggle
- Notification frequency
- Quiet hours
- Per-vault notification settings
- Notification sounds (optional)
- Batch notification grouping
- Real-time updates (WebSocket indication)
Design Specifications
- Dropdown width: 320-400px
- Dropdown max height: 400px with scroll
- Badge: Red/accent color, max "99+"
- Notification item: Clear visual hierarchy
Deliverables
- Notification bell states (no notifications, new, read)
- Dropdown design
- Full notifications page
- Notification preferences/settings page
- Empty state (no notifications)
- Mobile designs
Designer Notes
- Deadline notifications are critical—make them urgent
- Don't overwhelm with notifications—group when possible
- Unread vs. read should be clearly distinguishable
- Consider notification anxiety—let users control frequency