Rewards App
Mobile product design | Research
January 2022 – May 2022
Project Overview
Towards the end of 2021, the Rewards App — an app where users can take surveys and check in to earn points towards different prizes — had undergone a marketing rebrand effort which involved bright colors, large text, and blocky illustrations to represent a gamified experience. The branding looked beautiful in marketing materials; however, it didn’t translate well into product design.
Marketing material examples
Old app screens
Challenge
Due to poor UX, accessibility issues, and the glaring visual design, the Rewards App was bleeding users, who riddled the app’s app store listing with negative reviews. This was damaging to Foursquare’s business as its enterprise products relied on first party data from the Rewards App.
In Q1 of 2022, I was tasked with redesigning the app experience — not only to be more usable and intuitive, but to find opportunities to make the app feel enjoyable as well. After all, it is called the Rewards App.
Solution
Through several rounds of research, meeting with stakeholders for feedback, and usability testing my designs, I delivered upon:
A new home screen design
A redesigned prize redemption experience
Illustrations for splash screens and iconography
Animations for onboarding and check out experiences
The following numbers represent the impact of the features 30 days after release.
174%
250%
increase in check-ins
increase in check-in bonuses*
13%
39%
increase in surveys taken
increase in prize redemptions
*Check-in bonuses refer to the extra points users get from checking in 3 times per day
Process
Prioritization
As the sole designer on the Consumer Team working with a small team of developers, we had to identify the highest impact issues to address first. The most obvious were the home screen and the prize redemption experience based on conversion data and app store reviews.
App store reviews for the Rewards App
The Home Screen Redesign
Old Design
The intent of the original home screen was to keep it very simple (imagine a ‘90s game screen) in order to keep the users’ focus on the task at hand. Yet, it missed the mark on delivering an intuitive experience that helped the users reach their goals. Yes – Foursquare wants check in and survey data, and users have to perform these tasks to get prizes. But the users’ end goal is not to take surveys; it’s to earn rewards!
The original design only had one, very easily miss-able entry point to the prize screen — by clicking on the gift icon in the top left corner.
From a UI standpoint, the layout didn’t make efficient use of space. The bright blue background was jarring to look at. Finally, the custom font broke the app layout for users using magnified fonts on their devices and quite frankly, it was hard to read.
Old home screen
Easy-to-miss redemption entry point
Inefficient use of white space + bright color
Hard to read, inaccessible text styles
Uninspiring design
To kick off my design process, I started by collecting inspiration from other rewards applications including Uber Rewards, Fetch Rewards, and SurveyMonkey. Some common themes that I noticed across these apps are that their UIs included bright and fun branding and illustration, and different forms of gamification. Taking note of these, I started to wireframe different home page layouts, playing with different ways to motivate users to earn prizes. Then by process of elimination and combining some elements here and there, I landed on the design that I reasoned to be the most intuitive, enjoyable, and scalable.
New Design
The new design put a heavy emphasis on allowing the users to see prizes, and get to the prize list by providing multiple entry points to the redemption page. I also used a couple of different methods to motivate users to want to earn points. These include using gift card images to entice the user, progress bars for gamification, and a clearer flow for setting goals.
New home screen design
More prominent entry points to prize redemption
Visuals to entice users
Progress bar & points illustration to gamify experience
More intuitive flow & content for setting goals
More intentional use of color
The design was tested via unmoderated A/B testing, task-based usability testing, and a Five Second Test with over 50 users to assess the intuitiveness of the design. The primary goal of these studies was to understand if users were able to find what they were looking for quickly. These tests helped inform things like button placement, information hierarchy, and content communication.
Overhauling the Prize Redemption Experience
Next, I moved on to the prize redemption experience — the biggest pain point of the app. Redeeming points on the Rewards App was a long and mistake-prone process. It depended on Foursquare’s customer support team to manually send gift cards for every redemption, which could’ve taken anywhere from 4-6 weeks!
From a product point of view, it made sense to integrate Tango API, a gift card API that would allow us to automate the process and deliver gift cards within minutes.
And while we could’ve just implemented the backend, the prize redemption UI was a bit of an eyesore too. It was text heavy, tedious, and uninspiring for users to look at.
Old redemption experience
So keeping in mind that we wanted to spruce up the UI/UX without drastically increasing engineering work, I designed a new redemption flow using only existing features from the original experience.
Following similar principles on the home screen, I used gift card images to add visuals to the screen and progress bars to motivate users to earn rewards. In the previous design, users couldn’t see their points balance anywhere and had to make a guess of whether they had enough points to redeem different gift card quantities. I wanted to reduce the cognitive load on users in my design, by displaying their point balance to them frequently and doing the math for them, whether they wanted to redeem a $1, $5, or $20 gift card. Finally, I streamlined the checkout experience by auto populating the user’s contact information with their account information.
New redemption experience
Next Steps
The home screen feature was released in April 2021, and the new redemption experience in October 2021. After this, our Consumer Team shifted our focus to another one of Foursquare’s consumer apps, leaving this one on KTLO. Thus, there were no follow up iterations or updates to this work.
