Updating Communication Logic & Security Feedback

Systematizing notifications and resolving semantic conflicts in a high-security product
Based on my work at LastPass. Visuals are reimagined to comply with NDA
Project highlights
Role
Senior Product Designer. Led the initiative from discovery to implementation hand-off. Defined the notification semantics and worked directly with engineering to translate them into production-ready components across Web and Desktop.
Core issue
Legacy banners caused layout instability, while rigid system rules downplayed the risk of destructive actions.
Key fix
Introduced a tiered notification system and redefined Design System semantics for "Danger" states.
Constraint
Worked without research support; handled discovery and validation independently.
Context
  • Fragmented communication
    The product had accumulated inconsistent patterns. Three main issues surfaced:
    1. High visual noise: Legacy full-width banners were an outdated pattern for frequent feedback. They consumed space and pushed content down, creating layout instability.
    2. Semantic rigidity: The Design System restricted the Error state (Red) to system failures only. This forced designers to use the low-urgency Warning (Yellow) style for destructive actions, failing to signal the irreversible risk of data loss.
    3. Business pressure: Premium and Feedback entry points had to be added without interrupting core security workflows.
  • My role
    I led the end-to-end design process. With the research team unavailable, I took ownership of the discovery phase, conducting competitor analysis and qualitative testing to validate decisions.
Approach
Phase 1: Defining component roles
  • Goal: Stop random usage and clarify system logic.
  • System Logic: I audited the interface and structured clear rules for communication:
    • Snackbars: For ephemeral feedback (e.g., "Copied") that shouldn't block the user.
    • Banners: Reserved for persistent status information (e.g., "System update") that requires awareness.
    • Modals: For decisions requiring explicit user input.
Phase 2: Refining the notification pattern
Goal: Eliminate layout shifts and improve visibility for the "Snackbar" role.

Investigation: Once we agreed to use Snackbars for frequent feedback, testing showed a problem: the default style was too subtle, and Top placement covered navigation.

Decision: I standardized Bottom-Center placement (to avoid overlaps) and initiated a Component Update: increasing contrast and adding entrance animation. This solved the "blindness" issue while keeping the interface stable.
Final implementation of the Bottom-Center Snackbar with increased contrast
Phase 3: Semantic logic (Error vs. Danger)
  • Goal: Ensure destructive actions look dangerous.
  • Investigation: The strict rule to use Warning (Yellow) for deletion felt wrong. I conducted an internal poll and an audit of industry-standard design systems. The data was irrefutable: users and designers alike perceived Yellow as "Caution," not "Stop."
  • Decision: I initiated a semantic shift. I redefined the "Error" token into a broader "Danger / Critical" category.
    • The Fix: This allowed us to legitimately use Red for irreversible user actions (like deleting an item), aligning visual urgency with the actual consequence.
    • Warning (Yellow): Remained reserved for non-critical advice.
    • Iconography: I established a new guideline to reduce cognitive load: icons are now reserved for Success, Warning, and Danger states to serve as visual anchors. Standard informational dialogs remain icon-free.
Danger Modal: Red icon and button clarify the irreversible action
Phase 4: Business & support integration
  • Goal: Integrate growth goals and user support without interrupting core workflows.
  • Investigation: Users needed quick access to help, while the business required a visible upgrade path. I benchmarked patterns in similar SaaS products to identify a placement that balances high discoverability with low intrusion.
  • Decision: I established the Header as a dedicated zone for secondary actions, placing the Premium CTA and a consolidated Help Menu (Feedback, What's New) side-by-side.
  • Rationale: This colocation separates "Growth & Support" from "Vault Management." It keeps the upgrade path visible and provides a direct channel for capturing negative sentiment internally, protecting the public brand rating while keeping the main interface distraction-free.
Impact
From opinions to standards
  • System consistency
    Validated and standardized the Bottom-Center pattern across the Consumer App and Admin Console.
  • Risk reduction
    The semantic shift to "Danger" (Red) visually prioritized irreversible actions, decreasing the probability of accidental data loss.
  • Developer efficiency
    Delivered clear component rules, reducing alignment time. These rules became the foundation for future communication components, reducing design debt and accelerating delivery for adjacent teams.
Spark
  • Documentation as a product
    Although outside the initial brief, I took the initiative to consolidate research notes, design rationale, and system rules into a unified "Master Doc."
    This artifact became a long-term reference for the client team, preserving the reasoning behind each decision and ensuring the system logic stayed intact after hand-off.
More projects
Back to main page
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website
How to remove this block? About platform Submit a complaint