Pay with Gift Cards
How might we make it easy for customers to pay for purchases using gift cards?
The Home Depot
Megan May - UX Designer, Online UX Team
Project Start Date
March 2024
A continuation of the project Save Gift Cards to Account
Project Overview ✍️
The Problem
DIY and Pro customers want to use their saved gift cards to transact in-store or online.
Customer frustrations:
The Home Depot doesn’t offer a seamless way to pay using a gift card online. Must re-enter gift card details to use as tender at online checkout.
Can’t scan a barcode/QR code to pay with gift card digitally in-store.
Customer Expectation
As a customer, I want to pay with a gift card so I can use my balance easily and complete my purchase without the hassle of entering a 23-digit code and PIN.
I’m able do this at other places, why not at The Home Depot?
Target Audience
DIY (B2C) Customer - enjoys tackling projects around the house, from renovations to repairs. Often, DIYers use Home Depot gift cards because they’ve received them as a gift.
Pro (B2B) Customer – A contractor, builder, or tradesperson handling large-scale projects. Often, business owners provide gift cards to employees in place of company credit cards, allowing them to make in-store purchases for project supplies.
My Role
Lead UX Designer responsible for leading design sprints, creating user flows, participating in user research and testing, creating hi-fidelity designs and prototypes, presenting to leadership and stakeholders, working with developers during implementation, and ensuring customer satisfaction while meeting business goals.
Key Deliverables
User Interview results
User Personas
User Flows
Competitive Analysis
High Fidelity Wireframes
Interactive Prototypes
Stakeholder Presentations
Tools & Methodologies
Figma for wireframing and prototyping.
Miro & FigJam for brainstorming and mapping user journeys.
UserTesting.com for user interviews and usability tests.
Confluence for documentation.
Jira for tracking project progress.
Design Thinking to empathize with users and define the problem.
Agile UX for working closely with the development team in sprints.
User Research 🔎
We asked real Home Depot Pro customers share their thoughts around using our gift cards to pay for purchases.
6 participants, 1-hour virtual interviews, ~6 hours of raw data
My Role: Co-facilitator
“One time, I wanted to use the small remaining balances on several gift cards. I tried entering all of them, but it took so long that some of the codes expired. I had to go through the number entry process multiple times before I finally managed to complete the transaction.”
- Hannah, office manager
"I mainly buy digital gift cards for my employees, but there's no way to share them directly within the Home Depot system. I have to save them to Apple Wallet and share the cards that way."
- Kathy, small business owner
"One feature I'd like to see at The Home Depot is the ability to pay digitally with a gift card at in-store checkout, similar to how you can scan a barcode to pay for coffee at Starbucks."
- John, contractor
What is the issue?
Customers who want to use a gift card for online payment must manually enter the card details, and if they have multiple cards, they need to do this repeatedly.
If applying several gift cards, sessions often time out due to the long process, forcing customers to start over and hurting conversion.
They must also correctly enter the 23-digit number and 4-digit PIN.
The Solution 💡
Enable users to choose which saved gift cards to apply while still allowing them to add new ones.
Open accordion to view saved gift cards
Users can still apply a new gift card. They have the option to save this card for future payments.
Newly added gift cards are always selected
The progress bar keeps track of the funds applied to the order total
The progress bar shows when gift cards cover the order total
When selected gift cards cover the total, other gift cards are disabled
Users can edit or delete cards. We indicate if there is a remaining balance.
The Prototype 💻
Desktop view of the Checkout page using gift cards to pay.
What about transacting in-store?
A key piece of feedback we received was that customers need the option to use saved gift cards for in-store payments.
We addressed this by creating a QR code that users can scan at the POS system.
Users can access the QR code through the menu on the individual gift card.