Gateway de pagamento — landing page e planos
Cinco layouts em múltiplas resoluções com matriz comparativa de planos.
Uma landing page comercial para um gateway de pagamento: taxas por transação, prazo de repasse, bandeiras aceitas, APIs para desenvolvedores e planos de assinatura transparentes. Desenhei cinco layouts em múltiplas resoluções — desktop em 1920 e 1280, mobile em 375, mais uma página dedicada de planos e sua versão mobile — com mockups de cartão em 3D, uma matriz comparativa de preços e os blocos de CTA. É apenas crédito de design: nenhuma URL de produção foi recuperada, então nada aqui afirma que isso foi ao ar.
- Função
- Sole website UI designer
- Período
- jul. de 2023 – ago. de 2023
- Stack
- Figma
- Evidência
- Arquivo de design
Designer de UI do site para a Bolex Pay, gateway de pagamentos digitais, processadora de transações para lojistas e fornecedora de soluções financeiras. Desenvolvi 5 layouts em múltiplas resoluções no Figma (arquivo aHFhZTnToTlBOSCxFwUHmw) cobrindo viewports desktop (1920x1080 e 1280x832) e mobile (375x812), incluindo páginas dedicadas de matriz comparativa de planos (Planos e Planos - Mobile), com suporte de um Style Guide com 34 nós especificando aplicação de marca, mockups de cartão 3D e iconografia financeira.
Atuação como funcionário na agência Sagitta de 20 de julho de 2023 a 2 de agosto de 2023. Juan atuou como designer único de UI do site em uma estrutura clara de equipe: Kelvin Bezerra criou a identidade visual e o logotipo da Bolex Pay, Juan desenvolveu os layouts responsivos da landing page e da tabela de preços, e um desenvolvedor no-code realizou a implementação no CMS WordPress. O escopo do projeto foi definido por Ramon.
Aquisição de lojistas em um mercado competitivo de meios de pagamento
- 5
- layouts em múltiplas resoluções desenhados
- 34
- tokens e elementos visuais no Style Guide
- 2
- telas dedicadas para comparação de planos (Desktop e Mobile)
- 14 dias
- do início do design à entrega para implementação
No cenário brasileiro de serviços para comerciantes, gateways de pagamento enfrentam concorrência acirrada contra empresas consolidadas (Stone, Cielo, PagBank, Asaas). Converter donos de e-commerce e varejistas físicos exige eliminar incertezas em torno de três fatores decisivos: taxas de intermediação (MDR) por bandeira, velocidade de repasse da liquidez (Pix imediato versus D+1 ou D+30 para recebíveis de cartão) e facilidade de integração via API para desenvolvedores. A Bolex Pay necessitava de uma landing page comercial capaz de gerar confiança imediata e apresentar custos com total transparência.
Engenharia de layout responsivo: 1920px, 1280px e 375px
O arquivo Figma foi estruturado em cinco pranchetas estratégicas para garantir fidelidade de implementação nos principais formatos de tela do mercado:
- Desktop 1920x1080 — Layout para telas amplas com uso generoso de respiro, alinhamento em grid rigoroso, representações 3D de cartões de crédito e destaque para trechos de código da API.
- Desktop 1280x832 — Viewport para laptops compactos, proporcionado para manter a proposta de valor, taxas em destaque e o CTA principal visíveis acima da dobra.
- Mobile 375x812 — Layout para smartphones reorganizando tabelas densas em cards verticais empilhados com alvos de toque ergonomicamente adequados.
- Páginas Dedicadas de Planos (Planos e Planos - Mobile) — Matriz comparativa independente detalhando planos mensais de assinatura, faixas de desconto por volume e taxas por bandeira de cartão.
Nunca apresente este projeto como engenharia de pagamentos ou integração de gateway. Trata-se da superfície de marketing e conversão de um produto financeiro: desenhei o layout da página, a hierarquia visual e a estrutura de planos, e não os trilhos de processamento bancário.
Curadoria do Style Guide e elementos visuais
Para fornecer diretrizes completas ao desenvolvedor, o arquivo possui uma página de Style Guide com 34 nós (nó 1:16). Ela especificou escalas tipográficas, variações do logotipo para fundo claro e escuro criadas por Kelvin Bezerra, selos oficiais das bandeiras de cartão (Visa, Mastercard), iconografia vetorial de transferências financeiras e molduras de dispositivos para demonstração do produto.
O que este projeto é e o que não é
- Não é engenharia de pagamentos ou infraestrutura de API. Desenhei a interface comercial no Figma; não programei software de gateway, webhooks ou integrações bancárias.
- Não é criação de identidade visual ou logotipo. Kelvin Bezerra concebeu o logotipo e a identidade da Bolex Pay.
- Não é implementação em WordPress. A construção da página no CMS foi executada por um desenvolvedor no-code.
- Não é um site ativo ou verificável no ar. O projeto foi descontinuado pelo cliente pouco após a entrega; o domínio não resolve e não possui capturas no Wayback Machine.
- Não possui dados de conversão comercial. Nenhuma métrica de volume de transações, captação de leads ou tráfego foi retida.
- Não é pesquisa ou discovery. O escopo e o levantamento de requisitos foram conduzidos por Ramon.
Clareza de conversão em interfaces de fintech
A Bolex Pay exemplifica como hierarquia visual e clareza na exposição de preços constituem a espinha dorsal do design comercial em serviços financeiros. Ao traduzir estruturas complexas de taxas em matrizes comparativas compreensíveis e garantir consistência em três resoluções fundamentais, o projeto estruturou uma presença digital eficiente para o lançamento da marca.
Evidência
A landing page foi concluída, entregue e chegou a ir brevemente ao ar antes de o cliente descontinuar o empreendimento comercial. O domínio bolexpay.com.br não responde mais e consultas irrestritas no Wayback Machine retornam zero capturas ao longo do tempo. Não existem métricas comerciais ou de transações. Este estudo de caso documenta a arquitetura de conversão comercial, as matrizes de precificação e o design de layout responsivo para um gateway de pagamentos.