figma guide
Designing security awareness training and phishing simulation UI in Figma: campaigns, reporting, and handoff
Design security awareness training and phishing simulation UI in Figma with campaign builder, simulated phish templates, completion tracking, and Dev Mode specs for enterprise Security admin.
- Published
- Updated
- Jul 20, 2026
- Read time
- 7 min
- Level
- Intermediate
Quick answer
Security awareness training UI helps Security teams assign modules, run phishing simulations, and prove completion before audits—not just send a yearly PDF link. Design a training catalog with required vs optional courses; campaign builder for scheduled phishing tests; member progress dashboard with completion % and overdue; simulation results with click/report rates by department; and policy linkage when training gates access after policy acceptance. Start from the Figma guides hub and pair with security posture, audit log, team roles, suspicious login alerts, and Dev Mode handoff.
Who this is for
- Product designers building training catalogs, phishing campaign wizards, and completion dashboards for enterprise Security admin consoles.
- Design system teams aligning completion badges with badges, progress indicators, and tables.
- Engineers implementing campaign scheduling, simulated email delivery, click tracking, and mandatory training gates on login.
Training catalog layout
| Column | Content |
|---|---|
| Course | Phishing basics, Password hygiene, Data handling |
| Type | Video · Interactive · Quiz · Policy read-through |
| Audience | All members / Admins / Contractors |
| Required | Yes / Optional |
| Duration | 12 min · 5 questions |
| Completion rate | 87% org-wide |
TrainingCatalog
├── Header: Security training · [ New course ] [ Assign campaign ] [ Export report ]
├── Summary: 3 required courses · 13% overdue · Next phish sim: Aug 1
├── Filters: Required · Audience · Overdue · Department
└── Row: Phishing awareness 2026 · Required · All members · 87% completeVerdict: separate catalog (what exists) from campaigns (who must finish by when)—admins assign deadlines; members see a personal queue, not the full library.
Member training queue (end-user view)
Members need a simple queue—not the admin catalog:
MemberTrainingQueue
├── Header: Your security training · 2 of 3 complete
├── Required: ☑ Password hygiene · ☑ Data handling · ☐ Phishing 2026 (due Aug 15)
├── Optional: [ Advanced social engineering ] [ Mobile device security ]
└── Banner: Complete required training to retain admin console access| State | UI treatment |
|---|---|
| Not started | Empty progress ring, “Start” CTA |
| In progress | Resume at last module, % complete |
| Complete | Green check, completion date |
| Overdue | Amber/red badge, login gate copy |
| Expired | Annual refresh required—restart course |
Use progress steppers for multi-module courses; empty states when no assignments yet.
Link overdue training to security posture gaps—“Training completion below 90%” is a measurable control.
Campaign builder (admin)
CampaignBuilder
├── Step 1: Select courses · Phishing 2026 + Data handling refresh
├── Step 2: Audience · All members · Exclude: Contractors without email
├── Step 3: Deadline · Complete by 2026-08-31 · Reminders at 14d, 7d, 1d
├── Step 4: Enforcement · Gate admin console until complete
└── [ Launch campaign ] [ Save draft ]| Setting | Purpose |
|---|---|
| Audience filter | Department, role, team role group |
| Deadline | Hard due date with reminder cadence |
| Enforcement | Soft nudge vs login block vs session timeout redirect |
| Recurrence | Annual auto-reassign on policy version bump |
Preview impact: “842 members assigned · 118 currently overdue on prior campaign.”
Phishing simulation campaign UI
Phishing sims are not the same as training courses—separate tab, separate metrics:
PhishingSimCampaign
├── Header: Q3 credential harvest test · Scheduled Aug 1 09:00 UTC
├── Template: "IT password reset required" · From: it-support@…
├── Audience: All members except Security team
├── Landing: Safe education page (not real credential capture)
└── Metrics (post-send): Sent 842 · Opened 612 · Clicked 47 · Reported 89| Metric | Admin sees | Member sees |
|---|---|---|
| Click rate | % by department, repeat clickers | Education page only if clicked |
| Report rate | Who used “Report phish” button | Positive reinforcement copy |
| Repeat offenders | 3+ clicks in 12 months | Auto-assigned remedial training |
| Time to report | Median minutes from delivery | N/A |
Template library for admins:
| Template type | Best for |
|---|---|
| Credential harvest | Password reset, SSO expiry |
| Attachment lure | Invoice PDF, shared doc |
| Executive impersonation | CEO wire transfer (high sensitivity—legal review) |
| Vendor spoof | Links to vendor risk themed domains |
Design report phish button mockups that match real email client UX—training only works if reporting is easier than clicking through.
Simulation results dashboard
PhishResultsDashboard
├── Campaign: Q3 credential harvest · Completed Aug 1–7
├── Org click rate: 5.6% (↓ from 8.1% Q1)
├── Chart: Click rate by department · Report rate trend
├── Repeat clickers: 12 members · Auto-enrolled remedial
└── Actions: [ Export for audit ] [ Schedule follow-up training ] [ Clone campaign ]| Row type | Columns |
|---|---|
| Department summary | Dept · Sent · Click % · Report % · vs prior quarter |
| Individual (admin only) | Member · Clicked? · Reported? · Remedial status |
| Benchmark | Industry avg · Your org · Target |
Privacy note in UI copy: individual click data visible to Security Admin only—not managers by default (reduces shame-driven under-reporting).
Wire high click rates to incident runbook only when sim accidentally uses live credentials domain—otherwise keep sims in training context.
Integration with policy and posture
| Integration | Behavior |
|---|---|
| Policy acceptance | New AUP version triggers required “What’s changed” micro-course |
| Posture dashboard | Training completion % as control; overdue blocks green score |
| Audit log | Log campaign launch, completion, sim clicks (admin view) |
| Compliance export | Training completion roster with timestamps for SOC2 |
| Offboarding | Cancel pending sims and training for departed members |
PostureGapCard — Security awareness
├── Training completion: 87% (target 95%) · 118 overdue
├── Last phish sim click rate: 5.6% · 12 repeat clickers
└── [ View training queue ] [ Schedule remedial campaign ]Comparison: training course vs phishing sim vs policy acceptance
| Surface | Question answered |
|---|---|
| Training course | ”Did the member learn the material?” |
| Phishing simulation | ”Will they fall for a real phish?” |
| Policy acceptance | ”Did they agree to rules?” |
All three may gate login—but show one combined checklist to members, not three separate nag screens. Admin console keeps them separate for reporting.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| Training buried in settings | Nobody completes | Login gate + personal queue |
| Phish sim captures real passwords | Legal and trust disaster | Safe landing page only |
| Manager sees who clicked | Under-reporting, HR issues | Admin-only individual metrics |
| No remedial path for repeat clickers | Same people fail every quarter | Auto-assign short course |
| Catalog equals member view | Overwhelming list | Filtered queue by assignment |
| Sim looks nothing like real threats | False confidence | Template library with realistic lures |
| No link to posture dashboard | Training invisible to exec reporting | Completion as control metric |
| Annual-only campaigns | Stale skills | Quarterly micro-modules + sims |
| Same deadline for 800 people | Support ticket spike | Staggered reminders, rolling deadline by hire date |
| Export missing timestamps | Audit failure | Compliance export with completion proof |
Recommended workflow
- Design training catalog with required flag, audience, and completion rates.
- Build member queue with progress states and overdue treatment.
- Create campaign builder with audience, deadline, and enforcement options.
- Add phishing sim wizard with template library and safe landing page.
- Build results dashboard with department aggregates and repeat-clicker remedial flow.
- Wire completion gaps to security posture controls.
- Annotate gates, reminders, and audit events in Dev Mode.
FAQ
Block login until training complete?
Configurable—hard gate for admin roles; soft banner for general members unless policy requires otherwise.
Phishing sim on contractors?
Optional audience filter—contractors with email access included; exclude groups without corporate email.
Integrate with LMS (KnowBe4, etc.)?
External LMS link on course row or SSO embed—track completion via webhook; show status in same dashboard.
Tie to suspicious login alerts?
Optional remedial trigger—real phish report from member can skip next sim; real compromise triggers training assign.
Annual training vs continuous?
Both—annual required modules plus quarterly 5-min updates when policy or threat landscape changes.
Next steps
- Design security policy management and acceptance UI in Figma — policy version triggers training
- Design security posture dashboard and compliance checklist UI in Figma — completion as control metric
- Design suspicious login alerts and account recovery UI in Figma — real incident vs sim distinction
- Design compliance exports and legal hold UI in Figma — training roster for auditors
- Design team member roles and permissions UI in Figma — audience scoping for campaigns
§ Keep reading