← Back to Home
Case Study 02
Fintech
E-commerce
Checkout
Online Checkout Experience
Online Checkout Experience
Online Checkout Experience
A concept for a clearer hosted payment page, shaped by my work on e-commerce payment flows for international payment providers.
A concept for a clearer hosted payment page, shaped by my work on e-commerce payment flows for international payment providers.
View Prototype ↗
Project Type
Independent Concept
Independent Concept
Role
Product Designer
Product Designer
Platform
Hosted Payment Page (Web & Mobile)
Hosted Payment Page (Web & Mobile)
Tools
Figma
Figma
Image placeholder
The Challenge
The Challenge
I’ve designed customer-facing payment pages for payment providers, all under NDA, including one I took from first concept through to production. A hosted payment page is the moment a shopper leaves the merchant’s site and hands their card details to a page they’ve never seen before. If it feels unfamiliar, cluttered or unclear, people hesitate, make mistakes or give up.
That moment is hardest for less confident users, including many older shoppers. This concept asks what a payment page looks like when it’s designed for them first.
I’ve designed customer-facing payment pages for payment providers, all under NDA, including one I took from first concept through to production. A hosted payment page is the moment a shopper leaves the merchant’s site and hands their card details to a page they’ve never seen before. If it feels unfamiliar, cluttered or unclear, people hesitate, make mistakes or give up.
That moment is hardest for less confident users, including many older shoppers. This concept asks what a payment page looks like when it’s designed for them first.
Design Approach
Design Approach
Familiar and calm. Large fields, generous spacing and a restrained palette, so the page feels trustworthy rather than busy.
Context always visible. The merchant name and amount stay at the top, so the shopper always knows who they’re paying and how much.
Errors in plain language. A declined card triggers a clear message at the top of the form, telling the shopper what happened and what to do next: try another card or another payment method.
Clear endings. Success and failure each get a dedicated screen with one obvious way back to the merchant.
Familiar and calm. Large fields, generous spacing and a restrained palette, so the page feels trustworthy rather than busy.
Context always visible. The merchant name and amount stay at the top, so the shopper always knows who they’re paying and how much.
Errors in plain language. A declined card triggers a clear message at the top of the form, telling the shopper what happened and what to do next: try another card or another payment method.
Clear endings. Success and failure each get a dedicated screen with one obvious way back to the merchant.
The Solution
The Solution
The page offers payment methods as simple tiles (card, digital wallets such as Apple Pay and Google Pay, e-banking and gift card), with card selected by default. The tile layout leaves room to add new methods without redesigning the page. Shoppers with loyalty points can redeem them inline, and the page shows exactly how much will be charged to the card. Trust signals, such as accepted card schemes and 3-D Secure, sit quietly at the bottom.
A successful payment ends on a confirmation screen with the transaction number, support reference and amount, so the shopper has everything they need if they ever contact support. The flow is designed for both desktop and mobile.
The page offers payment methods as simple tiles (card, digital wallets such as Apple Pay and Google Pay, e-banking and gift card), with card selected by default. The tile layout leaves room to add new methods without redesigning the page. Shoppers with loyalty points can redeem them inline, and the page shows exactly how much will be charged to the card. Trust signals, such as accepted card schemes and 3-D Secure, sit quietly at the bottom.
A successful payment ends on a confirmation screen with the transaction number, support reference and amount, so the shopper has everything they need if they ever contact support. The flow is designed for both desktop and mobile.
Behind the Design
Behind the Design
Image placeholder
Persona
An occasional online shopper, often older and less confident with technology, paying on a page they’ve never seen before.
Image placeholder
Design System Foundations
Color, type and spacing tokens shared across desktop and mobile, so every state of the page feels familiar.
Image placeholder
Payment Methods
Card, digital wallets, e-banking and gift card as simple tiles, with room to add new methods later.
Image placeholder
Forms & Components
Large, clearly labelled fields and buttons with defined states, built for easy, error-free input.
Image placeholder
Core Screens
The full checkout, from choosing a payment method to the confirmation screen.
Image placeholder
Edge States
Declined card and failed transaction: the moments when clear feedback matters most.
Image placeholder
Persona
An occasional online shopper, often older and less confident with technology, paying on a page they’ve never seen before.
Image placeholder
Design System Foundations
Color, type and spacing tokens shared across desktop and mobile, so every state of the page feels familiar.
Image placeholder
Payment Methods
Card, digital wallets, e-banking and gift card as simple tiles, with room to add new methods later.
Image placeholder
Forms & Components
Large, clearly labelled fields and buttons with defined states, built for easy, error-free input.
Image placeholder
Core Screens
The full checkout, from choosing a payment method to the confirmation screen.
Image placeholder
Edge States
Declined card and failed transaction: the moments when clear feedback matters most.
Image placeholder
Persona
An occasional online shopper, often older and less confident with technology, paying on a page they’ve never seen before.
Image placeholder
Design System Foundations
Color, type and spacing tokens shared across desktop and mobile, so every state of the page feels familiar.
Image placeholder
Payment Methods
Card, digital wallets, e-banking and gift card as simple tiles, with room to add new methods later.
Image placeholder
Forms & Components
Large, clearly labelled fields and buttons with defined states, built for easy, error-free input.
Image placeholder
Core Screens
The full checkout, from choosing a payment method to the confirmation screen.
Image placeholder
Edge States
Declined card and failed transaction: the moments when clear feedback matters most.
Outcome
Outcome
This concept applies what I learned designing payment pages in production: keep the context visible, explain errors in plain language, and always show the shopper what to do next. It’s prototyped but not yet tested with users. My next step is to test it with less tech-confident shoppers and refine it from there.
This concept applies what I learned designing payment pages in production: keep the context visible, explain errors in plain language, and always show the shopper what to do next. It’s prototyped but not yet tested with users. My next step is to test it with less tech-confident shoppers and refine it from there.
Outcome image placeholder
Designed for better payment experiences.
Designed for better payment experiences.
Explore more projects ↗
Explore more projects ↗