← Back to work Case Study — Citi

A calculator that makes upgrading obvious

An interactive points calculator, pitched by my team, that moves cardmembers from a no- or low-fee card to a higher-fee one — more fee revenue for Citi, more points and rewards for the customer. Built to flex across every device and still pass legal, brand, and every stakeholder in the room.

Client

Citi — Cards Business

Role

Creative Director — led team & presented to stakeholders

Partners

Product, Legal, Risk · Acxiom (build & deployment)

Type

Interactive microsite, slider-based rewards calculator

The Citi Strata Premier Card Points Calculator overlay on citi.com, with sliders for monthly spend and a side-by-side points comparison
01 — The Business Problem

Too much of the cards business depended on interest, not fees.

Citi's cards revenue was too heavily weighted toward interest balances — which ties the business's performance to macroeconomic conditions nobody controls. The more revenue could come from annual fees instead, the more stable and diversified the business becomes. The challenge was turning that into something a customer would actually want: no one upgrades to a higher-fee card just because a bank wants more fee revenue.

Marketing could already identify which existing cardmembers fit the right spend and behavior profile for an upgrade. What didn't exist was a moment that made the trade genuinely compelling to that customer — more ThankYou® Points and travel benefits, in exchange for a higher annual fee.

02 — The Solution

Let the customer move the sliders and watch the math do the convincing.

Marketing drove qualifying segments — cardmembers meeting specific spend and tenure criteria — into a targeted microsite built around one interactive moment: three sliders for monthly spend in each bonus category, recalculating in real time how many more ThankYou Points a customer would earn on the upgraded card versus their current one.

  • Three spend sliders (travel & hotels, everyday categories, and general purchases) each tied to the upgraded card's real multiplier, so the projected points total updates live as the customer adjusts their own numbers
  • A direct side-by-side: current card vs. upgraded card, annual points projected, and what those points are worth in travel or gift-card redemptions
  • A foreign-transaction-fee slider that surfaces a second, independent reason to upgrade for customers who travel internationally
  • A three-step upgrade flow — Explore, Accept, Confirmed — so a customer who's convinced by the calculator can complete the upgrade in the same session, with no credit inquiry and no new card number to track down

The hardest part wasn't the concept — it was making it work everywhere at once: every device and breakpoint, on-brand with the card's own look and feel, legally compliant down to the disclosure language on every slider, and acceptable to every stakeholder in the room, from product and marketing to legal and risk. My team did that under my leadership, presented the work with real confidence, and then ran the technical handover with Acxiom, the vendor who coded and deployed the final build on citi.com.

03 — Outcome

Stakeholders aligned, legal signed off, and the build shipped.

The team presented the concept and the UX with confidence, stakeholders across the business were genuinely pleased with the result, and legal cleared the messaging and flow without a fight — a rare combination for a tool whose entire purpose is moving customers to a higher-fee product. It's now live on citi.com, built and maintained by Acxiom off the handover my team ran.

3

live sliders recalculating projected points & fee savings in real time

1 flow

Explore → Accept → Confirmed — upgrade completed with no credit inquiry

Aligned

product, marketing, legal & risk all signed off on the same build

Across devices

Built to hold up from a 27-inch monitor down to a phone in someone's hand.

Card upgrade calculator, mobile
Mobile — the same three sliders, reflowed
Card upgrade calculator, tablet breakpoint
Tablet breakpoint — full calculator, stacked layout
Upgrade response flow, Explore step, laptop
Upgrade response flow — "Explore" step, laptop
Upgrade response flow, tablet
Same flow, tablet
Next project

Citi Travel: Rebuilding the Booking Experience →