Fintech de cartão corporativo — portal multiperfil e design system
Quatro perfis de back office sobre uma página de design system com 79 nós.
Um ecossistema digital para uma fintech de cartão de crédito corporativo: landing pages de aquisição, cadastro em etapas, um ciclo completo de recuperação de senha e dashboards de back office para quatro perfis distintos. Desenhei 65 nós na página principal — três versões de landing, mockups de cartão em 3D, os dashboards de admin, gestor e assessor, os fluxos de cadastro e login e seus viewports mobile — e criei uma página separada de design system com 79 nós, com as tabelas de dados e os primitivos compartilhados. Designer de UI único do site; identidade e build são de outras pessoas.
- Função
- Sole website UI designer
- Período
- ago. de 2024 – set. de 2024
- Stack
- Figma
- Evidência
- Arquivo de design
Abrir o arquivo de designSnapshot arquivado do site publicado
Designer de UI do site para a EasyBuyCard, fintech de soluções de cartão de crédito corporativo e gestão financeira empresarial. Desenvolvi um ecossistema completo de 5 páginas e 144 nós no Figma (arquivo PV1a0t9B4S7cmNAUEeX8QD): 65 nós na página principal de Design abrangendo três iterações de landing page (v1, v2, v3), mockups de apresentação de cartões físicos em 3D e dashboards de back office para quatro perfis de usuário (Admin, Gestor, Assessor, Cliente), acompanhados por uma página dedicada de Design System com 79 componentes — a biblioteca de componentes mais profunda do lote de 15 sites da agência Sagitta.
Atuação como funcionário na agência Sagitta de agosto de 2024 a 2 de setembro de 2024. Juan atuou como designer único de UI do site em uma divisão de equipe tripartite: Kelvin Bezerra criou a identidade visual e o logotipo, Juan desenhou a UI do site, as telas do portal multiperfil e o design system, e um desenvolvedor no-code externo ficou encarregado da implementação em WordPress. A pesquisa e descoberta do cliente pertenciam ao Ramon.
Arquitetura SaaS multiperfil para gestão de cartões corporativos
- 65
- nós na página principal de Design
- 79
- conjuntos de componentes no Design System dedicado
- 4
- perfis de portal distintos (Admin, Gestor, Assessor, Cliente)
- 3
- versões de landing page com cartões em 3D
Cartões de crédito corporativos demandam uma arquitetura de informação fundamentalmente diferente de cartões de consumo para pessoa física. Em vez de uma visualização única de saldo e extrato, o ecossistema corporativo opera através de quatro níveis hierárquicos de permissão, cada um com prioridades operacionais e densidade de dados específicas:
- Administrador Geral (Admin) — Visão global da liquidez do sistema, concessão de limites agregados de crédito, parâmetros de risco de inadimplência e credenciamento de empresas parceiras.
- Gestor Empresarial (Gestor) — Controle operacional da empresa cliente: definição de limites por departamento, emissão de cartões físicos e virtuais para colaboradores, bloqueios por categoria de estabelecimento (ex: combustível vs. viagens) e conferência de faturas consolidadas.
- Assessor Comercial (Assessor) — Painel de prospecção e acompanhamento de clientes empresariais, metas de distribuição de cartões, taxa de ativação de contas e comissionamento comercial.
- Titular do Cartão (Cliente) — Área do colaborador no mobile e web: consulta de limite disponível em tempo real, extrato instantâneo de transações, bloqueio/desbloqueio do cartão e geração de cartão virtual para compras corporativas online.
Página dedicada de Design System com 79 componentes
Entre os quinze sites corporativos desenhados durante minha atuação na Sagitta, o EasyBuyCard foi o único projeto que recebeu uma página exclusiva de Design System (nó 1:14, contendo 79 conjuntos de componentes lidos via automação). Em vez de dispersar instâncias desconexas pelas pranchetas, estruturei uma biblioteca unificada para garantir consistência visual rigorosa entre as páginas públicas de marketing e os painéis densos do portal interno.
- Tabelas de Dados Financeiros — Tabelas de alta densidade com ordenação por múltiplas colunas, tags de status da transação (Aprovada, Pendente, Suspeita), filtros por período e controles de paginação.
- Cards de Resumo de Métricas — Blocos executivos com KPIs de despesas consolidadas, taxa de utilização do limite, contagem de cartões ativos e comparativos percentuais mês a mês.
- Indicadores de Progresso — Medidores circulares e lineares tokenizados para exibir visualmente o consumo de crédito tanto no nível global da empresa quanto no cartão individual.
- Campos de Formulário Contextuais — Entradas numéricas estruturadas com máscara de moeda, formatadores de número de cartão, campos de busca e seletores suspensos de perfil de acesso.
- Alternadores Interativos de Planos — Chaves de seleção que permitem ao decisor financeiro alternar entre planos empresariais básicos e avançados diretamente na landing page.
Nunca cite '79 componentes' como se fossem todos criados do zero sem separar o kit base da agência da camada de domínio. O número 79 é uma contagem de nós lida no Figma, representando uma combinação de primitivas adaptadas da agência com tabelas financeiras, gráficos de limite e estruturas de navegação multiperfil concebidas para o projeto.
Iterações da landing page e visualização do cartão físico
No escopo institucional e de vendas, o desafio era transmitir solidez institucional imediata. Soluções financeiras B2B enfrentam rígida avaliação por parte de diretores financeiros e controllers, que exigem clareza sobre taxas, estabilidade operacional e segurança. Desenvolvi três variações completas de landing page (Landing Page v1, v2 e v3), testando composições em modo escuro e claro com alto contraste, representações tridimensionais do cartão físico e adaptações responsivas em 375px.
O que este projeto é e o que não é
- Não é um produto lançado ou no ar. Verificado em 21/08/2026: o único registro arquivado é uma página tapume 'Em breve' (24 KB) de maio de 2024. O produto foi projetado e entregue para implementação, mas não teve lançamento público.
- Não é a criação da marca ou logotipo. Kelvin Bezerra foi o autor do logotipo e identidade visual da EasyBuyCard.
- Não é implementação em WordPress. A programação em CMS foi atribuída a um desenvolvedor no-code.
- Não é pesquisa com usuários ou discovery. O levantamento de requisitos foi conduzido por Ramon.
- Não é inovação no fluxo de login. As telas de autenticação (Cadastro, Login, Recuperar Senha) no arquivo utilizaram o módulo padronizado da Sagitta presente em outros projetos da agência.
- Não é um arquivo construído 100% do zero. Como a maioria dos projetos de agência da época, adaptou um kit base licenciado, adicionando a arquitetura financeira de domínio.
O valor de um design de portal estruturado
O EasyBuyCard exemplifica como soluções financeiras multi-stakeholder são estruturadas antes de chegarem ao código. Ao mapear claramente quatro perfis de acesso, padronizar 79 componentes de UI e validar três alternativas de conversão comercial, o projeto forneceu uma especificação técnica sólida e organizada para uma operação de crédito corporativo.
Evidência
O produto comprovadamente não foi ao ar durante o período de contratação. O único registro histórico no Wayback Machine (26/05/2024) é uma página tapume de 24 KB com a mensagem 'Em breve', e o domínio easybuycard.com.br encontra-se inativo. O design foi concluído e entregue para implementação em CMS, configurando-se como uma prova autêntica de design de arquitetura SaaS multiperfil e design systems para fintechs, e não como um produto lançado.