Orchard
Responsive web app for mobile payments
Compared to Apple Wallet, Orchard improves how users select a specific credit or debit card.
My roles
User Research
Feature Design
Information Architecture
Experience Strategy
Wireframes
Branding and UI
My tools
Figma
UsabilityHub.com
Miro
My UX strategy and feature design process
Conduct initial user research
Create user stories, personas and user flows
Draft and link low- and mid-fidelity wireframes
Conduct user preference and usability testing
Develop and apply visual brand language
Finalize UI design and prototype
Conduct initial user research
Create user stories, personas and user flows
Draft and link low- and mid-fidelity wireframes
Conduct user preference and usability testing
Develop and apply visual brand language
Finalize UI design and prototype
The problem
Apple Wallet's inefficient selection process
Overlapping cards result in narrow tappable areas. Users often get frustrated having to try more than once to correctly select an intended card.
The problem statement
How might we make the card selection process more accurate to reduce user frustration?
The solution
The Orchard difference
Full images and much larger tappable areas help users more quickly and accurately pick their intended card from a scrollable list.
Is it really a problem? YES
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.
Methodology
Type: User phone interviews and affinity mapping of responses
Participants: 3 Apple Wallet users recruited from friends and family
Timing: 7/4-7/5
Goals
- 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
Key findings summary
- 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
Keeping user needs front and center during development
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.
Crafting a deeper understanding of users
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
Plotting the payment user flow
I developed the following user flow for completing a transaction to inventory the necessary screens to help users.
Roughing out the basics
To start visualizing app functions and my differentiated card selection process, I sketched numerous wireframes, including the following payment flow.
Do users prefer the Orchard solution? YES
My previous user research confirmed that an inconvenient problem exists. This research showed user preference for my alternative approach.
Methodology
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
Goals
Before spending any more time on development, it was important to see if users preferred my alternative to Apple Wallet.
Key finding: 74% of respondents preferred my alternative
00%
00%
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.
Is Orchard easy to learn and use? YES
Methodology
Online moderated sessions using a mid-fidelity prototype
Participants: 5 adults from US, 1 from Germany
Timing: 8/30-9/4
Research goals
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)
User tasks
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)
Analysis process
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
Key findings
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
Evolution of selection screen UI from concept to completion
Evolution of the home screen UI
Additional app screens
A look back...and forward
A rewarding experience
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.
Two challenges
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.
Initial ideas for future improvements
- 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