MEGA Pass - Password Manager
Adding Credit Card Storage
Extending MEGA Pass beyond just passwords, and building an IA flexible enough to grow with it.
Overview
Role
Lead designer (1 of 1)
Responsibilities
End-to-end UX and UI
Collaborators
Product Manager, BA, Developers, QA testers
Key themes
MVP product expansion
Navigation update
Cross platform
Following the MVP launch of MEGA Pass, users responded positively to the core password management experience, particularly around autofill. As usage grew, expectations expanded, with many users beginning to view the product as a broader tool for managing sensitive information.
Requests for features like credit card storage, secure notes, and sharing reflected this shift. While this aligned with earlier MVP research, post-launch behaviour made it clear that the product needed to evolve beyond its initial scope.
Problem
The Problem
“ ...i love the new password manager however i wish there was more options to like save notes & credit card information... ”
USER FEEDBACK
The demand was clear. But the team had reduced in size post-MVP, making a broad feature expansion unfeasible. Delivering well on one thing was more valuable than delivering poorly on everything.
Rather than spreading thin, we focused on reinforcing what MEGA Pass already did well: fast, seamless autofill. The goal was to extend that value into a new context, not introduce disconnected features.
The Approach
Credit card storage was the strongest opportunity. It extended autofill into high-frequency checkout scenarios, matched strong user expectations, and mapped directly onto existing product patterns. At the same time, we knew the IA would need to evolve - not just for credit cards, but to support future data types without requiring a redesign each time.
Design Process
Exploration & validation
Credit card storage is a well-established pattern across native solutions and third-party password managers. The design challenge wasn't to reinvent the interaction - it was to make it feel native to MEGA Pass's existing structure and autofill behaviour, while solving a key problem: card network recognition.
Displaying network icons helps users quickly identify the right card in a list - critical for reducing friction at the moment of autofill. Thus it was important to make this experience as seamless as possible.
LIMITED SCOPE = LIMITED CARD NETWORKS
Due to the reduced team size we made a decision to target MEGAs five key markets (USA, UK, India, Mexico, Brazil) and focus on the major card networks in those areas, as well as the top global card networks. This narrowed the scope to nine providers: Amex, Discover, Elo, JCB, Maestro, Mastercard, RuPay, UnionPay, and Visa.
Image: Mobile concept flow for adding credit cards
Initial assumption
We initially assumed automatic network detection could cause conflicts, particularly in regions where card number ranges overlap, such as JCB and RuPay both using cards beginning with 35, or UnionPay and Discover both using 62. To mitigate this, I introduced a manual selection step. It worked, but it added an extra step to the form, which risked frustrating users on what should be a fast, lightweight interaction.
Validating assumptions
Working closely with developers (who were also implementing credit cards for the first time) we ran a series of investigations with the API team. We reviewed card network databases and number ranges in detail.
The finding: there was no overlap, and no risk of misidentification. The manual selection step was solving a problem that didn't exist in practice. Removing it simplified the flow, reduced unnecessary input, and kept the experience true to MEGA Pass's core principle of effortless autofill.
Final Designs
Final Designs
The final card experience was designed to feel continuous with the existing password flow - reusing the same components and interaction patterns so users don't need to relearn anything.
As users enter their card number, the network is detected and displayed automatically. In the detail view, card numbers are masked by default, mirroring how passwords are handled and aligning with expectations around security.
Image: Mobile full password generator user flow
Video: Web saving credit card credentials, and showcasing the auto-detected card network icon
From vault to checkout - autofilling credit cards
A deliberate decision was made not to autofill the CVV. I made the case to the product team that since MEGA's user base highly values privacy and security, as shown in the MVP survey, leaving CVV as a manual entry adds a small but meaningful layer of protection, reflecting the values of a product built around privacy and security.
Video: Android credit card autofill
Video: Extension credit card autofill
Navigation updates
Updating the Navigation IA
Adding credit cards exposed a structural limitation. MEGA Pass had been built around a single data type — login credentials. With credit cards and OTP codes entering the product, the existing navigation no longer clearly communicated what was stored or how to access different types of data.
We introduced a dedicated "Items" page - a unified, filterable view across all stored data types, including passwords, credit cards, and OTP codes. This was especially impactful for OTP, which had previously only been accessible within individual password detail pages. Surfacing OTP codes at the top level made them significantly easier to reach in time-sensitive moments.
DESIGNED TO SCALE
The new structure doesn't solve for today's data types only - it establishes a foundation the product can grow into. Secure notes, folders, or new item types can be introduced without restructuring the navigation. The IA moves from a single-purpose list to a flexible, unified view of all sensitive data in MEGA Pass.
New "Items" section in Mobile
Image: Mobile navigation IA update
New "Items" section in Extension
Image: Extension navigation IA update
New "Items" section in Web
GIF: Web navigation IA update
Learnings
Key project learnings
Constraints improve focus
Working with a smaller team pushed me to prioritise high-impact solutions and avoid unnecessary exploration. It sharpened my ability to make practical, outcome-driven decisions and defend them clearly.
Validate assumptions early
The manual selection detour came from an unverified technical assumption. Earlier collaboration with the development team on the API would have surfaced the conflict question sooner and saved design cycles - it reinforced a habit I now apply consistently.
Strong foundations reduce rework
Designing the MEGA Pass MVP with a clear architecture in mind meant credit cards, filtered views, and OTP slotted in without friction. I now consider scalability a core part of how I approach products from the beginning.
