Digital Wallet
Promote easy, fast, and delightful future purchases to our registered users by elevating our payments page to allow for user actions to be easily completed and important information easily accessible
A Case Study by Kylie Madsen
Discovery
Discover > Define > Design > Deliver
If I had an hour to solve a problem I'd spend 55 minutes thinking about the problem and five minutes thinking about solutions.” - Einstien
When I joined on this project, I found a problem statement in need of updating, some competitive analysis completed alongside an extensive list of best practices, and the knowledge that our product intern was coming up with some features for me to implement later in the summer.
Discover > Define > Design > Deliver
Step 01: Refine XD Priorities, Understand the Problem
As a jewelry shopper, I need to see my saved and default payments, order history, and gift card information so that I can manage my payments with my jewelry retailer.
User Problem Statement
As a jewelry retailer, I need to be able to promote easy + fast payment management while providing a delightful experience for our users within the payments page.
Product Problem Statement
Faster checkouts = Reduced abandonment rates
More revenue via PayPal Credit
More accounts authenticated/registered
Business Objectives
My next step in this discovery phase was outlining the process, and attempting to identify where research could be involved to aid in improving this experience, and knowing what features could be improved. I worked closely with product to identify key epics.
Discover > Define > Design > Deliver
Step 02: Epic Breakdown + PM Collaboration
The next step in this discovery phase was outlining the process. To assess taxonomy, (our #1 priority), and how our users are able to navigate to their digital wallet, we ran 20 of them through an unmoderated test to get some baseline data.
Once our users navigated to ‘Personal Details’ page where digital wallet lives, 100% of our users were able to complete the tasks we assigned, like adding, deleting, and setting a payment method as default.
Key Finding 01
Some of our users directly called out confusing wording for ‘Personal Details’, These users mentioned wanting to see labeling for pages more payment specific, similar to “Payment Methods”
Key Finding 02
Majority of users do not navigate directly from the account icon menu to personal details. Most click the profile icon, go to my account, and then go to personal details after reading the page description
Key Finding 03
Step 03: Research
Discover > Define > Design > Deliver
20 Users | 4 Tasks | Unmoderated
Design: Taxonomy (Future Phase)
Discover > Define > Design > Deliver
Based off of these results, we see a great opportunity to work with the enablement team to improve this menu organization. We suggest separating Digital Wallet from Personal Details in the My Account menu, and visiting our naming conventions for these pages.
After our baseline research on taxonomy, it was time to come back to the epics outlined by our product management and start working on saving PayPal to Digital Wallet, with some UI enhancements to Digital Wallet itself. I kicked it off with some more competitive analysis research, where I learned that saving PayPal needs to happen in the billing page as well as the ‘Add Payments’ flow. I started designing!
When I started solutioning, I knew that some UI updates needed to be apart of my final deliverable. The original experience needed more negative space, better scan-ability, and some simplification.
I decided to go with a card-based UI to mimic an IRL wallet. This achieved the goals I had in mind, while still keeping an experience that could be used across our banners.
Design: Epic 02- PayPal Integration
Good UI is like a joke, if you have to explain it, it’s probably not that good. - LeBlanc
Discover > Define > Design > Deliver
Digital Wallet Card UI Solution
Before
After
Working in our epic refinement meetings to establish goals and refine the tasks at hand, there was a lot of discussion around the user flow, and how we can ensure that connecting PayPal to user’s accounts will save them time and reduce our abandonment rates. While testing and adjustments are still being made to our billing flow, our connection via Digital Wallet is looking great and strides are being made in the solution.
PayPal Connection Flows
Digital Wallet Flow
Billing Page Flow
*Pending user testing for organization!
Today: Next Steps
Discover > Define > Design > Deliver
As my internship is wrapping up, Soobin, who has been a fantastic mentor on this project, will be taking over my current designs and research in progress. The work done here has been so helpful in my growth and development as a designer, and it’s been wonderful to collaborate with everyone.
For the future of digital wallet, these epics will be solutioned and implemented, validation research conducted, and designs continuously improved. Collaboration between our enablement and purchase teams will continue to improve the taxonomy for our users.