Breach Notification & Regulatory Reporting UI in Figma

Quick answer

Breach notification UI turns an incident into compliant, auditable disclosures—on deadline, with legal sign-off, and without leaking draft language externally. Design a regulatory timeline tracker with jurisdiction clocks and escalation; an affected-parties calculator tied to evidence and PII scope; disclosure templates per regulator and channel; and approval gates before any send or filing. Start from the Figma guides hub and pair with forensic evidence, compliance exports, war room, privacy settings, and Dev Mode handoff.

Who this is for

Product designers building breach response consoles, GRC disclosure modules, and customer notification flows for enterprise Security, Legal, and Privacy teams.
Design system teams aligning deadline badges, jurisdiction chips, and approval ribbons with badges, progress steppers, and modals.
Engineering teams implementing countdown timers, immutable draft history, regulator API submissions, and audit trails for every disclosure action.

Regulatory timeline tracker (jurisdiction clocks)

BreachCase — INC-2026-0891 · Notification status: In progress
├── Header: 3 jurisdictions · Earliest deadline: 68 hours · Legal owner: Priya Shah
├── Actions: [ Add jurisdiction ] [ Start disclosure draft ] [ Request legal review ] [ Export filing pack ]
├── Timeline row: GDPR (EU) · 72h from awareness · Due 2026-07-29 2:00 PM · Status: Draft in review
├── Timeline row: PIPEDA (Canada) · As soon as feasible · Due — · Status: Not started
└── Timeline row: State AG (California) · Without unreasonable delay · Due — · Status: Blocked (awaiting scope)

Column	Content
Jurisdiction	GDPR, HIPAA, state breach laws, sector regulators
Trigger event	Awareness date/time (immutable once set)
Deadline	Computed clock with timezone and business-day rules
Status	Not started / Drafting / Legal review / Filed / Not required
Owner	Legal, Privacy, or external counsel contact
Evidence link	Scope memo from forensic locker

Verdict: clocks are legal-critical—show countdown in hours, not vague “soon,” and block “Filed” without uploaded proof of submission.

Awareness timestamp should sync from war room when Legal marks incident as reportable.

Affected parties scope calculator

AffectedPartiesPanel
├── Data categories: Email · Name · Payment token · Health record · IP address
├── Records estimate: 12,400 users (range 11,800–13,100) · Confidence: Medium
├── Geography breakdown: EU 4,200 · US-CA 1,800 · Other 6,400
├── Source: SIEM query + DB export · Linked artifacts: 3 in evidence locker
├── Actions: [ Recalculate ] [ Attach scope memo ] [ Mark scope finalized ]
└── Warning: Scope change after filing may require supplemental notice

Field	UI detail
Categories	Multi-select with sensitivity labels
Count range	Show min/max when exact count unknown; explain methodology tooltip
Geo map	Simple bar or table—not decorative map without data
Confidence	High / Medium / Low with required note when Low
Finalize gate	Legal must lock scope before regulator draft unlocks
Change log	Append-only revisions when new evidence shifts numbers

Pull artifact hashes from evidence locker so scope memo references immutable exports.

Disclosure template library

TemplateLibrary — Breach notifications
├── Filter: Jurisdiction · Channel · Language · Version
├── Card: GDPR supervisory authority initial report · v2026.1 · Last legal review: 2026-03-01
├── Card: Customer email — credential exposure · v2026.2 · EN + FR variants
├── Card: State AG notification letter · California · v2025.4
└── Card: Internal executive briefing · Not for external send

Template type	Required merge fields
Regulator filing	Incident ID, awareness date, categories, approximate count, measures taken
Customer email	What happened, data involved, what user should do, contact channel
Website notice	Plain language summary, effective date, support link
Press / status page	Optional; separate approval path from legal-only drafts
Internal memo	Timeline, open questions, do-not-disclose list

Templates use forms patterns for merge-field placeholders—{{awareness_date}} styled as tokens, not free text.

Version badge: “Legal approved through 2026-06-30”—expired templates show blocking banner.

Disclosure draft editor

DraftEditor — GDPR initial report · Draft v4
├── Left: Section outline — Nature of breach · Categories · Approximate numbers · Consequences · Measures · DPO contact
├── Center: Rich text with merge fields · Redaction mode for screenshots in appendix
├── Right: Approval panel — Legal: Pending · CISO: Approved · External counsel: Not requested
├── Footer: [ Save draft ] [ Compare versions ] [ Preview regulator PDF ] [ Submit for legal ]
└── Banner: External send disabled until Legal approval recorded

Feature	Why it matters
Section locking	Legal locks “numbers” section after scope finalized
Version diff	Side-by-side v3 vs v4 for counsel review
Merge preview	Render with live case data before export
Redaction toggle	Strip PII from appendix previews
Comment threads	Per-section legal notes—link multiplayer etiquette patterns
Export formats	PDF, secure portal upload, structured JSON for API filing

Never allow “Send test email” to real customer domains—sandbox only with visual watermark.

Approval and filing workflow

ApprovalWorkflow
├── Step 1: Scope finalized (Legal) ✓
├── Step 2: Draft complete (Privacy analyst) ✓
├── Step 3: Legal review (General Counsel) — In progress
├── Step 4: Executive notification (optional threshold) — Blocked
├── Step 5: Regulator filing / customer send — Blocked
└── Audit: Every approval logged with actor, timestamp, IP

Gate	Rule
Legal review	Required for all external disclosures
Dual control	Two approvers for >10k affected or health/financial data
Executive brief	Auto-trigger when Sev 1 + media risk flag
Filing proof	Upload confirmation ID or portal screenshot to case
Customer send	Staged rollout: internal test → segment → full
Rollback	Cannot unsend—only supplemental notice workflow

Integrate with audit log event types: disclosure.draft_saved, disclosure.approved, disclosure.filed.

Customer notification send console

SendConsole — Customer email · Credential exposure template
├── Audience: 12,400 users · Excluded: 340 (already notified, invalid email)
├── Channels: Email ✓ · In-app banner · SMS (opt-in only: 2,100)
├── Schedule: Send after filing confirmed · Staged: 5% test cohort first
├── Preview: [ Desktop ] [ Mobile ] [ Plain text ]
└── [ Run test cohort ] [ Schedule full send ] — disabled until filing step complete

Control	Handoff note
Suppression list	Users who opted out of marketing ≠ breach notice—legal copy explains mandatory notice
Localization	Per-locale template variant with fallback chain
Rate limiting	Show ESP throttle estimate
Delivery dashboard	Bounce, open (if allowed), support ticket spike link
Support macro	Link canned responses for support team in notification prefs

Pair with email verification flows if account recovery is part of remediation.

Regulator filing portal (structured submit)

RegulatorFilingForm — GDPR Article 33 initial notification
├── Section accordion: Controller details · DPO contact · Breach description · Data categories · Approximate subjects · Likely consequences · Measures taken
├── Validation: Required fields highlighted · Character limits per authority schema
├── Attachments: Scope memo PDF · Optional: sanitized timeline (max 5 MB)
├── Submit: [ Save draft to portal ] [ Submit final ] · 2FA re-auth required
└── Confirmation: Reference number field (manual or API) · Upload receipt to case

Use accordions for long forms; progress stepper for multi-page filings.

API filing success should write to compliance export job for retention.

Status page and public disclosure

PublicDisclosurePanel
├── Status page entry: "Investigating unauthorized access" · Yellow · Linked incident (internal ID hidden)
├── Publish: Requires Legal + Comms approval · Scheduled publish optional
├── Public URL preview · Auto-expire when incident closed
└── History: v1 published 2026-07-26 · v2 updated scope language 2026-07-28

State	Visible content
Investigating	Minimal facts; no speculative counts
Identified	Categories at high level; remediation steps
Resolved	Final summary; support contact
Archived	Read-only; redirect to trust center

Link inline alerts patterns for in-app banners matching status page copy.

Handoff checklist (Dev Mode)

Document for engineering:

Awareness timestamp — single source; who can edit (Legal only, with audit).
Deadline calculation — per-jurisdiction rules engine inputs and timezone.
Scope lock — API to freeze affected count and categories.
Template merge — field schema and null handling.
Approval state machine — transitions, dual-control thresholds, rollback limitations.
Filing receipt — required attachment types and retention period.
Send orchestration — cohort rules, suppression, localization fallback.
Audit events — full list for SIEM ingestion.

Common mistakes

Mistake	Why it hurts	Fix
Draft email sendable before legal review	Accidental disclosure, liability	Hard block external channels until approval
Single global deadline	Miss state-specific windows	Per-jurisdiction clocks with earliest-deadline banner
Exact count when unknown	Misleading regulators	Show range + confidence + methodology
Reusing marketing email UI	Missing mandatory legal elements	Separate breach template family
No filing proof uploaded	Audit gap	Require receipt before “Filed” status
Customer send before regulator	Jurisdiction-dependent violation	Configurable ordering rules per case type
Editable awareness date	Timeline fraud risk	Immutable after Legal confirmation
Public status page without approval	Reputation and legal exposure	Comms + Legal dual gate
Template version drift	Outdated legal language	Expiry dates and blocking banners
No supplemental notice path	Scope changes leave users uninformed	”Amend disclosure” workflow with new version

Recommended workflow

Design jurisdiction timeline tracker with awareness trigger, deadlines, and status per regulator.
Build affected parties calculator linked to evidence artifacts and scope finalization.
Create template library with merge fields, versions, and locale variants.
Implement draft editor with section locks, version diff, and approval panel.
Add filing and send consoles with dual control, staging, and proof upload.
Document state machine and audit events in Dev Mode.

FAQ

Breach notification vs compliance export?

Compliance export is bulk data for audits or legal hold; breach notification is time-bound external disclosure of a specific incident to regulators and affected individuals.

When to link forensic evidence locker?

Always for scope memos, hash-verified exports attached to filings, and custody proof if evidence is cited in regulator submissions.

Awareness date vs incident detection?

Awareness is when the organization knew (or should have known) reportability—Legal sets it; may differ from first SIEM alert. Show both in war room, use awareness for clocks.

Customer notice vs notification preferences?

Marketing opt-out does not block legally required breach notice—UI must explain why notice was sent and offer security-specific preference where allowed.

Post-filing updates?

Use supplemental disclosure workflow—new draft version, legal re-approval, linked to original filing reference number.

Next steps

Design forensic evidence management and chain of custody UI in Figma — scope memos and hash-verified attachments for filings
Design compliance exports and legal hold UI in Figma — retain filing packs and regulator correspondence
Design security operations shift handover and war room UI in Figma — trigger reportability and assign Legal owner
Design privacy settings and data management UI in Figma — data categories and subject rights context
Design post-incident review and root cause analysis UI in Figma — close the loop after disclosure completes

Designing breach notification and regulatory reporting UI in Figma: timelines, templates, and disclosure workflows