Serafin
Site institucional e landing page de conversão
- Meu papel
- Programador Full Stack · Designer UX/UI
- Ano
- 2023
SerafinContexto
Site institucional e landing page de vendas da Serafin, fintech que combina gestão financeira via app com acompanhamento de um mentor financeiro humano. A página precisava vender ao mesmo tempo duas coisas raramente conciliadas numa única landing: confiança em tecnologia financeira e o valor de ter uma pessoa real acompanhando as decisões.
Problema
A proposta de valor da Serafin depende de duas frentes (app e mentoria humana) e a maioria das fintechs comunica só uma das duas. Sem uma página que explicasse com clareza como as duas partes se encaixam, o visitante chegava sem entender se estava contratando um aplicativo, uma consultoria, ou as duas coisas juntas.
Objetivo
Criar uma landing page que guiasse o visitante do problema (vida financeira desorganizada) até a ação (começar a usar ou agendar com um mentor) em sequência clara, provando com números e depoimentos que a combinação de tecnologia e mentoria humana funciona.
Processo
Hero direto: "A Serafin coloca você no controle da sua vida financeira", com CTA único ("Comece a usar agora"), mockup do dashboard e foto real de uma usuária, humanizando a proposta antes de qualquer explicação técnica sobre o produto.
Logo abaixo do vídeo explicativo ("Uma vida financeira simples, organizada e com dinheiro no bolso"), posicionei a prova social em números: +10 mil famílias impactadas, +95% de aprovação, +50 mentores financeiros, no momento exato em que o visitante ainda está processando a promessa do hero.
O fluxo de contratação da mentoria foi reduzido a 3 passos (Escolha, Agende, Pronto). Mentoria financeira tradicionalmente envolve várias etapas de agendamento e burocracia; a página precisava provar que aqui isso cabia em uma tela.
A seção "Serafin App Desktop" detalha três blocos do produto: "Diga Adeus às Planilhas" (sincronização automática de contas e cartões), "Defina suas Metas" e "Realize seus projetos de vida", cada um com mockup real do app, não ilustração genérica. A página vende o app mostrando o próprio produto em uso.
A seção "Mentor Serafin" só aparece depois da vitrine do produto: foto real de um mentor trabalhando, texto humanizando o acompanhamento. Decisão deliberada de ordem: primeiro provar a tecnologia, depois apresentar a pessoa por trás dela. A página fecha com depoimentos em vídeo de clientes reais.
O aplicativo, fluxo a fluxo
Todas as telas do app Serafin agrupadas pelos fluxos de uso, da abertura e do cadastro com Open Finance ao plano financeiro, às contas e ao perfil.
Abertura e login
A abertura usa o degradê verde-azulado da marca, do “Toque para iniciar” ao logo, e a mesma cor emoldura o login. O formulário pede só e-mail e senha, com “Esqueci a senha” logo abaixo e o botão “Entrar” desativado até os campos estarem preenchidos.
Onboarding: dados do cliente
O cadastro pede uma informação por tela (nome, e-mail, celular, código de confirmação e senha), com uma barra de progresso no topo. O botão de avançar só fica verde quando o campo é válido, o código chega por e-mail com opção de reenvio e a senha mostra os requisitos sendo cumpridos enquanto a pessoa digita.
Onboarding: conectar o banco
Antes de pedir qualquer dado bancário, o app explica o Open Finance com dois argumentos (segurança e privacidade). A busca encontra o banco em poucas letras, os dados de acesso são pedidos um de cada vez com o lembrete de que a conexão é criptografada, e o “Adicionar mais tarde” fica sempre visível para não travar quem ainda não quer conectar.
Lançamentos
A tela principal mostra o saldo do mês, entradas e saídas e a lista de lançamentos de todas as contas por dia, com ícone da categoria e parcela do cartão. Um aviso laranja chama para classificar os lançamentos sem categoria, e o ícone de olho esconde os valores para usar o app em público.
Classificar lançamentos
Classificar é rápido: o app lista o que está sem categoria, a pessoa escolhe entre despesas obrigatórias, variáveis ou receitas, com uma linha de exemplos em cada categoria (“Água, energia, gás, internet…”), e o lançamento já aparece com o ícone certo.
Resumo de despesas
Um gráfico de rosca divide o gasto do mês em obrigatórias, variáveis, financiamentos, dívidas e investimentos, com a porcentagem e o valor de cada grupo. Tocar num grupo destaca a fatia e abre as categorias dentro dele.
Busca e filtros
A busca filtra enquanto a pessoa digita e abre o detalhe do lançamento. Os filtros são chips por tipo, instituição, classificação e categoria; o botão mostra quantos filtros estão ativos e a lista filtrada ganha um selo no ícone de filtro.
Plano
O plano mostra a média das finanças no mês ou no ano: balanço líquido, renda e despesas médias em barras, a distribuição das despesas em blocos de cor e cada categoria comparada à média, com alerta quando passa do limite. Quando as despesas superam a renda, um card sugere falar com o mentor, ligando o app à mentoria humana.
Contas e cartões
As contas conectadas ficam em abas de contas e cartões, com saldo por tipo de conta, limite usado do cartão e data da última atualização. Adicionar outra instituição repete o mesmo fluxo do onboarding, então a pessoa já sabe o caminho.
Perfil e dados
O perfil reúne meus dados, alterar senha e assinatura. Trocar a senha pede a atual e a nova duas vezes, e trocar o e-mail exige o código enviado ao novo endereço, sempre com confirmação de sucesso no fim.
Serafin App Desktop
A versão desktop leva o mesmo produto para uma tela maior: menu lateral fixo com as áreas do app, o atalho "Fale com o seu mentor" sempre visível e painéis lado a lado (tabela à esquerda, resumo e alertas à direita), para quem prefere planejar as finanças no computador.
Solução
Landing page institucional completa: hero de conversão direta, prova social quantificada logo após o vídeo explicativo, fluxo de contratação em 3 passos, vitrine do app com mockups reais do produto, seção dedicada ao mentor humano e depoimentos em vídeo, desenvolvida com fidelidade total ao design.
+10 mil
famílias impactadas
95%
de aprovação no atendimento
+50
mentores financeiros na rede
Sistema Visual
A paleta do site usa o mesmo verde da marca do app, em tom mais escuro e saturado: reforça institucionalidade e confiança financeira na primeira impressão, antes de o visitante conhecer o produto por dentro.
Paleta
Verde Serafin
#125C46
Cor de marca: hero, CTAs principais e rodapé
Verde Ação
#1E8F5E
Botões de conversão ("Comece a usar agora", "Conheça o App agora")
Cinza Claro
#F4F6F2
Fundo das seções de prova social e "Como funciona"
Preto Editorial
#202120
Textos principais sobre fundo claro
Branco
#FFFFFF
Textos sobre fundo verde e cards de conteúdo
Tipografia
Albert Sans
400 / 600 / 700 / 800
Headlines, CTAs e textos de interface em todo o site
Aprendizado
Vender tecnologia financeira junto com mentoria humana exige provar as duas coisas separadamente antes de juntá-las: números e telas do app provam a tecnologia, foto e discurso do mentor provam o humano. Tentar comunicar as duas mensagens na mesma seção dilui as duas.
Outros projetos para conhecer.
JurídicoAlmeida & Costa Advocacia
Site institucional com UI/UX e tema WordPress em PHP desenvolvido do zero
Ver projeto
Saúde & EstéticaLúmina Estética Avançada
Site da clínica com UI/UX e tema WordPress desenvolvido sob medida
Ver projeto
Mineração & InstitucionalSamarco
Landing pages do Acordo de Reparação, com UI/UX e tema WordPress em PHP
Ver projeto