Compared to Apple Wallet, Orchard improves how users select a specific credit or debit card.
Figma
UsabilityHub.com
Miro
Overlapping cards result in narrow tappable areas. Users often get frustrated having to try more than once to correctly select an intended card.
How might we make the card selection process more accurate to reduce user frustration?
Full images and much larger tappable areas help users more quickly and accurately pick their intended card from a scrollable list.
To ensure the problem was real before spending time on a solution, I conducted a brief user study which confirmed the inefficiency of Apple Wallet.
Type: User phone interviews and affinity mapping of responses
Participants: 3 Apple Wallet users recruited from friends and family
Timing: 7/4-7/5
- Validate that selecting a specific card is a frequent and inconvenient problem with Apple Wallet
- Confirm convenience as the most important user benefit of e-wallets
- Explore why users have multiple credit/debit cards and bank accounts
- Selecting the wrong card happens a lot and detracts from the primary benefit of convenience
- Universal agreement that convenience is the most important benefit
- Reasons users have multiple credit/debit cards and bank accounts
- Improve credit score
- Build up available credit for emergencies
- Finance large purchases
- Receive a discount for signing up or when used in a particular store
- Earn rewards, miles, and/or cash back
I developed user stories to ensure that the universal and differentiating features I would be building into the e-wallet would deliver actual value to users based on their needs.
As an e-wallet user, I want the flexibility to use a credit card, debit card and/or my bank account for any particular purchase.
As someone concerned about the security of my identity and financial information, I want a quick and secure way to log in.
As a frequent shopper and sender of money, I want a simple and easy-to-use home screen, so I can access and use each function quickly.
As a user seeking to make purchases and transfers to many parties and through many types of accounts, I want an e-wallet that supports all of my financial options.
As a frequent shopper and e-wallet user, I want an easier way to select a specific card or account for a specific purchase.
As a new user, I want to be able to create my account and enter my first card/account information quickly, so I can start using it.
As a user seeking to consolidate my financial tools, I want a single app that allows me to make purchases, send money and request money.
As a user with a lot of cards and accounts, I want to see all of my cards/accounts in one place so that I can select the best one to use for any given transaction or request.
To maintain a focus on target user needs throughout the design process, I created a proto-persona and user journey based on insights from my previous user interviews.
Jared: High-frequency e-wallet user
29 year old financial analyst in Chicago, IL. Single. Uses Apple Wallet on iPhone, iWatch and MacBook Air. Uses his e-wallet for almost every purchase because of the convenience and speed.
Transaction frequency: Online: 1-2/week; In-store: 2-3/day
Frequent transactions: Morning coffee stop; Lunch with colleagues; Weekend dates
I developed the following user flow for completing a transaction to inventory the necessary screens to help users.
To start visualizing app functions and my differentiated card selection process, I sketched numerous wireframes, including the following payment flow.
My previous user research confirmed that an inconvenient problem exists. This research showed user preference for my alternative approach.
Side-by-side testing via UsabilityHub.com of mid-fidelity wireframes
Participants: 15 adults from US, 2 from Germany, 1 each from Canada and Switzerland
Timing: 8/20-8/26
Before spending any more time on development, it was important to see if users preferred my alternative to Apple Wallet.
Preferred by 74% of respondents
Respondents that selected the Apple Wallet option stated it was mainly because of their familiarity.
Those that selected my alternative confirmed it’s difficult to tap the right card in Apple Wallet, how they prefer to see a whole card, and how they anticipate fewer selection mistakes because of the separation between cards.
The comments about my alternative exactly match the purpose of the app: an easier and more accurate way for users to select a specific card for a purchase — providing strong validation for continuing development.
Online moderated sessions using a mid-fidelity prototype
Participants: 5 adults from US, 1 from Germany
Timing: 8/30-9/4
With Orchard being new to the market, a primary goal was assessing Orchard’s learnability by first-time users
Inform UX refinements by uncovering user issues during common digital wallet tasks (e.g., making a purchase, sending money)
Create an account (core function)
Transfer $15 to a friend (core function)
Make a purchase with a specific card (differentiating function)
Make another with a different card (differentiating function)
In Miro, I first clustered by topic all raw notes and observations
Using a Rainbow spreadsheet, I assigned all user issues an error rating based on Nielsen’s 4-part scale and created an official usability test report
High utility and usability based on user success with the tasks and their positive feedback
User issues and improvements are detailed in Step 6 below
Early-stage validation of a potential problem with Apple Wallet fueled my drive to then design a superior solution.
Getting objective validation that my Orchard solution was far more preferred by users was also very fulfilling.
One challenge was creating a vibrant interface that was still streamlined for quickness. The Orchard color palette and singular backgrounds provided a compelling user experience without distracting users or resulting in long load times
A second challenge was iterating the color palette to increase accessibility, because my original orange/white and teal/white combinations were not. I had to skip the orange/white combo for critical text and buttons, and I darkened the green to be more accessible.
- Dark mode option
- Display user-selected info about each card, such as the discount, cash-back or mileage bonuses
- Testing of a horizontal scrolling card select process