WIREFRAME

PROTOTYPE

FINAL DESIGN

PAPER WIREFRAMES

Before opening any design tool, I sketched the core flows on paper — exploring navigation structure, information hierarchy, and how credential details would be surfaced across mobile and web contexts.

LOW-FIDELITY WIREFRAMES

After validating structure on paper, I built grayscale lo-fi screens — viewing a saved credential and creating a new one — starting on mobile, then mirroring the layout on web.

Credential fields displayed at a glance

ITEM DETAIL

Type selection followed by contextual fields

CREATE ITEM

Password generation surfaced inline during creation

GENERATOR

The same flows carried to a three-panel desktop layout

WEB VIEW

WEB SCREENS

Lets users narrow receipts by status, date, amount, and paid state.

FILTER

WIREFRAME

PROTOTYPE

FINAL DESIGN

PAPER WIREFRAMES

Before opening any design tool, I sketched the core flows on paper — exploring navigation structure, information hierarchy, and how credential details would be surfaced across mobile and web contexts.

LOW-FIDELITY WIREFRAMES

After validating structure on paper, I built grayscale lo-fi screens — viewing a saved credential and creating a new one — starting on mobile, then mirroring the layout on web.

Credential fields displayed at a glance

ITEM DETAIL

Type selection followed by contextual fields

CREATE ITEM

Password generation surfaced inline during creation

GENERATOR

The same flows carried to a three-panel desktop layout

WEB VIEW

WEB SCREENS

Lets users narrow receipts by status, date, amount, and paid state.

FILTER

VaulTea

VaulTea

The interface for an open-source, self-hosted password manager, and a redesign built with strong security & simple to use.

An open-source, self-hosted password manager tool, designed simple to use.

TIMELINE

2021

PLATFORM

Web

Mobile

UX/UI DESIGN

BACKGROUND

Making "tech savvy tools" feel approachable.

VaulTea is for people who want real control over their credentials: open-source, self-hosted, and transparent.


The security was strong, but the experience needed to become approachable for everyday use.


I designed the core interface and led the experience across web and mobile so that protecting your logins never feels like work.

DESIGN PILLARS

Problems to solve.

Problems to solve.

👋

Guided onboarding

A short setup path that shows value before asking for trust.

🎯

Faster Searches

A dashboard built around finding credentials quickly.

✨

Visible generator

Strong password creation made visible and adjustable.

💬

Plain-language security

Each warning pairs with a clear, single next action.

🤝

Transparent sharing

Who can view, edit, or use an item, shown before you send.

✅

Recovery confidence

Recovery designed as a guided step, not a hidden setting.

TESTING & CHANGES

What changed after testing.

What changed after testing.

✓

Dashboard felt organized — testers missed widget hierarchy cues.

✓

The dedicated generator worked — clear options and room to customize.

—

Security labels caused concerns — without a next step felt alarming.


—

Filters improved — icon-only labels slowed recognition.

VAULT

Sidebars for one-page

Fixed: Cluttered nav and hard-to-find items.

GENERATOR

Dedicated action button

Dedicated action button

Fixed: controls hidden inside the password field.

SECURITY

Plain-language alerts

Plain-language alerts

Fixed: Each warning now carries a next action.

SHARING

Clear permissions

Clear permissions

Fixed: view / edit / use shown before you send.

MY ROLE

Designing the vault experience from flow to interface.

Designing the password management experience from flow to interface.

DASHBOARD

PASSWORD GENERATOR

USER FLOWS

WEB DESIGN

USABILITY TESTING

  • My role was to design the core UX/UI for VaulTea, including onboarding, vault organization, credential entry, password generation, and dashboard structure.

  • I focused on making security actions feel clear and low-friction, so users could understand what they were doing and why it mattered.


RESEARCH

Understanding the friction.

Understanding the friction.

TOOL

1Password

LastPass

Bitwarden

KeePass

NordPass

VaulTea

FREE

—

✓

✓

✓

✓

✓

AUTOFILL

—

—

✓

—

✓

✓

SELF-HOST

—

—

✓

✓

—

✓

PASSKEY

—

—

✓

✓

✓

✓

SHARING

✓

✓

✓

—

✓

✓

IMPORT

✓

✓

✓

✓

✓

✓

Full Research Data

← Back to Work