People who are new to banking told me what they needed from a prepaid card, and I rebuilt the site around their words.
In 2013 I researched and redesigned how a prepaid card company explained and sold its cards on the web and on phones. The new design let people compare cards side by side, see every fee up front, and get a card in language they already use.
Client
A prepaid card company
I changed names and details to respect my nondisclosure agreements.
My role
Product researcher and designer
Focus
Prepaid cards for people new to banking
Result
Launched across web and mobile
The site asked for personal details before it answered a single question.
The company sells reloadable prepaid cards, and many of the people who buy them have been shut out by banks or don't want a credit card. Before I redesigned anything, I bought a card and loaded money onto the card myself, starting from my phone in the parking lot at work. The first mobile page I landed on asked for my information before it told me anything about the card, so I backed out.
The home page was beautiful, but the facts people came for were hidden inside a slideshow and sales messages. I wrote one goal for the whole site: self-service. Anyone, customer or not, should be able to find the facts quickly and help themselves.
I tested every idea with the people the cards are built for.
I ran one-hour moderated sessions with people who were unbanked, underbanked, and banked, first on the website and then on phones. Click or tap a card to turn it over.
It is their money, so the words and the fees belong up front.
The same themes came back in every round. People learn about prepaid cards from friends, family, and church. Many carry several cards from different companies and mix up the features. They grow suspicious of the word "free", and they want to know when, how, and why a fee happens before they sign up.
When an error appeared, people started over or reached for the phone instead of searching the site for help. Many people read FAQs as "facts about the cards". Those moments turned into design rules the team could use on every page.
- I lead with the word people use, then give the legal term, so "check cashing place" comes before "financial services center".
- I put the cards side by side, so the customer makes the choice.
- I show every fee before the sign-up form starts.
- I use yes and more, because words such as no and none felt bad next to someone's money.
- I write error messages in active, positive language that says how to fix the problem.
- I design for the phone first, because people check their money on the go.
Compare the cards, pick one, and get started in plain language.
I rebuilt my 2013 choose-a-card and get-a-card flow in a current style, under the placeholder name Haven Prepaid. Every card, fee, and name in the prototype is sample data.
Things to try
- Pick a card at the top, then open Fees to see every cost.
- Tap Compare and choose a card from the side-by-side view.
- Press Continue to review with the form empty to see how each error explains the fix.
- Fill in the sample details, agree to the terms, and finish on the confirmation screen.
I gave the flow a bright, current look and tuned every color so people can read it.
These are the colors, type, and parts the prototype above uses, rebuilt in a modern fintech style around a bright lime and green palette.
Color
- Ink
#121212Ink is used for body text, eyebrows, icons, primary buttons, the selected tab, and the black Everyday card. - Haven lime
#8CFF40Lime is a solid fill for check marks, price tags, finished steps, and the Savings card, always with ink on top or set against black. - Mint
#EDFBE3Mint fills the tiles behind section icons, always with ink text. - Graphite
#3B403AGraphite is the Pay as you go card, with white text and a lime stripe. - White
#FFFFFFWhite is the page background and the text color on the black Everyday card and confirmation panel. - Surface
#F5F7F2Surface is a quiet neutral for the tab track, the chosen card strip, and the agreement box. - Error red
#C2261DError red marks error summaries, field borders, and error messages, always paired with words and an icon.
Type
Headings
Pick the card that fits how you spend.
Plus Jakarta Sans
Body and labels
Here is every fee, so nothing surprises you later.
Plus Jakarta Sans
Eyebrows
No credit check
Plus Jakarta Sans
Components
Card chooser tile
Each tile shows the card itself with its name underneath, because people told me the physical card is the product.
Sections that open
About, Fees, On your phone, Your account, and Privacy and security stay closed until someone asks for more, which lets a quick reader get the point and a careful reader dig deeper.
Side-by-side comparison
Every card lists the same facts in the same order with its own choose button, so the customer makes the decision.
Progress bar
Four segments and a plain label show where someone is in getting a card, and finished steps turn green.
Error summary
A red box at the top lists each problem as a link to the field, and every message says how to fix the problem in positive words.
Fee table
Each fee leads with the everyday name, such as adding cash at a store, and puts the amount right beside the name.
Principles
- I lead with the words people use, then give the legal term.
- I show every fee before anyone fills in a form.
- I write error messages that say what to do next, in active and positive language.
- I make every button and field large enough for a thumb on a phone.
Over 80%
of the company's users were on mobile, which is why the phone came first in my designs
The team started designing from the customer's side of the counter.
My work had an immediate impact on the culture at the company, and the redesign launched two years later. Click or tap a card to turn it over.
Plain language builds trust with people the banking system has marginalized.
I bring the same habits to AI-native product research and design today. I test with the people a product serves, I use their words, and I show the cost before I ask for anything.
There is plenty more where this came from.
Names, brands, and data in my case studies are changed to protect my clients.
Tell me about your project.
Tell me a little about it on my contact form, and a real person will get back to you soon.