Microsoft Wallet
Redesigning an intuitive, seamless way to delete payment methods
Shipped experience
Enabling card deletion to both the Wallet landing page and Payment Methods page streamlined card management, reduced user friction, and reinforced trust in Microsoft’s payment ecosystem, which drove an 8.5% WoW increase in Payment page engagement.
Overview
Over 2,500 users reported frustration with deleting cards, since the option was buried only within the payment detail page. Partnering with the PM, I led an end-to-end redesign, which spans strategy, design exploration, prototyping, research, and engineering collaboration. It closed this critical UX gap and improved the overall payment management experience.
Outcomes
- 8.5% WoW page engagement
- 14% card deletion increase
- 12 complaints the following months for the same issue
Product design owner
Role
Mar-May 2024 (2 month)
Duration
🚀 Shipped
Status
UX, prototype, strategy, research, testing
Contribution
Desktop web app
Platform
Fintech
Industry
Previous experience
Users could only delete a payment card by navigating to the edit card detail page, which is a multi-step path through Wallet home, the Payment Methods page, and authentication. This laborious process frustrated users and generated over 2,500 complaints within just two months of the change.
Key differentiators in competitor experiences
Unlike Apple and Google Wallet, which both offer dedicated mobile experiences, Microsoft Wallet operates solely on the web, making the entry flow less discoverable and more buried.
Additionally, because 100% of users access Wallet through Edge, automatic enrollment occurred without explicit user notification, causing confusion.
What we hear from users
Insights: users are frustrated with the card management experience and don't understand the value of the Wallet.
Hypothesis: users are more likely to trust the Wallet brand and feel satisfied when card management is intuitive, easily discoverable, and clearly communicates the product’s value.
The design goals
#1 Provide better card removal experience
Ensure users can delete card more easily without compromising security
#2 Increase the discoverability of delete feature
Made the feature easily discoverable for users without sacrificing critical business requirements
#3 Card art
Visual improvement for tokenized cards
#4 Collect user feedback
Captures user feedback after card deletion to understand motivations and improve the experience
Approaches
Instead of burying deletion in the L2 card detail page, we wanted to make it accessible from both the Payment Methods page and/or Home page.
Exploration #3
This solution is a heavy lift, requiring a redesign of the Payment Methods page. Card details are separated from the card art, with actions moved to the right side of the list and the card removed from the dropdown menu.
After deletion, an optional slide-out appears in the right corner to capture user feedback and insights.
Exploration #2
As a medium-effort improvement, this solution introduces a card tile that displays key details without overlap and allows users to name their cards easily. Merging the feedback form with the deletion confirmation further streamlines the process.
Exploration #1
This solution is a low-effort lift. On the Payment Methods page, users can hover over a card to quickly choose between editing or deleting it, which allows expired or incomplete cards to be removed without additional authentication.
After deletion, a dialog prompts users to share feedback on their reason for removal. We also get to learn the reason from users for future improvement.
What we learn from user testing
User researches
I partnered with our user researcher to run multiple rounds of moderated and unmoderated testing, comparing card deletion flows to see which best helped users remove unwanted payment cards from Wallet and Edge. We also captured their reasons for deletion to better understand user motivations.
Results
Participants found the hover action easy to use but difficult to discover without moving the cursor, and preferring a more straightforward, visible option.
90% of participants (191/212) found the dropdown menu very or fairly helpful.
Making the delete button more visible improved usability but increased churn. To align user experience with business goals, I introduced feedback forms and a clearer confirmation flow.
• 8 out of 14 participants preferred the slide-out over the dialog, as it felt optional rather than a blocker.
• 68% of participants valued seeing the card visual and details before deleting, and some mentioned reconsidering their decision as a result.
Collect user feedback
Insights & Trade-offs
Retention over acquisition
Initial user testing favored the slide-out approach for its minimal disruption. However, after assessing visibility and clarity with the PM, I merged the feedback form into the deletion step. This design decision enabled two-way communication, providing users with instant context and clarity before finalizing their action.
High discoverability and low effort
A solution that aligns with user needs while minimizing development effort.
Planning for next steps
Insights revealed that users often deleted payment methods to correct small errors. To address this, I refined the visuals for card categories and introduced an inline edit CTA, enabling quick updates directly within the tile. This design reduced unnecessary deletions and improved overall card management usability.
12
down from 2597 total complaints
8.5%
WoW page engagement
14%
card deletion increase (majority of deleted cards were expired or had incorrect info)
The numbers
Learnings
This project showed me how small design tweaks can create major user impact and underscored the value of identifying the root problem early. Working closely with PMs, engineers, and researchers highlighted how alignment and communication lead to meaningful results, even when those results challenge initial business goals.
