Product Design · UX/UI Design
TMB Card
Cartões de crédito pensados para quem vende no digital.
Product Design · Mobile App · Fintech
Aplicativo de gestão de cartões de crédito para criadores de conteúdo.
Sobre o projeto
Um só lugar para todos os cartões
O TMB Card é um aplicativo de gestão de cartões criado para criadores de conteúdo, que usam o crédito como principal ferramenta de trabalho. O app centraliza gastos, limites e faturas em um ambiente simples, seguro e intuitivo, para que quem vive do digital tenha controle total sem perder tempo.
Feito para quem vende no digital
Anúncios, ferramentas e assinaturas passam pelo cartão todos os dias. O TMB Card foi pensado para acompanhar esse ritmo com uma experiência segura, intuitiva e dinâmica.
Processo
Do problema à interface
O projeto passou por três etapas: descobrir as dores reais dos usuários, transformar os aprendizados em estratégia de produto e, por fim, traduzir tudo em interface e Design System.
Ouvir antes de desenhar
Combinamos benchmarking, desk research e pesquisa qualitativa com criadores de conteúdo para entender como eles usam o crédito no dia a dia. A principal conclusão: o valor do produto está na organização e na clareza das informações, não na quantidade de funcionalidades.
O que tira o sono de quem usa vários cartões
A pesquisa revelou seis dores recorrentes, todas ligadas à mesma raiz: informação espalhada e difícil de ler. Limite, fatura e parcelamentos existiam, mas não davam segurança para decidir.
Quem são os usuários
Os dados da pesquisa deram origem a duas personas que representam o público do TMB Card: criadores que investem em anúncios e ferramentas e precisam enxergar o impacto de cada gasto ao longo do mês.
Fundamentos visuais
Clareza começa no básico
Para responder às dores de excesso de informação e linguagem técnica, a base visual priorizou legibilidade: uma tipografia limpa, com muitos pesos para criar hierarquia, e uma paleta derivada da marca TMB, validada para contraste AA.
Estrutura
Caminhos curtos para as ações principais
O journey map organizou a navegação do app para que consultar a fatura, conferir o limite, bloquear um cartão ou ver transações fique sempre a poucos toques da home.
Um sistema para escalar
Cores, espaçamentos e componentes foram estruturados em variables e em um UI Kit, garantindo consistência entre as telas e agilidade para novas funcionalidades.
Interface
Controle na palma da mão
Fatura aberta em destaque, limite visível em uma barra, bloqueio temporário por cartão e notificação de compra aprovada: cada tela responde diretamente a uma das dores levantadas na pesquisa.
Obrigado por ver!
O TMB Card transforma vários cartões em uma visão única e clara, para que criadores de conteúdo decidam com segurança e foquem no que importa: o próprio negócio.
Créditos
Filippi Prado · UX/UI e Product Design
Inteligência artificial foi usada na construção dos mockups deste projeto. O contexto, a pesquisa e o protótipo são de autoria de Filippi Prado.