Vault

Password Manager — UI Design & Interaction System

← Back to portfolio

Overview

Vault is a reimagined password manager built around the idea that security shouldn't feel like a chore. The brief was simple: design a zero-clutter dashboard that makes credential management feel calm, confident, and almost invisible. Every screen was prototyped from wireframe through lo-fi to hi-fi, with a focus on micro-interactions, biometric flows, and visual security feedback.

Design Process

The project moved through three fidelity stages. Wireframes established the information architecture and core navigation patterns. Lo-fi screens introduced layout structure, spacing, and basic component placement. Hi-fi screens applied the full visual system — typography, color, iconography, and motion — resulting in a polished, shippable interface.

Design Screens

Wireframe — Dashboard Overview
🔑
Wireframe — Login Flow
📋
Wireframe — Credential List
✏️
Wireframe — Add Entry Form
🔐
Wireframe — Security Health Report
🔍
Wireframe — Search & Filter
👤
Wireframe — Profile & Settings
🔔
Wireframe — Notifications Panel
🔄
Wireframe — Password Generator
📊
Wireframe — Usage Analytics
Lo-Fi — Dashboard Overview
Lo-Fi — Login with Biometric
Lo-Fi — Credential Cards
Lo-Fi — Add Entry (Expanded Form)
Lo-Fi — Security Score Gauge
Lo-Fi — Search Results
Lo-Fi — Settings Panel
Lo-Fi — Notification Preferences
Lo-Fi — Password Generator Modal
Lo-Fi — Activity Timeline
Hi-Fi — Dashboard (Dark Mode)
Hi-Fi — Biometric Unlock Screen
Hi-Fi — Credential Detail View
Hi-Fi — Add Entry (Full UI)
Hi-Fi — Security Health Dashboard
Hi-Fi — Search with Autocomplete
Hi-Fi — Settings & Vault Preferences
Hi-Fi — Notification Center
Hi-Fi — Password Generator (Dark)
Hi-Fi — Vault Export & Backup

Key Interactions

The Vault interface relies on three core micro-interactions: a biometric unlock that transitions from blurred to sharp on authentication, credential peek (tap-and-hold to reveal a password, with a subtle haptic-like scale animation), and a security pulse — a gentle glow on the dashboard that shifts from amber to green as the user's overall security score improves. These small moments make the app feel responsive and trustworthy without adding visual noise.

Outcome

The Vault design was developed as a comprehensive UI system ready for engineering handoff. The component library includes 40+ screens across three fidelity levels, a dark-first color system with accessible contrast ratios, and a motion spec document covering all micro-interaction timing curves. The project demonstrated how a security-first product can feel warm, calm, and even delightful.