A payment link in a text message has to prove it is real before anyone will tap Pay.
In a design challenge, I redesigned a consumer payments company's text message payment link and its Autopay setup. The new page tells people who is asking, what the money is for, and how to check, and Autopay shows every date and amount before anything is charged.
Client
A consumer payments company
I changed names and details to respect my nondisclosure agreements.
My role
Sole researcher and designer
Focus
Text message payment links and Autopay setup
Result
A redesign, reusable components, and a clickable prototype
The link worked, and people still had reasons to hesitate.
This was a design challenge in 2025. A consumer payments company sends borrowers a link by text message, and the borrower pays a car loan bill from a phone without logging in. The brief asked me to make Autopay, the automatic monthly payment, easier to trust and easier to choose. Company and product details are anonymized.
The existing link had real strengths: fast entry with no login, a clear amount due, and a mobile-first layout. The trouble sat around those strengths. The first screen never said who was asking for money, Autopay was easy to miss, and the success screen never said when the next charge would happen.
I set three goals for the redesign: 40% more Autopay enrollment, 50% fewer support calls, and 25% more on-time payments. These are goals for a team to test against after launch. They are not results.
I audited the current flow through three lenses.
Each lens asks a different question, so together they show where a person stalls and why. Click or tap a card to turn it over.
Every gap I found came down to five questions.
When a payment flow leaves a question open, the person either guesses or calls support. I mapped the questions Maria's journey raises at each step. The fourth question matters most to me, because a link in a text message looks like a scam until the page proves otherwise.
In a persona quote, Maria puts the need plainly: "I want to make sure I know what's happening with my money and how to change things when I need to." That sentence became the test for every screen I drew.
- "When will my first Autopay payment process?"
- "Will I be charged today?"
- "Can I change Autopay later?"
- "Is this link secure and legitimate?"
- "Why is this payment method shown first?"
I rebuilt the flow around trust, clarity, confidence, and control.
Each pillar answers one of those questions with something a person can see on the screen. Click or tap a card to turn it over.
Tap through the payment link, from the text message to Autopay.
This prototype rebuilds the redesigned flow with sample data in a current consumer payments style, with Haven Pay as the platform behind a made-up lender. Every name, amount, and date is made up.
Things to try
- Tap the link in the text message, then open the steps for checking that the message is real.
- Pay the amount due once, then review and confirm the payment.
- Set up Autopay and watch the plain-words summary change with each choice.
- Pause the next payment, turn Autopay off, and then turn Autopay back on.
- Open Design notes from the top of any screen to see why each step works the way it does.
A small kit keeps the payment link steady from the first tap to the last.
I pulled this style guide straight from the prototype above. I rebuilt the flow in a current consumer payments style under the Haven Pay name, with square corners, hairline borders, a large amount display, and one clear button per screen.
Color
- Navy ink
#0A2540Body text, amounts, headings, and the dark plain-words summary panel - Indigo
#5146E8Primary buttons, links, selected choices, and the focus ring - Slate
#425466Secondary text, such as labels, fees, and timing - Field gray
#8792A2Input, radio, and switch borders, so every control meets 3 to 1 contrast - Hairline
#E3E8EECard borders, dividers, and row lines - Cool surface
#F6F8FBThe page behind the cards and the text message thread - Success green
#0E7A4DVerified sender, payment received, and the Active badge, always with words - Error red
#C2261DTurn off Autopay and error messages, always with words, and nothing else
Type
Headings
Set up Autopay
Inter
Amounts
$325.40
Inter
Body and microcopy
Nothing is charged until you confirm on the next screen.
Inter
Easier-to-read setting
You can change, pause, or turn off Autopay at any time.
Verdana
Components
Verified sender card
A white card names the lender in green with a shield, repeats the last four account digits from the text message, and opens a numbered list of ways to check, so trust comes before any request for money.
Amount display
The amount due leads the landing page in large tabular figures, with the due date, the account digits, and the principal and interest split underneath, then one indigo Pay button.
Plain-words Autopay summary
A navy panel turns every Autopay choice into one sentence with the real amount, day, and start date, and the sentence updates as each choice changes.
Choice row
Each option is a square row with a hairline border, a radio dot, and an optional icon, and the selected row gets an indigo border and a faint indigo fill.
Upcoming payment list
Each scheduled payment shows a square date tile, the date, the account, and the amount, and a paused payment is struck through with a dashed tile so the change is easy to see.
Autopay status badge
A small square outlined badge reads Active, Off, or Next payment paused, so a person can see the state of Autopay without reading a paragraph.
Principles
- I put who is asking above any request for money.
- Every promise about money shows a real date and a real dollar amount.
- Each screen gets one primary button, and the way back stays in sight.
- Indigo marks the next action, green means verified or done, and red appears only where money stops or something needs fixing, always with words.
- Every color pair meets WCAG 2.2 AA contrast, and high contrast mode is one switch away.
A redesign ready for usability testing and engineering handoff.
Because this was a design challenge, the results are the design and the plan to prove the design works. The enrollment, support call, and on-time payment numbers stay goals until a team tests them with borrowers. Click or tap a card to turn it over.
Trust runs through all of my payments and fraud work.
A real payment link and a scam text can look the same on a small screen. This challenge let me design the difference: a page that tells people who is asking, what the money is for, and how to check before they pay a cent.
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.