Hai Le About Home


Growing a cashback rewards program




UI/UX designer, user researcher


1.5 months


285% increase in number of linked cards, year-over-year

What is Shopkick?

Shopkick is an app (for iOS and Android) about earning rewards when doing in-store shopping. Shopkick works with large retailers like Macy’s, Best Buy, Target, and others in order to provide “kicks”, which are points that can be redeemed for gift cards. Kicks can be earned by walking into stores, scanning barcodes, making purchases, and submitting receipts.

The users are typically price-conscious middle-aged moms, due to their prevalence as the primary shoppers of their households across the United States.

Why start this project?

This project was started because we weren't seeing very many people using this feature, compared with our other kick-earning actions. However, I saw an opportunity to promote a feature that was a truly seamless user experience: once users joined the program, they could pay like they would normally at a store, and they would earn rewards for doing so. Other kick-earning actions required users to use the app at the store, which users often forgot to do. With this feature, users wouldn't need to remember anything at all.

The existing experience before this project was completed.

We identified multiple issues, with the help of user surveys and in-person user testing. The things we saw were:

1. Users didn't understand the program

They weren’t sure why they should sign up, or what the benefits were.

2. Users didn't trust us with their credit card info

Credit card information is always sensitive, but Target (a partner) had suffered their own credit card scandal not long before.

3. The flow was inefficient

Many users dropped off at various points, rather than finishing the flow.

Setting project goals

Based on these nuggets of information, we created goals for this project:

1. Explain the benefit of participating in the program clearly

2. Give a better sense of security and legitimacy to users around this program

3. Cut out unnecessary screens that would get in the way of a successful conversion

We also determined that the key metric we wanted to drive was the number of linked credit cards.

Designing with user context in mind

After setting the project goals, I had to visualize the user flow, to see where changes needed to be/could be made.

I saw that there were three different entry points into this experience: the Help/FAQ screen, the Settings page, and individual Store pages (e.g. Target, Best Buy, etc.). This meant that the experience I designed would ideally convey the right information at the right time, depending on a user's context. For instance, a user entering this experience from the Best Buy store page would want to know how many kicks can be earned at Best Buy with this program. However, if a user is coming from the Settings page, then we aren't able to provide that information, since each store offers a different amount of kicks.

I then needed to come up with a list of what pieces of information a user might need to have during this experience, so that I could decide which pieces would be needed from each entry point.

I took this list, and started to place them into rough wireframes for the screens, taking the order of the modules into consideration. In order to save time in design and development, I thought it would be most helpful to make modular units that could be re-used in each different case. It also meant that we could experiment with the ordering of the units to obtain the best possible results from our design.

I saw 2 different variables that could dictate the different cases:

1. Whether a user has linked a card already or not

2. Whether a user is coming in from a store page, or from a generic source (Settings or Help screens)

This made for 4 different cases to design for.

Creating the visual design

The visual design in the existing experience helped to make this program feel unprofessional and unsecure. So, I needed to make this feature match our new visual style, as well as address those concerns.

I used the credit card companies' logos where appropriate/possible, to associate our feature with things that they were familiar with and already trusted. Language was also added around this program being "free and secure", as we wanted users to feel safe knowing that no harm would come to them if they linked their credit card with Shopkick. I also added imagery and iconography to make the page match our brand's feeling of approachability and fun.

User testing the designs

Before shipping out our final product, we wanted to do a gut check and see how users reacted to this experience. We were able to get our testers to understand and explain what the program was about after viewing this experience.

The final product

In short, I set out with the goal of getting more users to understand and trust this feature; and I did so by ensuring that Shopkick would provide them clear, relevant information at every step of the user flow.

To continue keeping the user informed at all stages of the kick-earning process, I added notifications to the experience that would let users know what was happening with their purchase. Users could shop and pay as they normally would, and shortly after, receive a push notification with an update on their kicks. Messaging the "pending" state of kicks was important, as return periods differed between stores.

At the end of this project, we saw a 285% increase in linked cards, year-over-year. Ideally, we would have run an A/B test alongside the existing experience, but as a smaller company, we needed to move fast. We also didn't see the need to devote resources to monitoring a change that was low-risk and universally seen as necessary.

Throughout this process, we did not utilize any marketing efforts on this feature, so the improvements we saw were entirely from the changes within the experience. I imagine our results would have drastically been improved, had we explored ways to highlight this feature at the top of the funnel.