Save Gift Cards to Account
How might we simplify the process for customers to save gift cards?
The Home Depot
Megan May - UX Designer, Online UX Team
Project Start Date
March 2024
Project Overview ✍️
The Problem
DIY customers don’t have the ability to save The Home Depot gift cards to myAccount. Pro customers can save gift cards to their account, but only for purchase tracking purposes.
Customer frustrations:
Must re-enter details to check the balance and reload a gift card (23 digits + 4 digit PIN)
Must re-enter gift card details to use as tender at online checkout.
Must manually organize and keep track of all gift cards, Home Depot doesn’t offer a central place to store gift card info.
Can’t scan a barcode to pay with gift card digitally in-store.
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.
Customer Expectation
As a DIY or Pro customer, I want the ability to save all my gift cards in one place so I can easily access them to check balances, reload funds, and safeguard against losing physical or digital cards. Additionally, I want to seamlessly use my gift cards for transactions both in-store and online.
I’m able do this at other places, why not at The Home Depot?
My Role
Lead UX Designer at the intersection of Product, Business, and Engineering. 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.
Design Sprint 💡
My Role: Facilitator/Moderator
Purpose:
Bring together designers, researchers, product managers, developers, and stakeholders to work intensively and collaboratively. Our goal is to understand and define the problem, then ideate and sketch solutions.
15 participants, 4-hour sessions, over 3 days
Define the Problem
Problem Statement Refinement & Voting Session
Build Customer Empathy
What are our customer pains, jobs, and gains?
Competitive Analysis
Understand how other products solve similar problems, identify our gaps or opportunities for improvement.
How Might We?
Create set of open-ended, solution-oriented questions. Vote on our top HMW statements.
Understand Our Current State
What is the current user flow for Pro customers who save gift cards to their Home Depot account?
Define MVP & Scope
What can we accomplish with MVP?
User Research 🔎
We asked real Home Depot Pro customers share their thoughts around using our gift cards.
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 prefer giving my guys a gift card instead of a credit card, so they can use it when needed. This way, I don't have to worry about paying the balance, overspending, or mistakes.”
- Jerry, small business owner
“I’ve switched to buying digital gift cards so I can send it to my employees as needed, and they don’t have to carry it. I prefer digital much more.”
- Alex, small business owner
Design 🎯
How might we make it easy for our customers to save gift cards to their account?
Our customers want to:
✅ Save gift cards in one place
✅ Organize and manage gift cards
✅ View balance and reload without having to re-enter gift card details
✅ Customize gift cards
Current customer frustrations:
👎 DIY (B2C) customers can’t save The Home Depot gift cards to accounts
👎 Pro customers can save gift cards, but can’t automatically view balance or reload
👎 Customers must enter 23 digit gift card number + 4 digit PIN at online checkout
👎 Can’t scan a digital barcode to pay using a gift card in-store
What does saving a gift card look like for Pro customers today?
No sorting functiontality
“Set Active” in the menu doesn’t do anything, not a legit feature
No menu option to reload the gift card
Can’t choose a gift card image or view the balance
The new flow and features:
Saved gift cards live with other payment methods in the Cards & Accounts space
Created a dedicated page (instead of a modal) to enter gift card info
Added a barcode icon, when clicked users can scan gift card barcode and digits will automatically populate
Users can choose from a list of gift card images
Gift card balance is always shown
Users can sort on page. They can also save multiple gift cards and edit, reload, or delete from menu
Prototype: new desktop experience for a DIY customer →
Key Feature Callouts
Barcode scan for gift card digits
Q: Why add a barcode scanner?
A: Relieves user frustration and saves time.
Users reported it difficult to correctly enter the 23 digit gift card number. By adding a barcode scan feature, the digits will automatically and correctly populate in the Gift Card Number field.
Seamless reloading
Q: Why make it easy to reload?
A: Easy reloading is key to the gift card program’s success. Pro customers reload cards regularly for large projects, and to encourage more frequent use by DIY customers, we wanted to make accessing and reloading funds as simple as possible.
Limit # of gift cards saved to account
Q: Why limit?
A: There are backend challenges with accessing multiple gift card balances at once, as well as the inability to combine them. This could impact conversion at checkout. Our data also shows that 98% of users have fewer than 30 gift cards saved.
OKRs
As we make it easier for customers to save & use gift cards, we assume that purchases made with gift cards will increase.
Data indicates that customers with gift cards tend to spend, on average, 70% more than those without. For example, if Tom receives a $100 Home Depot gift card for Christmas, he is likely to spend $170 at the store.