Completed onboarding
The product asked for commitment before many customers understood what they were signing up for.
Product design / Visual storytellingProject outcome ↓
Walmart Pay / Interaction and visual design
A better
way to pay.
Making a familiar checkout feel clearer, calmer and more in your control.
Six visual chapters. Open the quick overview.
Clarity before commitment.Clear steps.
Familiar objects.
A confident checkout.
Familiar objects.
A confident checkout.
01 / The challenge
A little doubt.
A lot of drop off.
When a legacy savings benefit was removed, engagement fell. The next reason to use Walmart Pay had to come from the experience itself.
Reached payment confirmation
Customers needed a clearer scanning sequence and more confidence about when their card would be charged.
Project baseline metrics. Onboarding and payment are separate cohorts.
How might we make the value obvious
and the moment of payment intentional?
02 / Read the behavior
Find the friction.
Then ask why.
The funnel located the breaks. Customer interviews helped explain the uncertainty behind them.
Historical baseline21.07%
Only one in five made it through.
Most of the loss happened before customers finished adding payment details. That made clarity of value an early design priority.
Select a stage to inspect it. Each percentage is a share of its funnel’s original entry cohort.
Is this a new
credit account?
Customers described a credit line, a prepaid balance, or a wallet accepted beyond Walmart.
Explain the product before asking for a card.
Why use this
instead of my card?
Convenience was not self evident. Connecting an existing card felt like effort without a clear return.
Make the practical benefits visible.
Wait. Did I
already pay?
Automatic connection could get ahead of the customer. The meaning of scanning and paying blurred together.
Create a clear moment to review and commit.
03 / Think with a pencil
Explore wide.
Choose with care.
Twelve rough studies explore the order of information, the space given to scanning, and how payment should feel.
Pencil studies / Structure, sequence and hierarchy.Open the exploration sheet ↗
From rough to resolved
Twelve routes.
One clear intent.
A high fidelity concept collection. Open any screen to explore its rationale, evidence and tradeoff.
12 concepts
01 / Onboarding
Benefits at a glance
Selected principle
02 / Onboarding
A visual story
Onboarding exploration
03 / Onboarding
Learn at your pace
Onboarding exploration
04 / Onboarding
The guided tour
Onboarding exploration
05 / Payment
Room to scan
Scanner exploration
06 / Payment
Card details first
Scanner exploration
07 / Payment
A moment of control
Preferred test principle
08 / Payment
Your card, your choice
Supporting concept
09 / Support
Permission with purpose
Supporting concept
10 / Support
Recover with care
Supporting concept
11 / Support
A clear finish
Supporting concept
12 / Support
More room to read
Supporting concept
Each direction explores a specific decision: how to introduce value, how much space to give scanning, and when to ask for payment.
Iteration / Onboarding
Clarity beat
the carousel.
The most useful learning came from the directions that did not work. A compelling illustration could earn attention, but the structure still had to explain the product.
Design takeaway: keep essential benefits visible and make deeper explanation optional.
04 / The experience
Try the story.
Feel the control.
A guided concept brings the decisions together, from understanding the value to reviewing a payment. Advance through the six steps.
01 / Understand the value
A reason to get started.
Three benefits answer what Walmart Pay does, where it works and why it could help. Essential information is visible from the first screen.
Design principle: put the explanation where attention already goes.
Interactive design concept. Example data. No real payment.
Too much, too soon
Scan → Connect → Automatic payment
A glimpse of the QR code could move the process ahead using the default card. Some customers felt the experience was ahead of them.
Confirm before scanning
Review card → Scan → Connect
The scanner remained disabled until the payment method was confirmed. This introduced control before the checkout connection.
Connect, then review
Scan → Connect → Review → Pay
Most participants preferred review after connection. A direct Pay label better conveyed the final action than Checkout or Confirm.
05 / The illustration system
Simple forms.
A clearer story.
A 2D illustration system makes each payment step easy to recognize. Familiar objects, confident blue shapes and yellow accents keep the story focused.
01 / Choose
A familiar starting point.
A wallet and existing cards explain the payment model without suggesting a new credit line.
02 / Connect
A visible connection.
A phone and checkout terminal show where scanning happens and what the camera is looking for.
03 / Complete
A confident finish.
A receipt and check mark close the loop with a clear visual acknowledgement.
Next / Motion directionThree moments.
Three moments.
One continuous story.
The 2D scenes set up a simple onboarding sequence. Cards slide into place, the phone finds the checkout code, and a receipt confirms the finish.
00 to 03 sec
Choose
A saved card slides from the wallet into the selected state.
03 to 07 sec
Connect
The phone aligns with the checkout code. A soft pulse confirms the connection.
07 to 10 sec
Complete
After a deliberate Pay action, the receipt appears and the check mark resolves.
Slow, purposeful movementNo autoplay audioStatic alternative for reduced motion
06 / What changed
Clearer value.
More control.
The work clarified the reason to get started and the moment to commit to payment. The outcomes below reflect the onboarding and scanning work.
Signups rose during a shared launch.
The onboarding updates launched alongside the Capital One credit card introduction. Enrollment increased, but the design’s individual contribution cannot be isolated.
A clearer sense of control.
The research favored reviewing payment after connection. I left before the scanning updates launched, so I cannot claim a measured improvement in transaction completion.
What I would validate next
01 / Understanding
Can customers explain it?
Check whether first time users understand where Walmart Pay works, which card is used and when payment happens.
02 / Completion
Does clarity change behavior?
Compare onboarding completion and time to first successful payment using consistent cohorts and a controlled rollout.
03 / Confidence
Does control feel clear?
Test card selection, scanning, recovery and receipt recognition with accessibility needs and real checkout conditions.
The best interaction is not always the fastest.
Sometimes it is the one people understand.
Make it clear.
Make it human.
A study in balancing useful information, visual confidence and the customer’s right to stay in control.