Flash Card

Gamified Credit Card Rewards

Are credit card benefits even worth it?

Responsibilities

UX Design

UI Design

UX Research

Branding

Team

Concept

Date

2022

Quick Summary

I was recently out of the country, I was using a lot of my credit card benefits to finance the trip (specifically the flight as well as some hotel accommodations). I had more struggles than I anticipated in using my credit card benefits in the way that I wanted. I wanted to come up with a solution for the struggles I encountered.

*yellow highlight is to aid in speedy scan-ability

Problem

Complexity in redeeming credit card rewards is causing users to miss out on the rewards they deserve.

Problem in context

Understanding the Problem

Credit card rewards programs in general are a math problem. It's about understanding and gaming the system that may be more complex than it needs. As profit is directly correlated to the use of rewards, there are always slight restrictions that make things a little bit more complex. There wouldn't be businesses such as NerdWallet, ThePointsGuy and multiple Youtube/TikTok Channels in analyzing how to maximize use of benefits if the programs were simplified.

Goal: Make points super simple to use πŸ”‘

Market Research What does finding the right card with right benefits program look like?

Analyzing the right card for you, in even the best design setting is complex, it's a math problem.

User Research User Interviews I chose user interviews as the method because it allowed me to get the most breadth of credit card use, the pain points and ability to elaborate on wins and fails with current credit cards in the market.

Summary of User Interviews (4 people)

User Research Survey Shareable Typeform survey was a good way to get some more random users outside of my own network and get exact answers. Summary of Typeform Survey (10 people)

Mapping

Mapping out the journey in redeeming credit card points for a user.

One of the key pain points is the emotion when a user is unsure if they can use the points in the way that they intended. This involves a lot of research and math to understand whether it was the right purchase or not. Not full satisfaction until completion of redemption of points. Key point: Confidence in knowing the purchase is complete is key, as well as transparency that the points are mathematically worth it.

Insights - what to optimize for

In user interviews as well as tyepform survey results it became clear that users weren't fully satisfied with the ease of redeeming credit card rewards, as well as the transparency in how they can be used. There is some levels of manipulation in numbers that make it feel like a math problem (specifically with having an annual fee with high rewards that make it seem equal). People want simple solutions, instant satisfaction is key in cash back rewards vs having to jump through hoops and hit potential restrictions. Some users keep building up rewards with intent to use them, but never actually end up doing so.

Differentiators from other cards to consider:

Who are we designing for?

1. Gamer / Social media active user (clout)

  • Likes to benefit from cash back rewards and instantly remove purchases (ease of use and transparency)
  • Loves gaming and the status and boosts involved in the culture.
  • Like status signals
  • Likes sharing on social (venmo)

2. Credit Early Adopter

  • 1st Credit Card
  • Wants to build credit but keep to what they're used to doing (easy)
  • Likes to use venmo
  • Not a lot of money
  • Values sharing benefits with friends to go on trips (transparency)

What do users need? Ease of use in cash back benefits + Transparency in use of points

Both personas would need a level of ease of use. It can't be the key differentiator of card, but something that users feel a level of transparency in points in earning them and using them (cash back rewards). Being able to use points right away could be a way to attract both types of users (sharing points with sign up incentive). It moves into the realm of gamification and fun associated with cards.

Constraints: Some additional things to keep in mind (startup mindset)

Potential Solutions:

  1. Make using rewards super simple with mobile interface
  2. Showcase realtime rewards - make users feel like a purchase was redeemed instantly
  3. Make points shareable among users
  4. Make cash back % < 3% for all purchases
  5. Design a whole new cryptocurrency for a credit card

Evaluation of Solutions

1. Low Effort / High Impact (left)

Make using rewards super simple with mobile interface

2. Market Uniqueness / Cost (middle)

Make points shareable among users

If executed in a clever way, this would definitely be the most unique feature available.

3. Marketing Virality / Cost (right) Make points shareable among users

By making points shareable, you make each event of sharing points a potential event for marketing and virality. This would be super important in the early days of a startup and getting off the ground.

Solution: Make points shareable among users πŸ”₯πŸ‘

This solution makes the most sense for our users as it provides the cash back rewards they want, it expands the ability to use them, it provides transparency, and it makes them super easy to use. This will play hard into the execution and marketing of the product at launch day as well as the potential growth due to interactions among users. Transparency is very key, but that can be done easily within the app, especially with sharing points there must be an assigned value to it.

Sketching and Ideation

Some early wireframes with the concept of shareability (community), transparency and ease of use on mind. I wanted to explore some levels of fun and gamification with points- this would create a situation for users where it doesn't feel fully business style like most credit cards. I did this with adding a flame icon to the card (status level that you can continue to earn. This also applies a level of transparency because you know exactly what status you're at with points.

Potential features and requirements

I apply solving user pain points - Make shareable points, transparency in points usage. Then follow up with needs for the user. I like to list out things as what I might want as a user, then filtering that down to what I need as a user in the most simple form (mvp), then simplifying further in what I need for each individual screen.

The Feed - Displaying Transactions Needs: Display transaction Display shared transactions Display redeemed transactions Transaction details: Amount, Location, Time, Status Wants: Sift through transactions by type Search through transactions by name

Transparency in Points

Goal: Show points in a meaningful way that feels safe and touchable for user.

I wanted to create a way where you visibly see points and your current status at any time without feeling like I might tap something else (touch luxury).

Not unlike a game, I want to know my status level, points, and a progress amount that shows how much it will take to get to the next level.

  • How many points user currently has?
  • How many have they earned within a period?
  • What purchase categories?

Pay / Share Points

Designing a flow in sharing points within the community to make it a simple and fun experience.

Both Venmo and CashApp are inspirations for this

  • Use of QR code
  • Searchability for users to share points with
  • Showing translation between USD and Points

Mapping it out

Sketches User Feedback

Positive πŸ‘

Negative πŸ‘Ž

Style - Explorations fintech type apps and color schemes

HiFi Iteration 1 - Exploring base UI

The goal is to show most basic form:

HiFi Iteration 2 - Exploring styles of eliminated

I explored several ways in showing removed purchases. The goal is to immediately signal to the user that a purchase was removed.

HiFi Iteration 3 - Feed with Dock vs Dockless

It was a little confusing without the dock as much as it seemed cleaner in the beginning.

HiFi Iteration 4 - Pay a user flow

Explored the making a payment and populating the social feed (for network effects)

Payment User Flow

I wanted something super simple in only a few taps. Optimizing for contacts use early in onboarding will be key to easy selection of friends, but the QR code would aid in anyone that didn't want to add contacts. One key thing to think about was the translation of dollars to flash points. I felt the dollar made the most sense to be more prominent. You need to remove the math for the user.

Rapid iterations in UI

Some explorations that went along with testing in prototype. Annotations below image. As much as I loved supporting the dark mode style, it just didn't feel as serious of an app in fintech without the lighter color. Gamified is a good thing, but only to an extent.

Flash Card

Make Your Purchases Disappear

UX for removing a purchase in flash card

Product Current Status

I'm pretty excited about how the product turned out in it's current state. There are still many refinements to make, but the overall functionality feels good as a user. It's a product i'd like to use.

Wrapping It Up 🎁

How did users respond?

Prototype testers responded well, mostly to the disappearing purchases element and the feeling of viewing full screen their status (card and earned benefits in a month). People unsure on community in sharing a purchase but I think that can evolve.

What's next?

I want to build an MVP of the app, I would need to find someone strong in the financial space to partner with as well as the engineering side. I've reached out to another founder of a credit card app and he was focusing on a similar space (optimizing for best rewards based on card though). It would be important to further study and research gamification and new game theory. Having someone on the team with experience in gaming would be ideal.

Challenges and Learnings

One challenge I think of in the process is just making the business model working in the early days. If you have users redeeming credit card benefits at a rapid rate, how much capital do you need to raise in order to make the model work? Typically cash back rate is around 2-3%.

Another challenge I came with was that sometimes talking about finance with people can feel a little touchy or intrusive but people do like to learn what is out there and potentially optimizing for it. It was interesting to learn about buying behavior. One of the key learnings in this process was understanding what's important in benefits as a user for credit cards. The credit card benefits space seems pretty repetitive though as far as what types of cards exist and what benefits they provide. There's a game in making benefits seem valuable, but a lot of users aren't using the benefits the way they'd like. If it involves a phone call to make it happen, the dropoff rate in benefit redemption is much higher.

What would you change?

I would've changed my approach to putting placeholder user icons in the early stages, I thought it was playful to have a smiley icon w/tongue out and in general it just seemed like less of a serious product for people.

I would've made use of more templates in finance to iterate quicker on ui in the early times. I ended up tweaking a little too much, especially on trying to make dark mode color work and would've been better with a simple starting point.

I also would've done more research with different age groups to further understand what the app could optimize for.

Would you use Flash Card?