Case Study

Inline Alert

Solving Alert Fatigue in Security Software.

// AT A GLANCE

ROLE UI Designer · Component & Pattern Design · Design Systems

SCOPE 6 product areas, security operations platform — enterprise B2B

PROBLEM A single visual style covered all severity levels. Security engineers were dismissing critical alerts because everything looked the same — alert fatigue at the UI layer

Defined a 4-tier severity system (Critical / Warning / Info / Success) with distinct iconography, color tokens, and dismissal behavior — reducing misread rate in testing
Adopted platform-wide across all 6 product suites with zero rework — the component was system-ready from day one
WCAG AA contrast baked directly into semantic tokens — compliance became automatic, not a post-launch audit

Role

UI Designer, Platform Design

Timeline

2023

Status

Shipped

The Problem

Alert Fatigue.

No hierarchy: Banners vs. Inline vs. Toast messages were used interchangeably.

Color misuse: Red was used for "Critical Errors" but also for "Expired Trials" (which aren't critical to safe operation).

Heavyweight: The existing alert took up 80px of vertical space, pushing content below the fold.

The Solution

A multi-phase semantic structural repair.

Phase 1: Taxonomy & Logic

I shifted the focus from "What does it look like?" to "What is it doing?". I defined four specific alert levels:
1. Critical: Immediate action required to prevent data loss or security breach. (Red)
2. Warning: Potential issue; proceed with caution. (Orange)
3. Info: Contextual help; no action needed. (Blue/Grey)
4. Success: Confirmation of a user-initiated task. (Green)

Phase 2: Component Architecture

I rebuilt the component to be modular.
• Dismissibility: Optional (some legal alerts must stay visible).
• Actionability: Added support for primary/secondary buttons.
• Compact mode: Reduced the height to 48px for dense data tables.

Phase 3: Adoption & Tokenization

I mapped the alert colors to our new Semantic Tokens. This ensured that if the "Warning Orange" needed to be changed for accessibility (WCAG AA), it would update across all products simultaneously.

Reflection

"By re-establishing feedback hierarchy, it made the design system more predictable, accessible, and easier to scale."

The Inline Alert may be a small component, but it solved a large structural issue. It now serves as the bridge between banners and toasts, anchoring how communication patterns behave across the platform.