Gift Card Support for Apple Wallet
During the last several years, I've collected over $200 in gift cards for Target, Starbucks, Apple, Nike, and interestingly– Ike's Love and Sandwiches.
One reason I'm not able to use my gift cards is because I don't always have them: I don't want to carry around 6 extra cards, and I can't be asked to search through 2 years of inbox spam for the link to my $10 digital gift card at Ike's when the cashier asks me to pay. I can be forgetful too– when I bought my AirPods, I completely forgot to use the $50 Apple gift card that was living in my pocket for over a year.
These days, I just use Apple Pay when I don't have my wallet on me, or when I don't have time to dig through my bag to find my boarding pass. Wouldn't it be awesome to do the same thing with gift cards, so I could access them easily and anytime through my phone?
Timeline
4 weeks
(Jan 2024 - Feb 2024)
Tools & Resources
Figma, iOS 17 Design System & Mobile Components
Gift Card Support for Apple Wallet
During the last several years, I've collected over $200 in gift cards for Target, Starbucks, Apple, Nike, and interestingly– Ike's Love and Sandwiches.
One reason I'm not able to use my gift cards is because I'm not always carrying them: my wallet is bulky enough without 6 extra cards in it, and I can't be asked to search through 2 years of inbox spam for the link to my $10 digital gift card at Ike's when the cashier asks me to pay. Sometimes I'm just forgetful too– when I bought my AirPods, I completely forgot to use the $50 Apple gift card that was living in my pocket for over a year.
These days, I just use Apple Pay every time I forget to bring my Wallet, or when I don't feel like digging through my bag for the boarding pass to a connecting flight. Wouldn't it be awesome to do the same thing with my gift cards, so I could access them easily and anytime through my phone?
Timeline
2 months (Sep 2023 - Oct 2023)
Timeline
3 weeks
(Jan 2024 - Feb 2024)
Tools & Resources
Figma, iOS 17 Design System & Mobile Components
Based on my experience using (or, not using) gift cards, I speculated that my pain points could be addressed through a feature in Apple Pay that allows me to add, manage, and pay with gift cards digitally through Wallet.
Before pursuing this solution, I decided to take a hypothesis-driven approach to validate or refute two basic ideas that would serve as the basis for the feature.
Other gift card owners share a similar experience with parallel pain points regarding the accessibility, practicality, and ease of use of gift cards
Designing this feature in Apple Pay can be justified from a business standpoint – if this feature can’t serve Apple, then it’s not worth building.
Focusing on the first hypothesis, I conducted interviews with gift card owners to familiarize myself with their experiences and develop an understanding of what the gift card lifecycle looks like for typical users.
People who don't store their physical gift cards digitally typically did so because they aren't aware of how to digitally store cards, or because storing and using gift cards digitally requires extra steps like downloading apps or creating accounts with each merchant.
Gift card users experience a range of pain points, and through interviews I took inventory of the highest-priority issues, which included 1) gift card balance visibility, 2) inability to use gift cards due to forgetfulness or non-possession, 3) misplacement or unintentional loss, and 4) physical buildup of used and unused gift cards.
I think there are two dimensions businesses are generally concerned with, which are revenue and growth. Since Apple is a giant, revenue is probably their main focus – and my hypothesis is that this feature might help Apple be more sticky and central to millions of people, which can be leveraged to stimulate revenue-generating relationships with merchants that want to use Apple’s technology to reduce payment friction for their customers.
Fortunately, Apple Pay dominates digital wallet payments by transaction volume and is extremely popular among American users. The platform is very well-accepted in the market due to its nativity to iOS, its ease of integration with a huge volume of merchants and payment systems, and its high perceived level of security among users.
Moreover, Apple’s biggest rivals, Samsung and Google Pay, already let users add and use gift cards digitally. Which means, iPhone users are falling behind!
The best alternatives, like Gyft and Folio, are unpopular and quite bad. For example, Gyft only allows handles gift cards from a limited range of vendors. Businesses are already partnering with Apple’s rivals to reduce payment friction for non-iPhone users, and I believe this feature could help Apple solidify its position among consumers as a leader in resolving their digital payment needs.
Finally, at WWDC 2024, a bunch of new features were announced for Apple Pay, like tap-to-cash payments.
Apple’s hardware sales seriously underperformed last year. Yet, their revenue from services has grown nearly 20% YoY for a decade. I believe the reason why Apple is designing features like tap-to-cash is because they’re up against strong incumbents like PayPal and Stripe, which have very loyal customer bases. In order to draw customers from those brands, Apple is leveraging their design teams as a strategic play to generate excitement and build defensibility around payment services like Wallet.
Moving forward, using my user interviews as a guide, I mapped a typical shopper's journey with gift cards. The pain points I discovered at the start happen throughout the gift card lifecycle, but the way shoppers feel when they encounter those pain points is universal.
Using this journey map as a guide, I drafted user flows to address inefficiencies in the user experience at the storage, usage opportunity, balance tracking, and end-of-life stages of the gift card life cycle.
An important constraint I had to design for was the distinction between supported and unsupported gift cards. Because the way users interact with supported vs. unsupported gift cards is very different, I made sure that my wireframes reflected the user flow differences between each card.
- Merchant is an Apple Pay partner
- Connected to the merchant's network
- Balance syncs automatically
- Non-partner (e.g. corner store, thrift shop)
- Bar and QR codes only
- Balance is updated manually
Using my drafted user flows, I then generated low fidelity wireframes for key interfaces by experimenting with various layouts in Figma.
As I solidifed my design choices, I received feedback from my design mentors and my target users. My testing happened in two phases: A simple phase involving prompted tasks, and a second phase where I observed how users used their gift card in a real checkout line.
After converting these wireframes into high-fidelity mockups, I conducted testing with 5 participants who were asked to add and use a real $10 Target gift card to check out with via the prototype. This phase of testing was crucial for confirming my understanding of what users go through to while checking out in the real world. Through this process, I uncovered one critical issue with my design, which I dubbed the "worst-case scenario."
There are 2 reasons why users failed to update their balance after checkout. The first is that some users did not recognize that they had to manually update their balance in the first place. The second reason is that they simply forgot to update their balance after checking out.
I asked myself: How might I let users know in advance that they need to manually update their balance? And also if shoppers forget, how might I get them back on track? To answer these questions, I explored several variations of my initial design:
After receiving some feedback from shoppers, I tested 2 designs to identify the best way to improve the rate at which shoppers manually update their balance after checkout. I combined options 4 and 5 in one solution as a way to remind users to update their balance in advance and if they forget to update their balance, and I compared this solution with option 4, where users are prompted to enter their purchase amount as soon as the gift card is opened.
These solutions were by far most visible and actionable solutions, yet I was hesitant to implement them because they are also the most intrusive. However, I reasoned that this level of intrusiveness is justified because my goal is to help users avoid the worst-case scenario of not updating their gift card balance.
What I found was that even though the notification popup reminded some users to update their balance before exiting the wallet, others were still not aware that they had to update their balance after checking out. Even though I designed a label specifying that the gift card required manual balance updates, users expressed that they didn't see the label because their visual attention was primarily drawn to the gift card, rather than the label.
On the other hand, when users were prompted to enter their purchase amount as soon as they opened the gift card, 100% of participants updated their balance after checking out. Even though my sample size was quite small, this improvement showed that my design changes were pointing in the right direction.
The final design for this solution was prototyped using iOS 17 design guidelines and components for the iPhone 15.
When users shop at a merchant they've added a gift card for, they are gently prompted to use their gift card for their purchase.
This means users who add gift cards to Wallet can "set it and forget it" with any of their stored cards.
Supported gift cards are associated with merchants that have partnered with Apple Pay.
Balances on supported gift cards are connected to the merchant's network, no action is required from the user once they make a purchase.
Supported gift cards can be scanned via bar code, QR code, or NFC.
To add money to supported gift cards, simply use any payment method via Apple Pay!
Supported gift cards can be scanned via bar code, QR code, or NFC.
To add money to supported gift cards, simply use any payment method via Apple Pay!
Users can add gift cards from third-party merchants by scanning the gift card or entering details manually.
Balances don't sync automatically for unsupported gift cards, but users can easily manage their gift balances via Wallet.
To pay with an unsupported gift card, users can scan the card's bar code or QR code.
Users are prompted to enter their purchase amount as soon as they open the gift card, but if they choose not to they can always do so later.
To pay with an unsupported gift card, users can scan the card's bar code or QR code.
Users are prompted to enter their purchase amount as soon as they open the gift card, but if they choose not to they can always do so later.
Storing depleted gift cards can be useful if users wish to return their purchase or reference previous purchases using their gift card.
This features allows users to archive depleted gift cards in Expired Passes, where they can be restored anytime by adding money or updating the balance.
The total time-to-completion for this feature was about 4 weeks, which is considerably shorter than the timeframe for my previous design projects. However, the challenges I faced during this project still provided me with crucial learnings for future projects and my own design process.
Observing visual and interaction patterns within a design system
This was my first time designing with an existing design system in mind, and although my exposure was limited, providing users with an "Apple-like" experience was my priority throughout the design process. It wasn't enough for my solution to just address users' pain points, the feature itself needed to "feel" indistinguishable from other features in Apple Pay.
To mimic the identity and dynamics of an Apple feature, I did my diligence using Apple's developer & design resources, and I also studied the design patterns in my own iPhone. This investigative process, combined with independently comparing Apple's design patterns to my own designs, allowed me to iterate my solution into something that resembles a native Apple feature.
Adapting usability testing to real-world behavior
During this project, I learned to adapt my testing beyond the vacuum of prompted interaction testing. If I didn't perform testing under real-world checkout conditions, I would have never discovered the worst-case scenario where users were failing to update their gift card balances manually.
Factors like distracting face-to-face interactions and pressure from waiting in line changed how participants interacted with the product, and I made crucial adjustments that I would absolutely not have considered had I not broadened the scope of my metrics for success.
.gif)
.png)
.png)
.gif)
%208%20(1)%201.svg){kind=icon}
.gif)
