Breach FAQ and Notice Landing Page UI in Figma

Quick answer

Breach FAQ and notice landing page UI gives affected individuals a stable, plain-language place to read what happened—without exposing investigation detail or other victims’ data. Design a versioned notice page (linked from email, SMS, and in-app notices), a structured FAQ block library with locale variants, search and anchor navigation, and publish workflow tied to individual notification campaigns. Connect to status page, remediation offers, regulatory archive, and trust center. Start from the Figma guides hub and pair with Dev Mode handoff.

Who this is for

Product designers building post-breach self-service surfaces that legal and comms can update without redeploying the whole app.
Privacy and comms teams who need one canonical FAQ version stamped to each notification campaign.
Support and engineering leads who want searchable answers before call volume spikes.

Notice landing page shell

NoticeLandingPage — Incident VIN-992 · Version NL-992-v3 · Published 2026-08-26 09:15 UTC
├── Header: Company logo · Incident reference (public-safe) · Last updated stamp
├── Hero summary (plain language):
│   ├── What happened — 2–3 sentences, no jargon
│   ├── What data may be involved — categories only, not field names from forensic logs
│   ├── What we are doing — mitigation steps customers can understand
│   └── What you should do — password reset, monitoring enrollment, watch for phishing
├── Primary CTAs:
│   ├── [ Check if you were affected ] → eligibility flow (no PII in URL params)
│   ├── [ Enroll in credit monitoring ] → [remediation offers](/designing-breach-remediation-offers-and-credit-monitoring-enrollment-ui-in-figma/)
│   └── [ Contact support ] → ticket form with incident tag pre-filled
├── FAQ section (structured blocks below)
├── Related links:
│   ├── [Status page](/designing-customer-incident-status-page-and-communication-ui-in-figma/) — service impact only
│   └── [Trust center](/designing-trust-center-and-security-documentation-ui-in-figma/) — evergreen policies, not incident-specific
├── Footer: Privacy contact · Regulatory references if required · PDF download (accessible)
└── Locale switcher: EN · DE · FR · ES (linked component variants)

Element	Purpose
Version stamp	Proves which text individuals saw when they clicked from IND-* email
Category-level data description	”Email addresses and hashed passwords” not “column user_email from shard 4”
No login wall	Art. 34 notices must be reachable without account access
PDF export	Accessibility and users who prefer offline reading

Verdict: The landing page is the canonical public text for individuals—email and SMS should link here, not duplicate paragraphs that drift out of sync.

FAQ block library and versioning

FaqBlockLibrary — Incident VIN-992 · Draft v3 · Pending legal + comms
├── Required blocks (regulatory-aligned):
│   ├── What happened?
│   ├── What information was involved?
│   ├── What are you doing about it?
│   ├── What can I do to protect myself?
│   ├── How will you notify me in the future?
│   └── Who can I contact with questions?
├── Optional blocks (toggle per incident):
│   ├── Was my password exposed? → Link to reset flow
│   ├── Is financial data affected? → Only if true; hide block if N/A
│   ├── Free credit monitoring → CTA to [enrollment UI](/designing-breach-remediation-offers-and-credit-monitoring-enrollment-ui-in-figma/)
│   ├── Phishing warning → Sample fake email red flags
│   └── State-specific addendum (CA, NY) → Jurisdiction component variant
├── Version history:
│   ├── v1 — Initial publish with IND-441 send
│   ├── v2 — Clarified "no payment card numbers" after forensic confirmation
│   └── v3 — Added DE/FR locales · Current live
├── Approval: Legal ✓ · Comms ✓ · DPO ✓ · Publish locks v3 to NL-992-v3
└── Link: Template snapshot from [individual notification](/designing-affected-individual-breach-notification-and-communication-ui-in-figma/) IND-441

Design FAQ as reusable components with show/hide boolean properties per block—legal can disable “financial data” until confirmed true.

FaqNavigation — NL-992-v3 · Mobile + desktop variants
├── Sticky table of contents (desktop): Jump links to each FAQ block
├── Accordion pattern (mobile): One question open at a time · Expand/collapse all
├── Search bar:
│   ├── Placeholder: "Search this notice (e.g. password, monitoring)"
│   ├── Results highlight within page · No external site search
│   └── Empty state: "Try 'password reset' or 'monitoring'"
├── Reading aids:
│   ├── Plain language badge · Estimated read time
│   ├── Glossary tooltips: "Hashed password" · "Phishing"
│   └── High contrast mode toggle
├── Accessibility checklist:
│   ├── WCAG AA contrast on alert banners
│   ├── Focus order matches visual order
│   ├── Accordion aria-expanded states
│   └── PDF tagged for screen readers
└── Analytics (privacy-preserving): Page views · FAQ expand events · CTA clicks · No individual tracking

Pattern	Best for	Skip when
Accordion FAQ	Mobile-first breach notices	Legal requires all text visible for audit screenshot
Anchor TOC	Long notices with 10+ blocks	Very short incidents with 4 blocks only
In-page search	High traffic after mass email	Low-affected-count incidents under 500 people

Pair with privacy-preserving analytics controls—do not fingerprint visitors on a breach notice URL.

Publish workflow and campaign linkage

NoticePublishWorkflow — VIN-992 · NL-992-v3 ready · Linked campaigns: IND-441, IND-442
├── Pre-publish gates:
│   ├── ☐ Legal approved plain-language summary
│   ├── ☐ Comms approved FAQ blocks and locales
│   ├── ☐ Engineering: URL live at /notice/vin-992 (no auth)
│   ├── ☐ Short link configured for SMS (301 to canonical URL)
│   └── ☐ Status page cross-link reviewed (no contradiction)
├── Publish actions:
│   ├── Set live · Invalidate CDN cache · Stamp NL-992-v3
│   ├── Notify [individual notification](/designing-affected-individual-breach-notification-and-communication-ui-in-figma/) to use v3 links
│   └── Export snapshot to [regulatory archive](/designing-regulatory-authority-correspondence-and-breach-filing-archive-ui-in-figma/) FIL-882 bundle
├── Update path (post-publish):
│   ├── Minor typo → v3.1 with changelog row
│   ├── Material fact change → v4 · Requires legal re-approval · Optional re-notify workflow
│   └── Retire page → Redirect to [trust center](/designing-trust-center-and-security-documentation-ui-in-figma/) after 24 months
└── Audit: published_by · published_at · diff from v2 → v3

Verdict: Treat FAQ updates like regulated content releases—version, approve, and archive, not a CMS quick edit during an active investigation.

Comparison: notice landing page vs adjacent surfaces

Surface	Focus	This UI adds
Individual notification	Email/SMS/in-app delivery	Stable URL with full FAQ depth
Status page	Service uptime and incident timeline	Data-breach-specific Q&A, not component status
Trust center	Evergreen security posture	Incident-scoped notice with expiry
Remediation offers	Enrollment flows	FAQ explains why monitoring is offered
Call center scripts	Agent-guided answers	FAQ is source of truth agents read from

Handoff checklist (Dev Mode)

NoticeLandingPage — incident_id, version_id (NL-*), locale, hero_summary, published_at, retired_at, canonical_url.
FaqBlock — block_id, question, answer_richtext, jurisdiction, required, sort_order, locale.
NoticeVersion — version_id, incident_id, changelog, approval_chain[], snapshot_html_hash, linked_campaign_ids[].
NoticeCta — cta_type (eligibility, monitoring, support), label, destination_url, analytics_event_name.
LocaleVariant — parent_version_id, locale, translated_blocks[], fallback_locale.
Accessibility — Heading hierarchy h1 → h2 → h3; accordion keyboard support; PDF generation endpoint.

Common mistakes

Mistake	Why it hurts	Fix
FAQ duplicates email copy without versioning	Drift between channels	Single canonical URL; email links out
Forensic detail in FAQ	Helps attackers; re-traumatizes users	Category-level descriptions only
Login required to read notice	Blocks Art. 34 access	Public URL with optional signed eligibility check
Status page contradicts notice	Erodes trust	Single editorial owner; cross-review before publish
No locale variants for EU segment	Language compliance gap	Linked components per individual notification segment
Search sends queries to third-party analytics	Privacy violation on breach page	On-page search index only
Retire notice without redirect	Broken links in old emails	Redirect to trust center or archived PDF
Agents invent answers not in FAQ	Inconsistent guidance	Link to call center script UI synced to FAQ version

Recommended workflow

Draft hero summary and required FAQ blocks after privacy triage confirms high-risk individual notification.
Run legal and comms approval on plain-language copy; enable jurisdiction-specific blocks only when confirmed.
Publish notice landing page before or simultaneous with individual notification IND-* send.
Link remediation CTAs when credit monitoring offer is approved.
Export version snapshot to regulatory archive and sync call center scripts.
Monitor analytics aggregates and expand FAQ blocks based on support ticket themes—not individual browsing data.

FAQ

Should the notice page replace the status page?

No. Status page covers service availability; notice landing page covers personal data impact. Cross-link both; do not merge into one page.

How long should a notice page stay live?

Design for 12–24 months minimum, then redirect to an archived PDF on the trust center. Jurisdiction may require longer retention of what was published, not necessarily a live URL.

Can we personalize the FAQ per user?

Carefully. Show eligibility-specific CTAs after a signed token check—do not put names or account details in the public URL.

What if facts change after publish?

Create v4 with changelog, re-run legal approval, and trigger supplemental notification if the change is material (new data category affected).

PDF vs HTML notice?

Offer both. HTML for accessibility and updates; PDF snapshot for users who want a downloadable record tied to NL-* version.

Next steps

Design breach call center and agent script UI in Figma — sync agent answers to FAQ version
Design affected individual breach notification and communication UI in Figma — link IND-* campaigns to notice URL
Design breach remediation offers and credit monitoring enrollment UI in Figma — CTA from notice landing page
Design customer incident status page and communication UI in Figma — separate service impact narrative
Design regulatory authority correspondence and breach filing archive UI in Figma — archive NL-* snapshots with FIL-* threads

Designing breach FAQ and notice landing page UI in Figma: versioned answers, search, and plain-language handoff