VaulTea

UX/UI Design | 2021

Overview

VaulTea is an open-source password manager focused on simplifying how users store and access their credentials aka passwords. Designed with security and usability in mind, it offers essential features like a secure password vault, cross-platform support, and auto-fill integration. The project prioritizes an intuitive user experience to make managing passwords straightforward and accessible.

Goal

The primary goal of VaulTea was to create a secure and user-friendly password manager that simplifies password management for individuals across devices. The project focused on enhancing security through robust encryption, multi-factor authentication, and password strength tools while maintaining a seamless user experience. By prioritizing accessibility, intuitive onboarding, and features like auto-fill integration and secure sharing, VaulTea aims to empower users to manage their credentials effectively and adopt stronger digital security practices.

Research

Competitors

How do users feel about their current password management methods?

What features do they find most useful in a password manager?

What are the common pain points in managing passwords?

VaulTea operates in a competitive space alongside well-known password managers like LastPass, 1Password, and Dashlane, which focus on usability and premium features. Open-source alternatives such as Bitwarden and KeePass appeal to privacy-conscious users with customizable and transparent solutions. Other competitors like NordPass and RoboForm emphasize security and convenience, offering features such as biometric authentication and advanced form-filling capabilities. These tools shape the landscape for password management, highlighting areas where VaulTea differentiates itself through its open-source approach and user-centric design.

Approach

Understanding user feedback for password managers involves leveraging various sources. App stores like Google Play and Apple App Store provide reviews and ratings from real users, while platforms such as G2, Trustpilot, and Capterra offer detailed evaluations. Community spaces like Reddit and GitHub reveal discussions and feature requests, especially for open-source tools. Social media platforms like Twitter capture candid user experiences, while tech blogs and comparison sites provide expert reviews. These insights collectively inform user needs, pain points, and opportunities for improvement.

Security

  • Client-Side Encryption

  • Multi-Factor Authentication (MFA)

  • Secure Sharing

Usability

  • Intuitive Interface

  • Onboarding Process

  • Customizable Experience

  • Backup and Recovery

Flexibility and Customization

  • Custom Fields

  • Custom Notes and Attachments

  • Sharing and collaboration: Provide secure options for sharing pw/doc

Multi-Platform Support

  • Cross-Device Sync

  • Auto-Fill Integration

  • Offline mode

Design

The design process for VaulTea began with thorough research to understand user needs and the competitive landscape. Key pain points identified included overly complex interfaces, inconsistent cross-platform experiences, and a lack of clarity during onboarding in other password managers. These insights shaped the foundation of VaulTea's design.

In the initial stages, user flows were mapped to ensure a smooth journey, particularly for onboarding, password storage, and auto-fill integration. Wireframes were created to visualize core features, and prototypes were iteratively refined through user testing. A mobile-first approach was adopted to prioritize accessibility, ensuring that the design worked seamlessly on smaller screens before transitioning to desktop layouts.

Building the App

CJM & User Flow

Onboarding: New users are guided through account creation or vault import, encryption key setup, and a brief tutorial on using VaulTea's features. This ensures a smooth start and familiarity with the app.

Adding Passwords: Users can easily store credentials by filling in key details, using the password generator, and organizing entries into categories for better management.

Auto-Fill Integration: Once enabled, VaulTea seamlessly fills in login credentials on websites and apps, offering to save new ones when detected.

Password Generator: Users can create strong, customizable passwords with options for length and character types, saving them directly to the vault.

Secure Sharing: Passwords can be securely shared with trusted contacts via encrypted links or email, ensuring privacy and control over access.

Backup and Recovery: Encrypted backups allow users to safeguard their vault, with an easy recovery process that maintains security and data integrity.

VaulTea’s user journey focuses on creating a secure and seamless experience for managing passwords. After onboarding, users progress through five key phases: setting up and exploring the app, adding credentials, organizing their vault, using stored passwords with auto-fill, and managing their vault with backups and reviews. Each phase addresses user goals, such as ensuring security, simplifying management, and building long-term trust, while opportunities like guided tutorials, intelligent sorting, and automated reminders enhance usability and engagement.

Web App

A&B Testing

Test 1: Dashboard

Key Focus Areas

  • Organization: How effectively users could categorize and retrieve stored items

  • Navigation: The ease and speed of accessing specific items

  • Visual Simplicity: How clean and intuitive the dashboard appeared

We compared two different folder system designs:

  1. Design A: Folders and items shown separately

  2. Design B: Only items shown (flat structure)

Results

  • Design A allowed users to organize items better but introduced extra navigation steps, which some found cumbersome

  • Design B provided quicker access to items and a cleaner layout but lacked the structure needed for managing large datasets effectively

Test 2: Password generator

Key Focus Areas

  • Ease of Use: How intuitively users could identify and interact with the generator.

  • Efficiency: The number of steps required to generate and save a password.

  • Visual Clarity: How clearly the designs indicated the feature’s purpose and functionality.

We compared two different Password generator designs:

  1. Design A: Inset in the Password input of the form

  2. Design B: Action button on the side

Results

  • Design A was appreciated for its compactness and streamlined workflow but posed challenges for users who wanted to customize passwords

  • Design B was favored for offering clear options and a dedicated space for customization, making it easier to generate complex passwords

Analysis of Results

  1. User Preference: The clear preference for Design B suggests that users value simplicity and immediate access to their items over traditional hierarchical structures.

  2. Cognitive Load: The preference for Design B may indicate that it reduces cognitive load by eliminating the need to navigate through multiple levels of folders.

  3. Efficiency: Users likely found it faster and easier to locate items in a flat structure, especially if supported by efficient search and filter functions.

  4. Modern User Expectations: The results align with trends in modern UI design, where flat structures and powerful search capabilities are becoming more common (e.g., in email clients and file storage systems).

  5. Potential Limitations: While Design B was preferred, it's important to consider if this holds true for all types of users and all sizes of item collections.

Considerations

  1. Simplify Navigation: Prioritize designs that allow users to access their items with minimal clicks or taps.

  2. Enhance Search and Filter: With a flat structure, robust search and filter capabilities become crucial. Invest in developing these features to help users quickly find what they need.

  3. Visual Organization: Explore alternative ways to visually organize items without using traditional folders. This could include tags, color coding, or smart collections.

  4. Customization Options: Consider offering customization options that allow users to switch between flat and hierarchical views, catering to different preferences and use cases.

  5. Onboarding and Transition: For users accustomed to folder structures, provide clear onboarding to help them adapt to the new flat structure and understand its benefits.

  6. Scalability: Ensure the design can scale effectively for users with large numbers of items. This might involve infinite scrolling, virtualization, or other performance optimizations.

  7. Context Preservation: Develop features that help users understand and maintain the context of their items without explicit folder structures. This could include breadcrumbs, related items suggestions, or smart grouping.