Payments Platform Landing Page
One Platform for Every Business
Services
Payment
Tools
Figma
Value
Make the product easy to understand in one screen, build trust fast, and create clear paths to start or view docs.
Timeline
3 Week
What I ran into (real problems)
People couldn’t explain the product after the first screen.
Features felt disconnected (Wallet, Subscriptions, Payouts).
Dark UI contrast and focus states were inconsistent.
Copy was long, jargon-heavy, and CTAs were sparse.
How I worked through it
Message first
Wrote a one‑liner promise anyone can repeat.
Added three short support points (security, real‑time insight, scale).
Set dual primary actions: “Get started” and “Talk to sales.”
Information architecture
Clean top nav: Product, Wallet, Subscriptions, Payouts, Pricing, Developers, Company.
Section order optimized for trust and clarity:
Hero → “Meet the platform” → Wallet spotlight → “Why teams choose us” → Security → Insights → FAQ → Testimonials → Final CTA.Repeated CTAs and a sticky nav to reduce hunting.
Wireframes and quick validation
Low‑fi wires to test hierarchy and scan-ability.
5‑second tests on headlines until users could explain the product clearly.
Mid‑fi clickable prototype with tasks:
Understand the value in <5s
Find “Subscriptions”
Verify security info
Start a trial
Visual system on dark mode
Built a high‑contrast palette (WCAG AA+), tuned for dark backgrounds.
Type scale for fast scanning: strong display heads + highly legible body.
Designed reusable blocks: hero, feature cards, metric modules, FAQ accordion, testimonials, CTA bars.
Subtle motion; reduced‑motion friendly.
Content and microcopy
Cut jargon; used short, scannable lines and clear card titles.
Surfaced security early: tokenisation, PCI flows, 3DS, fraud tools.
FAQs matched real questions: cost, security, how it works, subscriptions, and getting started.
Clear labels: “Get started free,” “Talk to sales.” “Read the docs.”
Accessibility and performance
Contrast passes, visible focus rings, and keyboard navigation across components.
Guidance for semantic HTML, responsive images, and lazy loading for below‑the‑fold sections.
Build-ready handoff
Hi‑fi responsive prototype.
Design tokens (color, spacing, radii, elevation, and motion) and component specs.
Analytics plan: track hero CTA clicks, scroll depth, FAQ opens, and Docs clicks.
A/B variants prepared for hero headline and CTA text.
