Payment Gateway — Landing Page & Pricing Tiers

Five multi-resolution layouts with a pricing comparison matrix.

Landing page and pricing design for a payment gatewayLanding page and pricing design for a payment gateway

A commercial landing page for a payment gateway: transaction rates, settlement speed, card-brand acceptance, developer APIs and transparent subscription tiers. I designed five multi-resolution canvas layouts — desktop at 1920 and 1280, mobile at 375, plus a dedicated plans page and its mobile counterpart — with 3D card mockups, a pricing comparison matrix and the conversion CTA blocks. A design credit only: no production URL was recovered, so nothing here says this shipped.

Role
Sole website UI designer
Timeframe
Jul 2023 – Aug 2023
Stack
Figma
Evidence
  • Design file

Open the design file

Sole Website UI Designer for Bolex Pay, a digital payment gateway, merchant transaction processor, and financial services provider. Designed 5 multi-resolution canvas layouts across desktop (1920x1080 and 1280x832) and mobile (375x812) viewports, including dedicated pricing plan comparison matrices (Planos and Planos - Mobile), supported by a 34-node Style Guide specifying brand application, 3D credit card mockups, mobile device frames, and financial transaction iconography in Figma (file key aHFhZTnToTlBOSCxFwUHmw).

Agency employment at Sagitta delivering from July 20, 2023 to August 2, 2023. Juan acted as the sole website UI designer within a defined team structure: Kelvin Bezerra created the Bolex Pay brand identity and logo, Juan authored the responsive marketing and pricing page layouts, and a no-code developer handled the WordPress CMS implementation. Requirements were scoped by Ramon.

Merchant acquisition in a competitive payment gateway market

5
multi-resolution canvas layouts designed
34
style guide design tokens and brand presentation assets
2
dedicated pricing comparison viewports (Desktop & Mobile)
14 days
from design kickoff to final implementation handoff

In the Brazilian merchant services landscape, payment gateways face severe competition against incumbents (Stone, Cielo, PagBank, Asaas). Converting e-commerce merchants and physical store owners requires eliminating uncertainty around three decisive factors: per-transaction MDR processing rates, liquidity settlement timing (instant Pix versus D+1 or D+30 card payouts), and developer API integration friction. Bolex Pay required an acquisition landing page that established instant credibility and communicated fee structures with absolute transparency.

Responsive layout engineering: 1920px, 1280px, and 375px

The Figma artifact was engineered across five deliberate canvas layouts to guarantee pixel-accurate translation to code across major display environments:

  • Desktop 1920x1080 — Full-width canvas utilizing generous whitespace, structured grid alignment, 3D embossed credit card visuals, and highlighted developer API code snippets.
  • Desktop 1280x832 — Compact laptop viewport carefully proportioned so that key value propositions, processing fee highlights, and the primary registration CTA remain visible above the fold.
  • Mobile 375x812 — Mobile smartphone layout re-architecting complex comparison tables into stacked, readable card lists with full touch-friendly tap targets.
  • Dedicated Pricing Viewports (Planos & Planos - Mobile) — Standalone comparison matrix detailing monthly gateway subscription tiers, volume-based discount breaks, and per-brand processing fee splits.
Never present this as payments engineering or gateway integration work. It is the commercial marketing surface of a payments product: I designed the page layouts, visual hierarchy, and pricing structure, not the transaction processing rails.

Style guide and brand asset curation

To support the landing page implementation, the file includes a 34-node Style Guide page (node 1:16). This provided the developer with tokenized typography scales, dark and light brand logo assets authored by Kelvin Bezerra, official card network badges (Visa, Mastercard), vector financial transfer iconography, and device mockup frames for product context.

What this project is and is not

  • Not payments engineering or API infrastructure. I designed the commercial front-end UI in Figma; I did not write payment gateway software, webhook processors, or banking integrations.
  • Not brand identity or logo design. Kelvin Bezerra authored the Bolex Pay logo and visual identity.
  • Not WordPress implementation. A no-code developer was responsible for building the page in WordPress.
  • Not an active or verifiable live website. The project was abandoned by the client shortly after delivery; the domain does not resolve and has no Wayback captures.
  • Not supported by conversion analytics. No transaction volume, lead conversion rates, or traffic analytics were retained.
  • Not discovery or user research. Product scoping and client requirements were conducted by Ramon.

Conversion clarity in fintech landing pages

Bolex Pay demonstrates how visual clarity and honest pricing architecture form the foundation of fintech commercial design. By presenting complex fee structures through intuitive comparative matrices and engineering layouts across three key device viewports, the project established a high-converting digital presence for an emerging payment processor.

Evidence

The landing page was completed, delivered, and briefly launched into production before the client abandoned the commercial venture. The domain bolexpay.com.br no longer resolves and unrestricted Wayback Machine queries return zero snapshots across all time. No commercial conversion or transaction metrics exist. This case study documents the commercial conversion architecture, pricing matrices, and responsive layout engineering for a fintech payment processor.