Mobile app · UX + UI design

Moving GasBuddy’s dining rewards from cash back to points.

I redesigned GasBuddy's dining rewards, taking them from a flat cash-back percentage to a points-per-dollar model, and rebuilt the restaurant detail screen around the information people use to decide where to eat: hours, distance, photos, and reviews.

Role
UX + UI design, flows & wireframes
Client
GasBuddy, at PDI Technologies
Status
Shipped, live in production
The change

GasBuddy's dining offers used to work like the fuel side of the app: link a card, get a flat cash-back percentage at participating restaurants. Product wanted to move dining onto a points-per-dollar model to drive more engagement. My job was the redesign: the new earning model, the card-link states, and a much richer restaurant detail screen to go with it.

Before: flat cash back

What it used to look like

Two screens carried the whole feature: a list where every restaurant paid the same, and an offer screen that was mostly fine print.

Old GasBuddy dining list — every restaurant shows a flat 2% GasBack
The list

Every restaurant showed the same flat 2% GasBack. Nothing to compare, no reason to pick one place over another.

Old GasBuddy offer screen — a flat 4% GasBack, a how-it-works list, and a redeem button
The offer screen

A flat percentage, a three-step explainer, and a redeem button. Nothing about the restaurant itself.

After: points, and a reason to choose

A points model, and a screen that helps you decide.

The redesign moves dining onto points per dollar and rebuilds the restaurant screen around the questions people ask before they eat: is it any good, is it open, how far away is it, and what does the food look like.

New GasBuddy dining list with ratings, distance, and open status per restaurant
The new list

Instead of a wall of identical 2% badges, the list now leads with a points offer up top and gives every restaurant a star rating, review count, distance, and a live open/closed label. You can make a decision right from the list.

Inside the new offer screen

Everything I added, zoomed in.

Points header — 40 points per $1 spent
Points, not a percentage

The offer leads with 40 points for every dollar spent, a reward you accumulate and redeem for gas or gift cards. Framed this way it feels bigger than a flat cash-back rate.

Rating, review count, distance and cuisine type
Rating, distance & cuisine

A star rating with review count, how far the restaurant is, and the cuisine type. These are the fast filters for “is this worth it.”

Open until 11:00PM status and hours
Open now & live hours

A clear open/closed label and closing time, plus directions and a website link, so the offer is actually usable when you see it.

Photos of the food and the venue
Photos of the food & venue

Real photography of the dishes and the space instead of just a logo. Nothing pulls people toward an offer more.

Guest reviews with rating and helpful count
Real guest reviews

Recent reviews with ratings, dates, and helpful counts, right where the decision happens.

Card-link states

One offer screen, every card state.

{{ currentAlt }}
{{ stepLabel }} · {{ currentLabel }}

{{ currentDesc }}

Each state points to one clear next step (link a card, start earning, or re-link) and uses the same banner slot at the top of the screen, so the layout never shifts.

Status

Shipped and live in the GasBuddy app. Engagement data on the switch to points is still being gathered, so I don't have numbers to share yet.

Back to all work