One Balance, Four Products, 39 Million Customers
Accrue × Fortune 10 Energy Co. • 2025–2026
85% of a Fortune 10 energy company's customers had no loyalty product that fit them. I designed the program vision and UX to change that.
Jump to solutionDesigned for
Fuel Rewards+ mobile app
Team
1 Designer (me), 2 PMs, Business Strategy, Client stakeholders
Timeline
2025–2026
My role
Program Design, UX Design, Visual Design, Deck Production
THE CLIENT
Accrue × Fortune 10 Energy Co.
Accrue builds white-label wallet and loyalty platforms for enterprise brands. One of the largest fuel retailers in the US came to us with a specific problem: their existing loyalty program had an app, a rewards program, and ~39 million customers. 85% of those customers had no financial product tied to their loyalty account.
The existing structure assumed a single entry point: download the app, earn points at the pump. But the customer base spans four behavioral profiles. Passive Passengers want zero friction. Reassurance Seekers avoid credit. Social Performers chase status. Go Getters want maximum value everywhere. One product can't speak to all four. The penetration gap was a product architecture problem, not a marketing one.
THE CHALLENGE
I designed the program vision and app experience that could close the 85% gap. That meant a four-tier financial products ladder, a unified balance model, and a gift card acquisition strategy for the ~33 million customers with no marketing path into the app.
PROJECT GOALS
- 1Give every persona a door into the financial products ladder
- 2Replace fragmented points, funds, and gift cards with one spendable balance
- 3Make tier upgrades feel like enhancements, not new products
- 4Turn gift card redemption into the first onboarding screen for 33M unreachable customers
THE PROCESS
Ecosystem Mapping
Week 1Mapped the full earning ecosystem: 4 payment types, varying rates, tier multipliers, gift card load mechanics. Ran competitive analysis across Starbucks, Shell, BP, Gymshark, Delta, and Klarna.
Program Architecture + Design Sprint
Week 2–3Proposed the four-tier product ladder (Rewards+ → Closed-loop Debit → Open-Loop Debit → Credit). Each tier adds a new earning channel. Each persona has a natural entry point. Generated 50+ screen variations across balance displays, tier progressions, gift card flows, and earning explainers.
Refinement + Deck Production
Week 3–4Multiple rounds with Jesse Ganes (PM). Fixed the 'too much blue' hierarchy problem, rewrote all explainer copy around concrete dollar amounts, and prepared the final vision deck for the client presentation.
Ecosystem Mapping
Week 1Mapped the full earning ecosystem: 4 payment types, varying rates, tier multipliers, gift card load mechanics. Ran competitive analysis across Starbucks, Shell, BP, Gymshark, Delta, and Klarna.
Program Architecture + Design Sprint
Week 2–3Proposed the four-tier product ladder (Rewards+ → Closed-loop Debit → Open-Loop Debit → Credit). Each tier adds a new earning channel. Each persona has a natural entry point. Generated 50+ screen variations across balance displays, tier progressions, gift card flows, and earning explainers.
Refinement + Deck Production
Week 3–4Multiple rounds with Jesse Ganes (PM). Fixed the 'too much blue' hierarchy problem, rewrote all explainer copy around concrete dollar amounts, and prepared the final vision deck for the client presentation.
THE PROBLEM
The loyalty program only fit one type of customer. 85% had no door in.
The client had thousands of stations, ~39 million customers, and a rewards app. The app assumed one path: download, earn points at the pump. Four distinct customer types needed four distinct products. They had one.
Diagram: 4 payment types with different earning rates, no unified view
Four payment types, four earning rates, zero clarity
Cash earned the base rate. Gift cards earned bonus points on load. The branded debit earned on every swipe. The credit card earned the most. The app made no effort to explain the difference or incentivize upgrades.
Persona map: 4 behavioral profiles with single entry funnel
Four customer types, one entry point
Passive Passengers who want zero friction. Reassurance Seekers who avoid credit. Social Performers who chase status. Go Getters who want max value everywhere. The rewards program treated them as one segment.
Segment breakdown: contactable vs. unreachable customers
33 million customers with no marketing path
A third of the customer base had no email, no app, no contactable channel. Gift cards existed in a separate flow with separate UI. These customers were invisible to the loyalty program.
COMPETITIVE LANDSCAPE
How other programs make earning feel tangible.
I studied 6 competitor apps across fuel, retail, and fintech. Three patterns stood out: show the math, show the progression, show the next milestone.
Starbucks
Starbucks rewards: loading mechanics + reward preview
The gold standard for stored value. $1.8B in customer deposits. Users load cash because the earning multiplier is visible at every step, and rewards are specific (free drinks), not abstract (points).
Gymshark
Gymshark loyalty tiers: tab comparison view
Tab-based tier display that makes progression feel achievable. Each tier has a distinct color, badge, and unlock list. Users see what they get at the next level.
Delta SkyMiles
Delta: tier-based app theme shifts
The entire app theme shifts based on tier. Silver members see chrome. Gold members see gold accents. The tier is the experience, not a badge on top of it.
Klarna
Klarna: expandable earning detail cards
Expandable reward cards that reveal earning details on tap. Clean default state, comprehensive expanded state. Progressive disclosure without visual overload.
THE FRAMEWORK
A product ladder where every customer has a door and every tier earns more.
I proposed a four-tier financial products ladder: Rewards+ → Closed-loop Cobrand Debit → Open-Loop Debit → Cobrand Credit. Each tier adds an earning channel. Each persona has a natural entry point with a clear upgrade path. The design principle: every upgrade feels like an enhancement, not a new product.
Persona-to-product ladder diagram with entry points and upgrade hooks
Each persona gets a door
Passive Passengers enter through the existing rewards app. Reassurance Seekers through the closed-loop debit wallet. Social Performers through the enhanced earning proposition. Go Getters go straight to open-loop debit or credit. Every customer has a path in and a hook to go deeper.
STEP 1 OF 3
Select payment method
Points earning schema with stacked tier earning pills
Each tier adds earning, not complexity
The earning rate schema is additive: each tier you unlock adds a new earning channel on top of what you have. Customers feel themselves getting more without learning something new. The home screen evolves as you upgrade.
Side-by-side: fragmented 3-bucket display → single unified balance
Unified balance replaces three fragmented buckets
Points, loaded funds, and gift card value collapse into one dollar amount. One number, one action, one reason to open the app. The same notification goes from three lines of accounting to 'Your balance hit $40.'
Most loyalty programs fragment value across points, loaded funds, and gift cards. Customers do math before they act. I designed around a unified balance: one dollar amount that aggregates everything. The same push notification goes from 'You have 450 points, $15 in loaded funds, and a $20 gift' to 'Your balance hit $40. Fill up for free this weekend.'
THE UX SYSTEM
Upgrade intent built into the experience, not outsourced to marketing.
The challenge: how do you make customers want to upgrade their financial product without turning the app into a sales pitch? I built four patterns that work together.
Home screen mockup with unified balance callout
Unified balance as the home screen anchor
A single number showing all stored value: loaded funds, rewards, gifts. The balance is real, spendable, and growing. Users see one thing to care about, regardless of which products they hold.
Home screen earning rate strip: current tier + locked tier visible
Earning rate gap indicator
The home screen shows the customer's current rate alongside a locked tier. The gap is visible without a single sales message. Jesse and I debated whether to show multipliers (3X) or dollar amounts ($1.50). We went with dollars. Concrete scenarios beat abstract rates for someone at a gas pump.
Prompt card: 'Accelerate Your Rewards' and auto-reload nudge
Context-aware upgrade nudges
Loading funds triggers an auto-reload prompt. Approaching a milestone surfaces a credit card offer. The upgrade is one tap away from wherever the customer already is.
Earn / Accumulate / Spend three-screen flow
Balance boost from day one
Any app user can load funds and earn extra rewards before they have a card. The wallet is useful before the customer has any financial relationship. Loading cash earns rewards from day one, creating a reason to return.
SOLVING 'TOO MUCH BLUE'
Everything was blue. Nothing stood out.
The client's brand palette runs heavy on blue: primary, dark navy, light teal. I applied it to every element and got a screen with zero hierarchy. The balance, the CTA, the earning rate, the tier badge: same blue family. I had to break the brand rules to serve the brand.
Before: 5 blue CTAs competing for attention
Five competing CTAs on one screen
The initial home screen had Load Cash, View Offers, Upgrade Card, Find Station, and Check Balance, all styled as primary blue buttons. I flagged this as the top usability issue and reduced to one primary CTA. The rest became secondary actions.
Before/after: blue-on-blue chips → high-contrast earning display
Earning rate chips were unreadable
Small blue chips on a blue card on a blue background. I moved earning rates to high-contrast containers with specific dollar amounts ('Earned $1.50') instead of abstract multipliers ('3X points'). Jesse's feedback drove this change after the first review.
Color hierarchy: brand blue frame, warm accents for progress/rewards
Warm accents for progress and rewards
Gold for tier progression. Green for earned amounts. White cards for content separation. Brand blue became the frame. This kept brand compliance while creating the hierarchy the original palette couldn't provide.
THE GIFT CARD HOOK
The gift gets them in the app. The earning keeps them there.
For ~33 million non-contactable customers with no marketing path, physical gift cards become the acquisition vector. I designed the redemption flow as a loyalty onboarding ramp.
Gift card redemption flow: redeem → balance appears → bonus points → dashboard
Gift card redemption as app onboarding
A customer redeems a gift card, sees their balance in the app, and receives bonus points on top. The moment they hit the dashboard, they're a loyalty member with a balance to spend and an earning rate to improve. The gift card is the first onboarding screen for 33 million people who would never have downloaded the app on their own.
Gift card earning model: points awarded at load time
Earn on load, not on spend
Gift cards earn bonus points when added to the balance, not when spent. This distinction changed the UI: the celebration moment happens at redemption, not at the register. I caught this after designing it backwards in the first pass.
STEP 1 OF 3
Select payment method
Fuel Your Rewards explainer: 4-tab earning breakdown
Tabbed upgrade surface inside the app
The in-app upgrade surface shows product-specific value props through a tabbed interface (Overview, Debit, Credit, Gift Card). A customer who entered through a gift card can explore the full ladder on their own terms, without leaving the app.
THE TIER SYSTEM
Four tiers. Four visual identities. One clear ladder.
I designed a progression where the balance card transforms as users upgrade. The card evolves in color, texture, and information density. You can see your tier at a glance.
STEP 1 OF 3
Select payment method
4-tier progression: Base (light) → Bronze → Silver → Gold cards
Base → Bronze → Silver → Gold
We tested fuel-grade names (Regular, Plus, Premium, Supreme) but 'Plus' conflicted with the product name. Metallic tiers landed better: universally understood, aspirational without explanation, and they map to visual treatments naturally.
Side-by-side: Base card (simple) vs Gold card (rich detail)
The card evolves, not a badge
Each tier has a distinct gradient, border treatment, and layout. Gold cards show lifetime earnings. Base cards emphasize the next milestone. The card tells you where you stand.
Consistent brand blue bar across all tiers, accent colors below
Brand bar stays, tier accents change
Jesse and I debated whether the navigation bar should change color per tier (like Delta) or stay consistent. We chose brand blue for the bar with tier-colored accents below. Brand recognition first, status signaling second.
Progress bar: '$47 more to Silver' with visual fill
'$47 more to Silver'
Every tier shows a progress indicator toward the next level with a specific dollar amount. Not a percentage, not a vague bar. A number tied to behavior the customer controls.
FINAL DESIGNS
The complete rewards vision, screen by screen.
From unified balance to tier progression to gift card onboarding. 50+ screens across 10 categories, designed to make a complex loyalty ecosystem feel simple.
Home screen: unified balance with tier badge and earning rate gap
Home screen: one balance, one tier, one earning gap to close
4-tier card progression: Base → Bronze → Silver → Gold
Tier cards that evolve in color, detail, and aspiration
Fuel Your Rewards explainer: 4-tab earning breakdown
Explainer with real dollar amounts, not abstract multipliers
Gift card redemption flow: add to balance + earn points
Gift card hook: earn bonus points on load, enter the loyalty ladder
Persona-to-product mapping: 4 entry points into the product ladder
Four personas, four doors, one ladder
Full vision deck: complete screen inventory for client presentation
The complete vision: 50+ screens across 10 categories for the client pitch
THE IMPACT
$200M+
Cobrand Debit revenue opportunity
Unlocked at 1.1M projected customers through the product ladder's debit tier.
39M
Addressable customers with a product at each entry
Four personas, four entry points. The ladder closes the 85% penetration gap.
33M
Unreachable customers given an acquisition path
Gift card redemption becomes app onboarding for customers with no marketing contact.
4 → 1
Fragmented buckets → unified balance
Points, loaded funds, gift card value, and credit rewards collapsed into a single spendable number.
The design vision helped Accrue win the contract. The product is in program design now, with development ongoing. The four-tier ladder, unified balance model, and gift card acquisition hook gave the client a concrete picture of what their app could become.
LOOKING BACK
Program design is UX design
The most impactful decision happened before I opened Figma: choosing a unified balance over fragmented buckets. That single information architecture call at the program level determined what was possible at the screen level.
Earning gaps beat earning rates
Showing customers what they could earn, right next to what they are earning, does more than any promotional copy. The locked tier indicator on the home screen outperformed a dedicated upgrade marketing surface in every PM review.
Color is information architecture
The client's brand palette is all blue. I applied it faithfully and got a screen where nothing had hierarchy. The balance, the CTA, the tier badge, the earning rate: same blue family. I broke the brand rules with warm accents for progress and rewards. Brand blue became the frame, not the content.
WHAT I'D DO DIFFERENTLY
I would have pushed to interview gas station customers earlier. The earning rates made sense to us, but we never tested whether a 4-tier system feels motivating or overwhelming to someone filling up their tank.
LOOKING AHEAD
In program design now. Adapting explorations into a production design system with the client's real data, actual tier thresholds, and POS integration.