A tarefa
Software financeiro é comprado por gente a quem já venderam algo parecido. Uma parede de recursos não diz nada sobre o trabalho do dia a dia.
Então a página precisava responder uma pergunta: o que aparece na tela depois que você conecta uma conta. Mostrar a interface, mostrar o que acontece quando os dados chegam, e deixar o visitante ver o preço e pedir uma demonstração sem sair dali.
O que construímos
A primeira tela diz o que o produto faz
Três palavras ocupando toda a largura, Plan Save Grow, e embaixo uma frase sobre conectar bancos, cartões e a caixa de entrada das notas. O resto da tela é a interface: dois celulares com o saldo em caixa e o gráfico da semana.
Os números que a empresa publica sobre si mesma ficam na faixa escura logo abaixo, então o visitante recebe a afirmação e a prova na mesma rolagem.
O produto mostrado tela a tela
O bloco de visão geral desmonta a promessa. As contas se conectam uma vez, e daí o produto organiza cada linha conforme ela chega e diz quanto o mês custa antes de o mês acabar. As telas ao lado do texto mostram exatamente isso.
Depois vem um passo a passo curto, na mesma ordem em que o usuário passa por ele. Configurar o espaço de trabalho e os centros de custo, chamar quem aprova as despesas, apontar o produto para o extrato do banco e a caixa das notas, e ver as categorias se preenchendo.
Depoimentos de quem aprova as despesas
O bloco de depoimentos é um slider com um depoimento na tela por vez: um retrato, algumas frases e o nome e o cargo da pessoa. Quem cuida das finanças fala do que mudou na semana dela, não da sensação de usar o produto.
Um por vez é de propósito. Três citações lado a lado são lidas como um padrão, enquanto uma sozinha é lida de verdade.
Planos e o pedido de demonstração na mesma página
Três planos ficam lado a lado, com preço por espaço de trabalho, e o do meio marcado como a escolha mais comum. Cada um diz o que acrescenta ao anterior e para quem serve, então o visitante escolhe uma linha em vez de comparar uma matriz.
O bloco final oferece uma demonstração com os dados do próprio visitante, e não uma apresentação de slides. As dúvidas sobre preço ficam na página de planos, e o botão de cadastro segue no topo o caminho inteiro para baixo.
Por dentro do projeto
O site é um template comprado, reconstruído na identidade da marca, e essa reconstrução roda por script, não à mão. Veja como isso funciona e o que a página mede.
Notas do Lighthouse
Desempenho 98 no desktop
O Lighthouse mede a versão de desktop em 98 de desempenho, com o maior elemento desenhado em cerca de um segundo.
Acessibilidade 96 nos dois testes
A checagem de acessibilidade volta com 96 no celular e 96 no desktop: contraste, ordem dos títulos, descrição das imagens e o nome de botões e campos.
Nota cheia em SEO e boas práticas
O Lighthouse dá 100 em SEO e 100 em boas práticas, no celular e no desktop, sem nenhum item reprovado nas duas seções.
Um resultado de busca que cabe
O título tem 36 caracteres e a descrição 119, então os dois aparecem inteiros no resultado de busca em vez de cortar no meio da palavra.
Segurança
HTTPS sem caminho de volta
O endereço inseguro redireciona para HTTPS, e o servidor manda um cabeçalho HSTS com preload, então o navegador para de tentar o inseguro.
Privacidade
Nada rastreia o visitante
Não há script de analytics, nem gerenciador de tags, nem pixel de anúncio na página.
Versão mobile
Feita para o polegar
Com 390 pixels de largura a página tem exatamente 390 pixels, então nada escapa para o lado.
Processo de montagem
A remarcação roda por script
A fonte do template fica intacta, e um script aplica 107 regras de substituição sobre ela para gerar o site da marca: nomes, cores, tipografia, imagens, links.
No celular
O que saiu disso
- Dá para ver como o produto funciona antes do cadastro.
- A interface, os passos da conexão, os planos e o pedido de demonstração ficam em uma página.
- Cada afirmação da página tem uma tela ao lado.
O site leva o visitante da primeira frase até o botão de cadastro sem uma ligação no meio do caminho. Mostra a interface, passa pelo primeiro dia de uso, dá o preço e oferece uma demonstração com dados de verdade.
