Enviar briefing
kv
role para explorar

Product Design

Design, front-end e back-end, feitos para converter.

Sou product designer e programo o que desenho. Nos dois últimos lançamentos, as páginas que construí converteram 5,96% em média, com R$ 523 mil de tráfego pago.

works_intro
works
Loja virtual · Sofá em 3D

Fassini Sofás

  • Loja virtual
  • Visualização 3D
Página de vendas · Formação

Formação IA UX Designer

  • Página de vendas
  • Formação
Site institucional · Contabilidade

HAP Contabilidade

  • Site institucional
  • Contabilidade
Plataforma de dados · Protótipo

SALVE · ICMBio

  • Plataforma
  • Dados ao vivo
Site institucional · Produtora audiovisual

Palma Content

  • Site institucional
  • Audiovisual
Página de captura · Indicador

Radar Pro

  • Página de captura
  • Mercado financeiro
works_outro
mission_in
mission

01 Em números

Prova, não promessa.

Dos painéis de anúncio dos dois lançamentos mais recentes, sem nome de cliente. Venda aqui é o ingresso de entrada do funil.

Conversão média real da página5,96%média ponderada das cinco campanhas
Do anúncio à vendaA soma das cinco campanhas, em dois lançamentos.
  1. R$ 523 milem tráfego pago
  2. ~12 miimpressões
  3. 70.818visitas pagas na página67% a 84% dos cliques chegam
  4. 4.224vendas
A mesma página, em todas as campanhasAs cinco ficaram entre 5,01% e 6,68% de conversão. O melhor anúncio chegou a 8,18%.

Conversão da página por campanha
CampanhaConversãoVendas
Lançamento A · turma 15,37%603
Lançamento A · turma 26,68%760
Lançamento A · turma 35,76%807
Lançamento A · turma 45,01%678
Lançamento B6,66%1.376
Média ponderada5,96%4.224
Melhor anúncio8,18%64
vision

04 Como eu entrego

Você aprova clicando, não imaginando.

Design, front-end e back-end numa cabeça só: o protótipo que você aprova é a própria página, sem telefone sem fio entre quem desenha e quem programa.

Protótipo navegável

Link, não PDF.

Você rola, clica e testa no celular antes de aprovar. As 22 páginas desta home abrem assim.

Abrir a loja da Fassini
Front-end

Rápido, animado e acessível.

Site estático quando basta, aplicação quando precisa. Pensado no celular primeiro.

Ferramentas: HTML (a estrutura que o Google lê), JavaScript (a interação dentro da página), TypeScript (código com tipos, menos erro no ar), Astro (páginas estáticas que abrem rápido), React (telas interativas, como painéis e quizzes), Next.js (aplicações com login e dados), Three.js (3D no navegador, como nesta home), GSAP (animação que acompanha a rolagem), Vite (empacota o código para ir ao ar).

Back-end

O que acontece depois do clique.

Login, painel do cliente, banco de dados, pagamento com webhook e e-mail automático.

Ferramentas: Node.js (a API que recebe cada pedido), Firebase (login, banco de dados e funções), Supabase (banco de dados e login em Postgres), Mercado Pago (pagamento confirmado por webhook), Zod (confere cada dado antes de salvar), Cloudinary (imagens otimizadas para cada tela), Vercel (hospedagem e deploy a cada ajuste), Cloudflare (domínio, DNS e proteção), GitHub (histórico de cada versão do código).

Do Figma ao ar.

  1. Design
  2. Protótipo
  3. Código
  4. No ar

O mesmo desenho vira protótipo, código e site.

Nota 100 no Lighthouse. Em sites entregues, medida por máquina.

vision_out
service_in
service

Soluções: vídeo com IA, motion, direção com IA e tecnologia da informação.

Vídeo com IA01 / 04

Vídeo com IA, em linguagem de cinema.

Cenas geradas com IA que mantêm rosto, luz e identidade do começo ao fim, com corte e ritmo de filme.

  • Vídeo com IA
  • Cinematográfico
Motion02 / 04

Motion que explica em segundos.

Animação feita em código, com Remotion, para proposta comercial e lançamento. O roteiro vira tela, quadro a quadro.

  • Motion design
  • Remotion
Direção com IA03 / 04

Direção com IA, mão de diretor.

Takes de tendências virais gerados no Higgsfield. A IA executa; a cena, o ritmo e o corte são decididos aqui.

  • Higgsfield
  • Vídeo vertical
Tecnologia da informação04 / 04

Servidor, domínio, DNS e e-mail.

Quando a página cai às onze da noite, não preciso abrir chamado com ninguém. Eu mesmo coloco de volta no ar.

  • Infraestrutura
  • Deploy
stellla
Personagem de capuz verde-limão e máscara branca, com grafites no mesmo verde em volta

Cada camada que eu domino é um fornecedor a menos na sua operação.

Uma cabeça só, do servidor ao criativo. O que sai daqui, eu assino.

  • Tecnologia da informação

    Servidor, domínio, DNS e e-mail. Quando a página cai às onze da noite, não preciso abrir chamado com ninguém.

  • Motion e vídeo

    Criativo em vídeo para tráfego pago sai daqui pronto, no formato de cada posicionamento, sem terceirizar a edição.

  • Direção com IA

    A IA trabalha aqui dentro como braço de execução. A direção visual, a jornada e cada decisão final continuam sendo minhas.

  • Performance

    Kit de campanha com verba real rodando: R$ 523 mil de tráfego passaram por páginas que eu construí.

Briefing

Me diz o que precisa subir, e quando.

Cinco minutos de formulário. Em até um dia útil eu digo o que dá, em qual prazo e por quanto, inclusive quando a resposta é não.