Estudo de caso · conceito de design
Redesenho do painel Asaas: do diagnóstico ao protótipo
Por que mudamos, qual foi o caminho percorrido e o que pensamos para o futuro. Esta apresentação mostra a análise por trás do visual, e não só o resultado.
Simulação · todos os valores, nomes e datas do protótipo são fictícios Consultas e fontes: 23/10/2026
Em uma página
Não fizemos só desenho: observamos, comparamos e ouvimos antes de decidir
Menu
Itens soltos no primeiro nível viraram grupos por tarefa. Nenhuma função foi removida.
Criar cobrança
De 4 etapas em sequência (segundo a Central de Ajuda) para um formulário, com o valor líquido à vista.
Achados no original
Cada um com a heurística que fere e a decisão que tomamos.
Fluxos comparados
Asaas original, Cora, Inter, iugu e Mercado Pago, pelas páginas oficiais de ajuda.
O que ainda falta: testar com pessoas. Contamos etapas e calculamos contraste; não medimos tempo nem erros.
Método
O caminho: sete passos, do que vimos ao que falta validar
Rigor
Cada informação tem origem, e dizemos o que não sabemos
Confirmado
Telas do painel original vistas em leitura. Páginas oficiais abertas e lidas por inteiro (Cora, Inter, App Store, Reclame Aqui). Contraste calculado por fórmula.
Não confirmado
Três páginas de ajuda (Asaas, iugu, Mercado Pago) bloquearam a leitura direta. Esses pontos aparecem marcados e devem ser conferidos antes de decidir.
Ainda não sabemos
O original foi visto numa conta vazia. Não há teste com usuários. O protótipo é simulação. Nenhum ganho de tempo foi medido.
Decisões · de onde vêm
Seis princípios, e a evidência por trás de cada um
1 · Prioridade antes de promoção
Observado O Início abria com carrossel de ofertas e um checklist de 5 de 5 etapas, antes das pendências.
Critério H8 (minimalismo) e H1 (status à vista).
2 · Um caminho principal por tela
Observado "Criar cobrança" em azul no menu, em verde no cartão e de novo no estado vazio.
Critério H4 (consistência). Semiótica: a cor do botão de destaque é símbolo por convenção, e duas cores a enfraquecem.
3 · Dizer o que está acontecendo
Observado Indicadores vermelhos sem dizer do quê; Extrato vazio com tom de erro.
Critério H1 e H9. Semiótica: o número é um índice, mostra que existe pendência, não qual.
Voz do usuário "Pagamento não localizado": 168 reclamações, que lemos como ligadas ao desenho.
4 · Confirmar o que não tem volta
Critério H3 (controle e liberdade) e H5 (prevenção de erros).
Decisão de projeto Não foi observado no original: não movimentamos dinheiro nem cancelamos nada.
5 · Nada depende só da cor
Critério Semiótica: vermelho e verde são símbolos por convenção cultural, e não funcionam para quem não distingue cores. WCAG 1.4.3 (contraste de 4,5:1) e 2.5.5 (alvo de 44 px, nível AAA).
6 · Nenhuma função removida
Observado O original já fazia bem: estados vazios ilustrados, rótulo direto, assistente no WhatsApp e Pix no link da fatura.
Decisão de projeto Organizar e priorizar, sem substituir o que funcionava.
Na prática
Passeio pelo protótipo: cada marcador mostra o que mudou, e por quê
Prints do protótipo com dados fictícios. Clique nos marcadores, nas telas da faixa ou use as setas ← → do teclado dentro do passeio. As observações do original vêm do diagnóstico (conta nova, 23/10/2026). H = heurística de Nielsen.
Landing page · objetivo e premissas
Landing page: uma navegação mais fluida e moderna, com a informação que já existia, melhor distribuída
Navegar com mais fluidez
Uma entrada moderna para o produto, em que a pessoa encontra o que precisa sem se perder em páginas soltas.
Modernizar com intenção
Imagens, peso visual dado por elementos, componentes e fontes, e uma distribuição melhor da paleta de cores. As escolhas de cor, fonte e componente estão no design system.
O que já existe no site da marca
Todo o conteúdo parte do que está publicado no site da marca: verificamos as informações e as redistribuímos de forma mais eficiente.
O que esperamos Hipótese
Que uma navegação mais fluida e um visual mais atual passem mais status, confiabilidade e conforto a quem chega ao site.
É uma expectativa de design, e não um resultado medido.
Limites Sem validação
- Não houve teste com pessoas nem medição de conversão, tempo ou abandono.
- Contatos, valores, endereços e dados da landing são fictícios.
- O texto das páginas internas foi adaptado de páginas públicas, só para este estudo; preços e condições não são oficiais.
- A origem e a licença das imagens ainda não foram verificadas.
Para ir além: uma análise mais aprofundada pede pesquisa em profundidade, conversando com as pessoas que usam o produto para entender suas dores, suas necessidades e o que gostariam que a ferramenta oferecesse de forma mais efetiva.
Painel · o que mais exigiu trabalho
O painel foi onde mais olhamos a usabilidade, e onde criamos a liberdade e a antecipação
Heurística, semiótica e mercado
Avaliamos o painel original pelas 10 heurísticas de Nielsen e por uma leitura semiótica (Peirce), e comparamos o fluxo de criar cobrança em cinco produtos: o que fazem de bom e o que ainda não fazemos.
Detalhes nos slides de Diagnóstico, Concorrentes e "Da evidência à decisão".
Cada pessoa monta a sua home
O usuário escolhe quais blocos ver, a ordem e a largura de cada um, e adiciona outros pela biblioteca, de acordo com a sua necessidade.
Hipótese: quem prioriza o que usa chega mais rápido ao que importa. Ainda não testada.
Um assistente que fala com você
Ele traz as informações importantes para a pessoa não precisar procurar o dado: já avisa, e só age depois da confirmação dela.
Simulado: respostas pré-escritas e voz gravada, sem dados reais.
Onde ver no passeio
- Telas 1 a 6: o que mudou em cada tela, com a heurística por trás.
- Tela 7 · Personalizar: blocos, larguras, biblioteca e restaurar padrão.
- Tela 8 · Assistente: aviso proativo, ação com confirmação, voz opcional.
Limites Sem validação
- Sem teste com pessoas: não medimos tempo, erros nem uso real.
- A personalização fica salva só no navegador de quem a fez.
- O assistente é uma demonstração do conceito, não uma IA conectada à conta.
Para ir além: uma análise mais aprofundada pede pesquisa em profundidade, conversando com os usuários para entender suas dores, suas necessidades e o que gostariam que a ferramenta oferecesse de forma mais efetiva. O roteiro de teste está em docs/01-metodo-e-evidencias.md.
Diagnóstico do original (1 de 2)
O que encontramos, qual critério fere e o que decidimos
Menu com 17 itens soltos
Observado: sem agrupamento; dois itens do submenu de Cobranças não são cobranças.
Decisão: grupos por tarefa; os dois itens foram para Ferramentas.
Botão principal repetido
Observado: "Criar cobrança" no menu (azul) e no cartão de conta aprovada (verde), além do estado vazio.
Decisão: um botão principal por tela, no cabeçalho.
Início abre com promoção
Observado: carrossel de ofertas e checklist com 5 de 5 etapas, antes das pendências.
Decisão: pendências, saldo e vencimentos primeiro; checklist só se incompleto.
Número antes do nome
Observado: a saudação traz um número de documento antes do nome.
Decisão: "Olá, Paulo!".
Indicadores sem rótulo
Observado: marcas vermelhas em vários itens, sem dizer do quê.
Decisão: indicador com texto ("3 cobranças vencidas") e card de atenção com ação.
Vazio com tom de erro
Observado: Extrato vazio pede "tente novamente".
Decisão: "Nenhuma movimentação neste período", com atalho para ampliar.
Diagnóstico do original (2 de 2)
Mais cinco achados, e o que o original já fazia bem
Promoção em telas de trabalho
Decisão: cartão dispensável e contextual, que não ocupa o lugar da tarefa.
Notas fiscais: texto longo
Observado: cinco linhas antes do botão. Decisão: 4 passos com progresso e "Pular e emitir depois".
Janelas sobre o conteúdo
Observado: pesquisa de satisfação e balão de chat. Decisão: um assistente em lugar fixo e dispensável.
Pix vazio sem primeiro passo
Decisão: estado vazio que orienta a primeira ação.
Criar cobrança em 4 etapas
Fonte: Central de Ajuda (resumo de busca). Decisão: formulário único, cliente primeiro, valor líquido ao lado.
O que já era bom
Estados vazios ilustrados com botão claro, rótulo direto "Criar cobrança", assistente de IA pelo WhatsApp e Pix no link da fatura.
Antes × depois
Navegação: os mesmos recursos, organizados pela tarefa
Antes · 17 itens no primeiro nível
Entre parênteses, os subitens. Sem agrupamento.
Depois · grupos por tarefa
Recebimentos
Clientes
Dinheiro
Fiscal
Ferramentas
Mais
Por quê: reconhecer é mais fácil que lembrar (H6) e a mesma lógica vale em todo o menu (H4). Os dois itens que não eram cobranças saíram do submenu de Cobranças, que ficou com 6.
Antes × depois
Criar a primeira cobrança: de quatro etapas para uma tela
Antes · Central de Ajuda do Asaas
Depois · protótipo
Cliente primeiro
Busca e cadastro no próprio campo. Antes, ele aparecia na 3ª etapa.
3 campos obrigatórios
Cliente, valor e vencimento (+1 se o cliente é novo). A Cora documenta 8.
Valor líquido à vista
A pessoa vê quanto recebe antes de criar (H1, H5).
Antes × depois
Três decisões pequenas que mudam a primeira impressão, e o critério de cada uma
Primeira tela
Saudação com número → carrossel de promoções → cartão "conta aprovada" (5 de 5) → cobranças.
Saudação pelo nome → saldo, a receber, vencidas, recebido → "Precisa da sua atenção" com ação → vencimentos.
Por quê: H8 e H1 (menos ruído, status primeiro) e H2 (linguagem do usuário: nome, não número).
Extrato vazio
"Nenhuma transação encontrada. Por favor, tente novamente." Parece erro, e não há o que tentar de novo.
"Nenhuma movimentação neste período", com o atalho "Ver últimos 15 dias".
Por quê: H9 e H1. Não houve falha, então a tela não pede nova tentativa.
Notas fiscais
Texto de cinco linhas e um botão "Iniciar a configuração".
4 passos com progresso e a saída "Pular e emitir depois", com aviso para retomar.
Por quê: H8 e H10 (menos texto antes da ação, ajuda no ponto de uso) e H3 (uma saída para quem não vai emitir agora).
Mercado
Criar uma cobrança em cinco produtos, pelas páginas oficiais de ajuda
| Asaas (original) | Cora | Inter Empresas | iugu | Mercado Pago | Redesenho | |
|---|---|---|---|---|---|---|
| Estrutura | 4 etapas em sequência | 14 a 15 passos no app | 5 passos de caminho | Faturas com itens e rascunho | Link com título, valor, foto | 1 formulário · 4 blocos |
| Cliente | 3ª etapa | No início, mais nome, tipo de pessoa e documento | Selecionar ou cadastrar pagadores | Cadastrado antes, em outra área* | Sem cliente cadastrado | 1º bloco, com cadastro no campo |
| Campos obrigatórios | Não detalhados | 8 | Não detalhados (valor de R$ 2,50 a R$ 1.000.000,00) | Boleto registrado pede nome, CPF/CNPJ e endereço* | Não detalhados | 3 (+1 se cliente novo) |
| Pix na cobrança | Opção Boleto/Pix | Boleto com QR Code Pix | QR Code se há chave Pix | Boleto, cartão ou Pix* | Pix e cartão* | Pix como padrão |
* resumo de busca; a página oficial não abriu (erro 403). Comparamos o fluxo descrito na ajuda, não a qualidade geral dos produtos, e não usamos as contas internas dos concorrentes. "Passos" não são comparáveis diretamente (a Cora conta cada campo).
Mercado
O que cada um faz bem, e o que levamos para o redesenho
Cora
Bom: boleto com QR Code Pix num fluxo só; régua por e-mail, SMS e WhatsApp. Limite documentado: 14 a 15 passos e 8 campos.
Levamos: Pix como forma padrão.
Inter Empresas
Bom: caminho curto e limites de valor explícitos. Limite: dois rótulos em sequência para o mesmo caminho.
Levamos: o valor mínimo na mensagem de erro do campo.
iugu
Bom: itens detalhados, rascunho e escolha dos meios de pagamento. Limite: o cliente precisa existir antes.
Deixamos para o futuro: rascunho de cobrança.
Mercado Pago
Bom: link rápido, parcelamento, prazo e link fixo reutilizável. Atenção: fontes são blog.
Deixamos para o futuro: link reutilizável.
Voz do usuário · Reclame Aqui, 01/04 a 30/09/2026
O retrato geral é positivo; o que sobra mostra onde o desenho pode ajudar
Reputação máxima da plataforma. Nota média 8,4 de 10.
Das 1.851 reclamações recebidas foram respondidas.
Resolvidas. 76% voltariam a fazer negócio.
Nota na App Store, cerca de 1,7 mil avaliações.
Principais problemas comentados (reclamações de até 3 anos)
Barras azuis: temas que a equipe lê como ligados ao desenho (leitura nossa). "Cobrança indevida" pode vir de quem paga uma cobrança, não de quem usa o painel. A classificação do site é ruidosa; use a ordem de grandeza.
Voz do usuário
O que o redesenho responde, e o que fica de fora
Responde (no desenho)
- Divergência de valores e "não recebi o boleto": valor líquido, confirmação do que foi emitido e linha do tempo da cobrança.
- Pagamento não localizado: status com ponto, texto e cor, e histórico.
- App pior que a web: um layout responsivo para desktop, tablet e celular.
Fica de fora (oportunidade)
- Login e recuperação de acesso: não há tela de login no protótipo.
- Abertura real de conta: a landing só simula o cadastro.
- Cancelar conta ou plano: só cancelar cobrança foi desenhado.
- Atendimento humano: uma interface sozinha não resolve.
Resumo
Da evidência à decisão: o que sustenta cada mudança
| Decisão | Observado | Critério | Benchmark | Voz do usuário |
|---|---|---|---|---|
| Menu em grupos por tarefa | 17 itens soltos; 2 do submenu de Cobranças não são cobranças | H6, H4 | não comparado | não medido |
| Um botão principal por tela | Mesmo comando em azul e em verde | H4; semiótica (símbolo) | não comparado | não medido |
| Início por prioridade | Promoção e checklist concluído antes das pendências | H8, H1 | não comparado | não medido |
| Criar cobrança em uma tela, cliente primeiro | 4 etapas, cliente na 3ª (Central de Ajuda, resumo de busca) | H7, H1, H5 | Cora documenta o cliente no início, em 14 a 15 passos e 8 campos | não medido |
| Pix como forma padrão | Opção Boleto/Pix no original | decisão de projeto | Cora (boleto com QR Code Pix) e Inter (QR Code se há chave Pix) | não medido |
| Status com ponto, texto e cor | Indicadores sem dizer do quê | H1; semiótica (índice, símbolo); WCAG | não comparado | "Pagamento não localizado": 168 (leitura nossa) |
| Estado vazio sem tom de erro | Extrato pede "tente novamente" | H9, H1 | não comparado | não medido |
"Não comparado" e "não medido" significam que não buscamos essa evidência, não que ela seja negativa. Nenhuma decisão foi validada com pessoas: esse é o próximo passo.
Design system
Baseado nas cores da marca, organizado em papéis e com modo escuro
Por quê: uma única fonte de cores e tipografia sustenta a consistência (H4), e o contraste calculado garante que o texto seja legível em vez de depender de um tom escolhido a olho (WCAG 1.4.3).
Cores (papéis, não só tons)
Os quadrados abaixo usam os tokens ao vivo e mudam com o tema.
Onde uma cor original não alcança 4,5:1 para texto, o token de texto usa um tom mais escuro, e a cor original fica para gráficos e preenchimentos.
Tipografia e espaço
Olá, Paulo!
Precisa da sua atenção
R$ 12.480,35
Plus Jakarta Sans, sete níveis. Espaço em base 4, raios de 10 a 28 px.
Valores de exemplo, fictícios.
Contraste calculado
26 de 26 pares de texto passam de 4,5:1 (critério 1.4.3, nível AA). O menor, no modo claro, é 4,76:1 (status recebida).
Calculado por script a partir de tokens.css. Não verificamos contraste de bordas e ícones.
Status: ponto, texto e cor
A cor reforça, mas não carrega sozinha o significado.
Acessibilidade e leitura semiótica
Como os sinais da interface são lidos, e por que não dependem só da cor
O número no menu
Indica que existe pendência. No original, não dizia o quê. No redesenho vem com texto ("3 cobranças vencidas") e leva ao item.
Vermelho e verde
Significam por convenção cultural. Por isso o status tem também ponto e texto, e funciona para quem não distingue cores.
Documento, relógio, carteira
Significam por semelhança. No menu recolhido, cada ícone mantém nome acessível.
Alvos de 44 px
Corresponde ao critério 2.5.5 do WCAG, que é nível AAA.
Foco e teclado
Anel de foco de 3 px, Esc fecha, o foco volta ao gatilho. Movimento reduzido respeitado.
Limite
Desenhado e implementado, mas sem auditoria com leitor de tela nem teste com pessoas com deficiência.
Visão de futuro · o mercado
O que o mercado oferece hoje, nas páginas consultadas
| Capacidade | Asaas | Cora | Inter | Mercado Pago | Stone | Efí | iugu |
|---|---|---|---|---|---|---|---|
| Link de pagamento | ✔ | ✔ | — | ⚠ | ⚠ | ⚠ | — |
| Cobrança recorrente | ✔ | ✔ | ⚠ | — | ⚠ | ⚠ | ⚠ |
| Pix Automático | ✔ | — | ⚠ | — | — | ⚠ | ⚠ |
| Nota fiscal de serviço | ✔ | ✔ | — | — | — | — | — |
| Antecipação de recebíveis | ✔ | ⚠ | — | ⚠ | — | — | — |
| Celular como maquininha | ✔ | — | ⚠ | ⚠ | ⚠ | — | — |
| Régua de cobrança multicanal | ✔ | ✔ | — | — | — | — | ⚠ |
| Fluxo de caixa | — | ✔ | — | ⚠ | ⚠ | — | — |
| Acesso para contador | — | ✔ | — | — | — | — | — |
| Assistente de IA | ✔ | — | — | — | — | — | — |
✔ consta em página oficial lida · ⚠ só em resumo de busca ou fontes divergem · — não consta nas páginas consultadas (não prova que não exista; cada concorrente foi pesquisado só em cobrança e gestão). O Asaas aparece forte em cobrança, notas, antecipação e API (matriz completa em docs/07).
Visão de futuro · o que ainda podemos oferecer
Doze oportunidades, cada uma com evidência e forma de validar
O horizonte é uma proposta, por evidência e risco de bloqueio da pessoa. Não considera esforço de engenharia, que não avaliamos. São hipóteses, não promessas.
Visão de futuro
O que precisa de cuidado antes de qualquer evolução
IA e dinheiro
Nenhuma ação irreversível sem confirmação explícita, repetindo valor e destinatário, e com trilha de auditoria.
Regras do Banco Central
Pix, Pix Automático e Open Finance seguem a norma. Conferir na fonte, não nesta análise.
Aprender sem copiar
Marcas, textos e artes de concorrentes não entram no produto.
Dados e privacidade
Recursos com dados pessoais (como acesso do contador) exigem consentimento e registro de quem acessou.
O que falta
Como vamos saber se funcionou: teste com 5 a 8 pessoas
Tarefa 1
Criar a primeira cobrança de R$ 1.200,00 para um cliente novo, por Pix.
Tarefa 2
Descobrir quantas cobranças estão vencidas e reenviar uma.
Tarefa 3
Cancelar uma cobrança.
Tarefa 4
Transferir R$ 780,00 por Pix.
O que medir
Conclusão sem ajuda (sim ou não), tempo até concluir, número de erros e de voltas ao menu, e facilidade percebida numa escala de 1 a 7. Comparar duas versões com o mesmo roteiro. (Valores em reais do roteiro são fictícios.)
Transparência
Limites e fontes
Limites
- O protótipo é uma simulação; valores, nomes, datas e taxas são fictícios.
- O original foi visto numa conta vazia; a sessão expirou antes de abrirmos o formulário de criar cobrança.
- Concorrentes avaliados só pela ajuda oficial, sem acesso às contas.
- Não há teste com usuários; nenhum ganho de tempo foi medido.
Fontes (consulta em 23/10/2026)
- Nielsen Norman Group, 10 heurísticas de usabilidade (rev. 30/01/2024)
- Stanford Encyclopedia of Philosophy, Peirce's Theory of Signs (rev. 2022)
- W3C, WCAG 2.2: critérios 1.4.3 e 2.5.5
- Ajuda oficial da Cora e do Inter; suporte da iugu e blog do Mercado Pago (resumos)
- Reclame Aqui e App Store (abertas); Google Play (resumo de busca)
Para levar
Do que vimos ao que construímos, e ao que ainda vamos testar
Observamos o painel, medimos contra critérios conhecidos, comparamos com o mercado, ouvimos relatos públicos e só então desenhamos. O próximo passo é colocar o protótipo na frente de pessoas.
Simulação · conceito de design sem relação oficial com o Asaas