Brittany MasloA prospect spends, on average, 11 minutes on your site. If you’ve designed a strong portfolio site, backed by UX research from the Baymard Institute, then they’ve spent 11 minutes on your site.
They are engaged by the case studies that you have created. They have zoomed in on the typography of your website to read more. You have got your elephant converts.
The default template for Stripe Checkout (which can be turned off to be embedded as a form in your site) is a plain gray Stripe form with a default sans-serif font and zero trace of the brand that your potential client fell in love with.
The Design Budget Runs Out Before Checkout
Design hours get spent in a predictable order. The homepage first, then the case studies, then the smaller pages nobody spends much time on anyway. By the time a project reaches checkout, the budget and the attention have both already run out.
That’s not laziness. It’s a category error, and it happens on almost every project the same way.
Why Payment Gets Filed as “Backend”
The designer thinks of the payment form as the ‘backend’ of their site, similar to how they consider server configuration and the SSL certificate used to secure their site ‘backend’ too, as opposed to the ‘brand surface’ of their homepage. This is the exact gap covered in Why Modern Websites Are Becoming Complex Digital Systems (And What Businesses Get Wrong), where a site’s technical layers get treated as separate from its brand experience, when clients experience them as one continuous thing.
Stripe Checkout includes a number of templates, and Stripe Checkout ships with a number of these default templates, including a simple centered card with system fonts and a generic blue button. The default templates are well-engineered.
You spent a ton of design time creating all of that visual branded goodness, and in the end, it doesn’t translate to the payment section because the default Stripe payment section looks identical to every single other Stripe payment section on the entire internet.
The Break Costs More at This Exact Moment
Trust signals impact checkout decisions far more than price, says Baymard’s research on cart abandonment in ecommerce (average abandonment rate for checkout pages: 70% across the web).
No one ever has the thought that the colors or the type of the checkout page don’t match the rest of the design of the site.
What Hesitation Actually Looks Like
These pauses are usually visible in simple form, such as re-reading the amount on the payment page or even opening a tab for later (i.e. ‘to be completed later’).
To a solo designer or 3-person studio, however, “for later” translates to real dollars and cents, a financial event with significant implications (e.g. getting to pay rent on time, vs. having to send a follow-up email).
That visual break looked so unpolished, but in reality it had landed on the one point in the flow where hesitation was most expensive.
The Gap Doesn’t End at Checkout
The gap also does not stop at the checkout button. All subsequent documents created for the client also need to look professional. This includes all invoices, receipts, and contracts created for the client. If the studio also has contractors, then they will also need to create pay stubs for them.
A pay stub should be designed like any other document for the studio. It is a design artifact.
The One Document That Gets Filed Away
The pay stub is the one document that clients routinely print out and file away for their accountants in April. The IRS’s own recordkeeping guidance lists pay records among the supporting documents small businesses and contractors are expected to keep on file, which is exactly why the format of that one document matters more than it seems to.
It tells the subcontractor a whole lot of information about the studio’s way of doing business before you ever have a design meeting.
A Low-Cost Fix for a Small Document
For a lean studio short on time, a free tool like Wave’s free pay stub generator covers the baseline version of this problem. The output won’t carry the studio’s own branding, but it replaces a version thrown together in Notepad with something clean and correctly formatted, in about four minutes, at no cost.
That’s not a design solution, just a way of making sure the one document a client actually keeps doesn’t undercut everything else the studio got right.
Closing the Gap Takes an Afternoon, Not a Rebuild
None of this requires rebuilding payment infrastructure.
Three Settings, Not a Sprint
Set up branding on Stripe Checkout: logo, accent color, button shape. This takes about twenty minutes to set up, and it’s available on every Stripe plan for free.
All of the major billing and accounting systems allow customization of the invoice template (branded logo placement and colors, for example). As such, the only document that still looks like a rough first draft is often the pay stub, unless a better tool is used for that too.
The fix list is short:
- Brand the checkout page
- Brand the invoice template
- Use a similar tool for auxiliary documents like pay stubs, so they look intentional instead of improvised
It’ll take a studio about an afternoon of work to set up the branding settings for Stripe Checkout, branded invoices, and branded pay stubs. But as it turns out, a meaningful share of every interaction a studio has with a client runs through the checkout page.
The Homepage Isn’t the Whole Product
Portfolio sites get redesigned every 18 months or so. Checkout pages for a studio’s Stripe account are often left exactly as they were when the account was set up, forgotten until the site itself gets redecorated. It’s worth revisiting how What Effective Web Design Looks Like in 5 Different Industries (And What Makes Them Work) frames this: design has to hold up across every touchpoint an industry’s users actually rely on, not just the ones a designer finds interesting.
That’s a fundamentally wrong-headed way of looking at things, given that one of those two screens actually contains the client’s money.
It isn’t a complete design overhaul, and will actually take less time to change three settings and find a better tool to generate pay stubs. The portfolio site was never the whole of the studio’s pitch. The invoice was always part of it too.
