FRF PayTech
A landing page for an adaptive-credit card, rebuilt to explain how the limit grows instead of asking visitors to trust a quote.
- Type
- Fintech landing page
- Role
- Product Designer
- Timeline
- 4 weeks, concept to landing page
- Tools
- Figma, Figma Prototyping
what's different, first
the rule, not a promise
the total before you pick
Overview
FRF PayTech, a product under FRF Group, is an adaptive-credit card: one card with a limit that rises as the cardholder pays on time, plus installment plans on bigger purchases. I designed the landing page a first-time applicant sees: what the card does, how the limit grows, what it costs, and a way to check a starting limit.
Problem
Most card pages default to one of two modes: dense fine print about APRs and tiers, or a glossy card render with little explanation. Neither tells someone comparing three finance apps in one evening why an adaptive limit matters, or gives them a reason to trust a card they've never heard of.
Process
- 01I opened on the mechanism: the headline says the limit grows, and a panel beside the card shows one limit going from $1,500 to $3,000. The first viewport says what's different before it asks for anything.
- 02I made the primary action 'Check your starting limit', with the note that checking doesn't touch a credit score, and kept 'See how it grows' as a text link. The first draft had Apply and Learn More as two equal buttons.
- 03I replaced the testimonials with a worked example. My first draft had three cardholder cards running on lorem ipsum and stock headshots; the redesign shows one example cardholder's limit at month 1, 4, and 7, with the rule that moved it, labeled as an example.
- 04I cut the 'Partnered with' trust bar. Its logos were placeholders, and a row of fake partners undermines exactly the trust it's meant to build.
- 05I showed installments where they happen, on a purchase in the app: the monthly amount, the rate, and the total for each plan, before the person chooses.
- 06I put every fee on one screen as a plain two-column list, so the fine print people usually have to dig for becomes one short table.
The proof section, twice
v1: lorem ipsum posing as proof
v2: an example, labeled as one
Design system
The page runs on two surfaces: paper (#f3f5ef) for reading, and forest green (#0d3b2e) for the parts about the card itself. Lime (#b8f36b) appears only on the actions, the latest bar in a chart, and the logo mark, so a visitor scanning for what to click finds it. The mark is five rising bars, the limit growing, and it returns on the card face and as the bars in the example. Type is Schibsted Grotesk, heavy and tightly set for headlines, plain for reading. Buttons are 12px rounded rectangles; secondary actions are underlined text.
- Forest#0d3b2e
- Deep#082a20
- Lime, act#b8f36b
- Paper#f3f5ef
- Ink#0f1a16
Outcome
I designed and prototyped the full landing page: nav, hero with the card and limit panel, how the limit grows, installments, fees, and a closing call to check a limit, plus the first draft kept for comparison. Before handoff, I'd test whether the worked example reads as a promise. A visitor could take '$3,000 by month 7' as a guarantee, and the copy around it would need to change if they do.
Reflection
Cutting the testimonials was right and it left a hole. A card nobody has heard of now has no social proof on its landing page at all, and the worked example explains the product without telling anyone that real people use it. I'd still rather ship the gap than three invented quotes. The first real cardholder stories are the thing this page is waiting on, and I'd design that section again once they exist, not before.