The Xbox Mastercard
The Xbox Mastercard
The Xbox Mastercard
2024 / visual / ux / strategy
Issued by Barclays, the Xbox Mastercard is the first co-branded credit card for Microsoft in the U.S. It allows cardmembers to earn card points with everyday purchases and redeem those points on digital games, add-ons, and more at Xbox.com, Microsoft.com, on console, and in-game. The new customer experience provides players access to benefits and a way to spend points on the things they love.
2024 / visual / ux / strategy
Issued by Barclays, the Xbox Mastercard is the first co-branded credit card for Microsoft in the U.S. It allows cardmembers to earn card points with everyday purchases and redeem those points on digital games, add-ons, and more at Xbox.com, Microsoft.com, on console, and in-game. The new customer experience provides players access to benefits and a way to spend points on the things they love.
2024 / visual / ux / strategy
Issued by Barclays, the Xbox Mastercard is the first co-branded credit card for Microsoft in the U.S. It allows cardmembers to earn card points with everyday purchases and redeem those points on digital games, add-ons, and more at Xbox.com, Microsoft.com, on console, and in-game. The new customer experience provides players access to benefits and a way to spend points on the things they love.
role
I partnered with the team to design the discover-and-apply experience on console, which was a unique challenge since credit card applications rarely happen within the console environment. Our focus was creating an engaging value‑prop journey that encourages gamers to explore the benefits and apply for the card.
role
I partnered with the team to design the discover-and-apply experience on console, which was a unique challenge since credit card applications rarely happen within the console environment. Our focus was creating an engaging value‑prop journey that encourages gamers to explore the benefits and apply for the card.
role
I partnered with the team to design the discover-and-apply experience on console, which was a unique challenge since credit card applications rarely happen within the console environment. Our focus was creating an engaging value‑prop journey that encourages gamers to explore the benefits and apply for the card.
key product applications
Keeping the focus where it matters
The early exploration revealed that the hero card was pulling attention away from the Apply Now button. Since our goal was to guide users toward applying while still showing the card, I looked for ways to keep the imagery interesting but pushed back enough so the CTA stays in the spotlight. The bright green card felt out of place and too dominant. I created a scaled-back version and adjusted the placement of the surrounding elements like buttons, text, headlines, and the controller legend to better support the path to the CTA.
key product applications
Keeping the focus where it matters
The early exploration revealed that the hero card was pulling attention away from the Apply Now button. Since our goal was to guide users toward applying while still showing the card, I looked for ways to keep the imagery interesting but pushed back enough so the CTA stays in the spotlight. The bright green card felt out of place and too dominant. I created a scaled-back version and adjusted the placement of the surrounding elements like buttons, text, headlines, and the controller legend to better support the path to the CTA.
key product applications
Keeping the focus where it matters
The early exploration revealed that the hero card was pulling attention away from the Apply Now button. Since our goal was to guide users toward applying while still showing the card, I looked for ways to keep the imagery interesting but pushed back enough so the CTA stays in the spotlight. The bright green card felt out of place and too dominant. I created a scaled-back version and adjusted the placement of the surrounding elements like buttons, text, headlines, and the controller legend to better support the path to the CTA.
Starting exploration (L) vs. final (R)
Meeting the user where they're at
We needed to provide relevant messaging for every user, including those who had already applied, but the landing screen couldn’t detect their status. Since these users might return through other entry points, I explored ways to trigger the right message when they land here again. This meant generating multiple options to find the best approach and creating a simple, elegant way to add a meaningful CTA or supplemental message for users who have already applied.
Meeting the user where they're at
We needed to provide relevant messaging for every user, including those who had already applied, but the landing screen couldn’t detect their status. Since these users might return through other entry points, I explored ways to trigger the right message when they land here again. This meant generating multiple options to find the best approach and creating a simple, elegant way to add a meaningful CTA or supplemental message for users who have already applied.
Meeting the user where they're at
We needed to provide relevant messaging for every user, including those who had already applied, but the landing screen couldn’t detect their status. Since these users might return through other entry points, I explored ways to trigger the right message when they land here again. This meant generating multiple options to find the best approach and creating a simple, elegant way to add a meaningful CTA or supplemental message for users who have already applied.
Option 1: One CTA button with a description for more context
Option 2: One CTA with more vague messaging
Option 3: Two CTAs with supplemental text
Option 1: One CTA button with a description for more context
Option 2: One CTA with more vague messaging
Option 3: Two CTAs with supplemental text
Option 1: One CTA button with a description for more context
Option 2: One CTA with more vague messaging
Option 3: Two CTAs with supplemental text
Benefits based on user feedback
User feedback showed a clear hierarchy of what mattered most on the benefits screen. Data proved that players prioritized earning points for games, game content, add‑ons, and similar rewards. As we iterated, we saw an opportunity to enhance the experience by incorporating UI patterns from the Xbox Store team, specifically their horizontal scroll interaction. This maintained cross-platform consistency, and improved alignment with user expectations and existing platform behavior.
Benefits based on user feedback
User feedback showed a clear hierarchy of what mattered most on the benefits screen. Data proved that players prioritized earning points for games, game content, add‑ons, and similar rewards. As we iterated, we saw an opportunity to enhance the experience by incorporating UI patterns from the Xbox Store team, specifically their horizontal scroll interaction. This maintained cross-platform consistency, and improved alignment with user expectations and existing platform behavior.
Benefits based on user feedback
User feedback showed a clear hierarchy of what mattered most on the benefits screen. Data proved that players prioritized earning points for games, game content, add‑ons, and similar rewards. As we iterated, we saw an opportunity to enhance the experience by incorporating UI patterns from the Xbox Store team, specifically their horizontal scroll interaction. This maintained cross-platform consistency, and improved alignment with user expectations and existing platform behavior.
reflection
Working across multiple teams
I worked closely with many stakeholders over the course of this project, including PMs, engineers, marketing, and the Barclays team. There were multiple rounds of iteration and varying feedback throughout this non-linear process. Navigating varying perspectives meant that I had to quickly learn to take in feedback and drive design decisions that resonated with users. While I built trust in each collaborator, I also grew more confident in my own expertise as a designer.
Prioritizing the needs of every user
Acknowledging specific edge cases were key to understanding what each user needs to see at their stage of the application process. In addition to designing clear interactions patterns, I prioritized accessibility from initial user flows to ensuring accessible components within our design systems.
reflection
Working across multiple teams
I worked closely with many stakeholders over the course of this project, including PMs, engineers, marketing, and the Barclays team. There were multiple rounds of iteration and varying feedback throughout this non-linear process. Navigating varying perspectives meant that I had to quickly learn to take in feedback and drive design decisions that resonated with users. While I built trust in each collaborator, I also grew more confident in my own expertise as a designer.
Prioritizing the needs of every user
Acknowledging specific edge cases were key to understanding what each user needs to see at their stage of the application process. In addition to designing clear interactions patterns, I prioritized accessibility from initial user flows to ensuring accessible components within our design systems.