Contexto Ponto de vista Research Trade-offs Interface Resultados

Banco BTG Pactual · Portal Digital

Portal BTG Digital: crédito e consórcio

Módulo de crédito e consórcio do novo portal unificado do BTG Digital: simulação, comparação de modalidades e autoatendimento com linguagem clara.

Papel

Senior Product Designer

Período

2023 · 2024

Produto

Portal web

Status

Em produção

Portal BTG Digital: crédito por investimentos

Contexto & Desafio

Sem canal digital, a mesa era o único caminho

Para contratar crédito ou consórcio no BTG, o caminho era ligar para a mesa de crédito. Não existia um portal voltado para crédito e consórcio. O desafio era criar esse módulo dentro do novo portal unificado (banking + investimentos) como um produto com autonomia real para o cliente.

✕ O que o cliente vivia

  • Ligava para a mesa para entender condições e taxas
  • Aguardava disponibilidade de um operador
  • Recebia informações sem poder simular cenários
  • Sem clareza sobre o que cada jargão significava

✓ O que precisávamos criar

  • Simulação autônoma com linguagem acessível
  • Clareza sobre condições sem precisar perguntar
  • Jornada completa de contratos e parcelas
  • Mesa como opção, não como etapa obrigatória

Ponto de vista

Crédito e consórcio não tinham canal digital

Três convicções guiaram cada decisão de design antes do Figma ser aberto.

01

Linguagem antes de funcionalidade

Traduzir jargão financeiro era essencial para que o portal funcionasse de forma autônoma. "Taxa efetiva", "prazo de carência" e "valor presente líquido" não podem chegar crus na interface. Usávamos ícones de ajuda (?) contextuais para explicar cada termo, com o objetivo de ser o mais transparente e explicativo possível.

02

Simulação como decisão, não como vitrine

O cliente deveria chegar à mesa já decidido, não com dúvidas. A simulação não era um complemento: era a jornada principal. Isso mudava a hierarquia de toda a arquitetura de informação do módulo.

03

Contrato como confirmação, não negociação

A assinatura deveria ser o ato final de uma jornada clara, não o início de uma conversa com o operador. Se o cliente chegasse à tela de contrato com dúvidas, o design tinha falhado antes.

Research & Discovery

O que o canal digital precisava resolver

Para entender onde o canal digital falhava, mapeei os principais pontos de atrito e conduzi entrevistas com a mesa de crédito para entender quais perguntas os clientes mais faziam antes de fechar um contrato.

🎙

Entrevistas com a mesa

Os operadores eram a fonte mais rica de insight: sabiam exatamente quais dúvidas repetiam, quais termos confundiam e quais clientes desistiam no meio. Usar esse conhecimento como insumo de design foi decisivo.

🗺

Mapeamento de jornada

O portal e o módulo de crédito e consórcio foram lançados quase juntos. O plano era mapear pontos de atrito em produção para alimentar iterações, mas saí do BTG logo após a entrega. O módulo está em produção com a arquitetura que desenhei.

Principal achado: as maiores dúvidas giravam em torno do impacto nos investimentos: quais ficavam travados, quais permaneciam livres, qual modalidade tinha a melhor taxa e qual compensava mais. A simulação precisava responder tudo isso antes do cliente falar com qualquer operador.

Trade-offs & Decisões

Unificar o que estava separado

O módulo precisava funcionar para diferentes modalidades de crédito, cada uma com regras próprias. E precisava ser aprovado por produto, crédito e tecnologia ao mesmo tempo. O design foi o ponto de mediação.

O conflito central

✕ O que cada área queria

  • Crédito queria mostrar todas as condições desde o início
  • Tecnologia precisava unificar sistemas que estavam completamente apartados
  • Duas modalidades de crédito com regras diferentes (investimentos travados vs livres) precisavam conviver na mesma interface

✓ O que o design resolveu

  • Uma arquitetura de informação que absorvesse as diferenças sem criar experiências paralelas
  • Comparação lado a lado das modalidades para auxiliar na decisão do cliente
  • Informações técnicas reveladas sob demanda, com ícones de ajuda (?) explicando cada termo no próprio fluxo
  • Simulação já acoplada ao autoatendimento

Decisão central: uma arquitetura que absorvesse as diferenças de regra sem criar duas experiências paralelas. Menos custo de manutenção, menos inconsistência, menos confusão para o cliente que usa os dois.

Interface & Solução

Contratos, parcelas e linguagem em um sistema coerente

O módulo foi estruturado em três camadas: visão geral dos contratos, detalhe por contrato e acompanhamento de parcelas. Cada camada responde a uma pergunta diferente do usuário, na ordem que ele precisa.

Duas decisões de hierarquia que estruturam o módulo

O volume de dados em crédito e consórcio é alto: contratos, parcelas, taxas, datas, status. O risco era criar uma interface densa que exigisse esforço cognitivo para cada tarefa. Duas decisões resolveram isso.

WIREFRAME · LISTAGEM DE CONTRATOS
DATATIPOTAXAVALORSTATUS
04/03 CC-999 Consignado Privado 2.04% R$ 50.5k Liquidado
Detalhes Parcelas
#VENC.VALORPGTOSTATUS
110/02R$ 0,0007/02● Pago
210/03R$ 0,0010/03● Pago
310/04R$ 0,00...● ...
15/09CP-728Crédito Pessoal3.09%R$ 95k Liquidado
28/06CP-820Crédito Pessoal3.09%R$ 20.3k Liquidado

Accordion com tabs internas: contrato revela só o que o usuário pede

Cada linha da tabela é um contrato. O resumo mostra apenas o essencial: data, tipo, taxa, valor e status. Ao expandir, duas abas separam "Detalhes" e "Parcelas", porque são perguntas diferentes: "o que contratei?" vs. "quanto paguei?".

Por que essa estrutura: o cliente médio tem entre 2 e 5 contratos simultâneos. Mostrar todas as parcelas de todos de uma vez geraria uma tabela com 60+ linhas. O accordion garante que o usuário veja o panorama antes de mergulhar no detalhe.

WIREFRAME · COMPARAÇÃO DE MODALIDADES
Crédito por investimentos
Utiliza o Invest Flex como limite
Valor pré aprovado
R$ 150.000,00
Taxa
A partir de 1,49% a.m.
Parcelas
Mensais ou única
Carência
Até 180 dias
Bloqueios
Sem bloqueio
Simular
Crédito com garantia
Investimentos como garantia
Solução personalizada
R$ 500.000,00
Taxa
CDI + 0,24% a.m.
Parcelas
Trimestrais a anuais
Carência
12 a 36 meses
Bloqueios
Sobre ativos em garantia
Simular

Comparação primeiro, profundidade depois

As duas modalidades compartilham os mesmos quatro atributos (taxa, parcelas, carência, bloqueios), lado a lado. O cliente compara sem rolar. "Simular" leva ao fluxo de simulação de cada modalidade.

Por que essa estrutura: nas entrevistas com a mesa, a dúvida mais comum era "qual a diferença entre os dois?". A interface responde essa pergunta sem exigir clique. Quem precisa de mais, pede. Quem só quer comparar, já tem tudo.

✎ Botão "Simular"

Comportamento: abre outra tela com fluxo de workflow, campo para digitar valor desejado dentro do range pré-aprovado do cliente.

✎ Label "Valor pré aprovado"

Com pré-aprovação: exibe o valor real disponível para o cliente (ex: R$ 150.000,00).

Sem pré-aprovação: exibe "Crédito não disponível" com orientação para aumentar as chances (ex: investir mais).

✎ Cards de modalidade

Atributos: taxa, parcelas, carência e bloqueios exibidos lado a lado para comparação direta.

Valores: dependem do produto selecionado, por isso os cards mostram as opções possíveis de cada modalidade.

✎ Bloqueios (transparência)

Crédito por investimentos: "Seus investimentos não ficam bloqueados" — investimentos permanecem livres.

Crédito com garantia: "O bloqueio acontece sobre os ativos que você escolheu" — bloqueio apenas nos ativos selecionados como garantia.

WIREFRAME · BANNER DE OPORTUNIDADE
Desbloqueie seu potencial financeiro com o Open Finance
Compartilhe seus dados e aumente suas chances de obter crédito com o BTG
Conectar dados ›

✎ Banners de oportunidade

Regra: espaços estratégicos na tela para conectar o módulo de crédito com outras áreas do banco (Open Finance, investimentos).

Objetivo: clientes sem crédito disponível muitas vezes não investem o suficiente. Os banners direcionam para ações que aumentam as chances de pré-aprovação e ampliam as ofertas disponíveis.

Exemplo: "Desbloqueie seu potencial financeiro com o Open Finance" direciona para conexão de dados, que melhora o score e libera novas ofertas de crédito.

WIREFRAME · CARD DE ASSESSORIA
ASSESSORIA DIGITAL
Fale com sua assessoria para conhecer os melhores investimentos para o seu perfil.
Escritório
Assessoria BTG
E-mail
assessoria@btg.com
Telefone
+55 (11) 4007-2511
WhatsApp
+55 (11) 4007-2511
Assessoria ›

✎ Card de assessoria digital

Regra: sempre visível no rodapé da página, independente do produto.

Objetivo: produtos de crédito são complexos. O card garante que o cliente tenha acesso rápido à assessoria (escritório, e-mail, telefone, WhatsApp) sem precisar sair da página ou procurar contato em outro lugar.

Comportamento: "Assessoria >" direciona para a página completa da assessoria do cliente, onde ele pode agendar um horário, entre outras funcionalidades.

O resultado na interface

As telas abaixo são do módulo de acompanhamento de contratos. As jornadas de autoatendimento (simulação e contratação de crédito) estão sob acordo de confidencialidade.

btgpactual.com/digital/credito-consorcio
Home do portal

Resultados

Em produção

O módulo foi lançado e está ativo no portal BTG Digital. Por ter saído do BTG logo após a entrega, não tenho dados de uso. Os dois eixos que guiaram o projeto se refletem no produto final.

Simulação autônoma

O cliente simula condições e compara cenários quantas vezes quiser, sem compromisso e sem precisar ligar para a mesa.

Aprovação integrada

Ao finalizar a simulação, ela chega automaticamente na mesa de crédito. Dependendo da modalidade e do valor, a aprovação é automática. Nos demais casos, um operador dá seguimento.

Aberta a novas oportunidades como senior product designer

Agende uma entrevista