Designedย by
No items found.
Subject


Bookmark
Bookmark
Category
Added on
April 9, 2024

Checkout.com Top Up Account Structure

Clean Financial Flow Done Right

This is Checkout.com's top-up account screen, and it nails the step-by-step guidance without feeling patronizing. The hierarchy is immediately clear. Bold section headers like "Currency Account" and "Balance to top up" break the page into digestible chunks. You always know where you are.

Smart Use of Cards as Selection

The two balance option cards steal the show. "Available balance" is selected with a crisp blue border, while "Operational balance" sits quietly in a neutral outline. The descriptions underneath each card actually help users make a decision. That's thoughtful UX, not just decoration. The subtle up/down chevron on the dropdown feels native and unforced.

Restrained but Effective

Typography is system-level clean. Plenty of white space keeps things breathable. The sticky footer with "Back" and a blue "Continue" button anchors the whole flow. No distractions in the nav either. Tabs like Balances, Settlements, and Invoices stay minimal. The whole page feels like it respects your time. Really solid enterprise product design that doesn't overcomplicate things.
Similar screens

Upgrade to SaaSFrame Pro now to see similar examples.

Monthly

$18 /month

Billed $18 monthly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Quarterly

$16 /month

Billed $48 quarterly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now

Yearly

$15 /month

Billed $180 yearly
Browse all screens & flows
Filter and search screens & flows
Search text in screenshots
Access Figma files
Access mobile versions
Join now