I designed a prepaid card company's mobile site so people could get a card, check their balance and fees, and add money from a phone.
In 2013 I designed and tested the mobile site for a prepaid card company whose customers were often shut out by banks. People new to banking could get a card in short steps, see their balance and fees at the top of every screen, and choose a way to add money after seeing its cost and timing.
Client
A prepaid card company
I changed names and details to respect my nondisclosure agreements.
My role
Product researcher and designer
Focus
Mobile site and adding money
Result
Three design rules the whole team used
People checked their money on a phone, often standing at a register.
Most of the company's customers had been shut out by banks or chose not to use one. They managed their money from a phone, and they needed to know their balance and their fees before they paid for groceries or rent.
The company offered ten different ways to put money on a card, and each way had its own name, fee, and wait. I told the team that ten ways would confuse people, that some of the ten did the same job, and that every extra way cost the company money to build and support. My job was to find the ways people needed and present those ways so anyone could choose in a few seconds.
I tested every screen on phones with the people the cards are built for.
I ran one-hour moderated sessions with prepaid card customers who were unbanked, underbanked, and banked, and I recruited people who had added money to a card and people who had not. Click or tap a card to turn it over.
Consistency, trust, and simplicity mattered more than any single feature.
Three themes came back in every session. People wanted the messages, the navigation, and the fees to work the same way on every screen. People trusted the company more when they could see who the company was and knew a real person would answer the phone. People wanted fewer choices that each made sense, and some improvements meant taking things away.
I told the whole company that empathy was the first rule, whatever a person's role. The more we understood the people who carried the cards, the better we could serve them.
- I set one pattern for messages, navigation, and fees, and I kept that pattern on every screen.
- I say why the company asks for each personal detail, what the company does with the detail, and how the company protects the detail.
- I keep a real person one tap away by phone or chat.
- I group the ways to add money by when the money arrives, so people can choose in a few seconds.
- I show the fee and the wait for each way to add money before anyone starts.
- I keep the balance and this month's fees at the top of the home screen.
Check your balance, see your fees, and add money in a few taps.
I rebuilt my 2013 mobile designs in a current style, under the placeholder name Haven Prepaid. Every name, amount, fee, and store in the prototype is sample data.
Things to try
- Start on Home, where your balance and this month's fees sit at the top.
- Tap Add money and compare the cost and the wait for each way.
- Choose From a debit card, pick an amount, and check the fee before you confirm.
- Choose Deposit a check, and then pick a personal check to see how the app explains which checks the app takes.
- Pick up the $40.00 Sam sent, using the sample codes, and watch your balance change.
I used the Haven Prepaid palette, so the app and the website feel like one company.
These are the colors, type, and parts the prototype above uses. They match the Haven Prepaid website case study, with a dark header and a lime stripe that mark the money screens.
Color
- Ink
#121212Ink is used for body text, the header, the balance panel, and primary buttons. - Haven lime
#8CFF40Lime is a solid fill for the Add money button, free fees, and the stripe under the balance, always with ink on top or set against black. - Graphite
#3B403AGraphite is used for secondary text on light surfaces and for the timing chips. - Money green
#00701AGreen marks money coming in and fills the fee bar, always paired with a plus sign or words. - Mint
#EDFBE3Mint fills the tiles behind icons, always with ink on top. - Surface
#F5F7F2Surface is a quiet neutral for messages, notes, and chips. - Error red
#C2261DError red marks error messages and the note about personal checks, always paired with words and an icon.
Type
Headings
Pick a way to add money.
Plus Jakarta Sans
Balance
$248.60
Plus Jakarta Sans
Body and labels
Nothing moves until you confirm.
Plus Jakarta Sans
Components
Balance panel
The balance sits in large numbers on a black panel with a lime stripe, so the number people check most is the first thing they see.
Fee counter
A bar shows the fees paid this month and how much more money brings the monthly fee to zero, in one plain sentence.
Ways to add money
Each way is a row with a short description and two chips, one for the cost and one for the wait, grouped under Set it once, Right now, and In a few days.
Review before money moves
Every way ends on a review that lists the amount, the source, the fee, and the arrival time, with Cancel on the left and the confirm button on the right.
Two-code pickup
Money from a friend unlocks with two codes, and a section that opens explains why two codes keep the money safe.
Plain notes
When the app can't do something, such as take a personal check, a short note says what the app takes and offers another way.
Principles
- I show the cost and the wait before anyone starts.
- I explain why the company needs a detail before I ask for the detail.
- I keep one pattern on every screen, so nothing surprises people.
- I make every button and field large enough for a thumb.
The whole company started with the customer's point of view.
My findings reached people in every role at the company, and the design rules shaped the mobile site and the ways to add money. Click or tap a card to turn it over.
When money is tight, every fee and every extra question costs trust.
I bring the same habits to AI-native product research and design today. I put the people a product serves in front of the whole team, I show every cost before I ask for anything, and I take away what people don't need.
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.