CASE STUDY · 01

UniTech.

Landing page de uma agência ágil de software. O briefing pedia velocidade percebida e prova social imediata — o objetivo era que o visitante entendesse o valor em menos de 10 segundos e tivesse um CTA à mão em qualquer ponto da página.

Papel
UI/UX Designer
Ano
2025
Stack
HTML · CSS · JS
Time
6 pessoas
andremluna.github.io/UniTech
CONTEXTO

O que estava em jogo.

A UniTech nasceu como projeto multi-disciplinar reunindo seis perfis — Scrum Master, PO, Front-End, Back-End, Full-stack e Design. O briefing era simples na superfície e denso por baixo: vender confiança técnica numa única tela.

O risco principal era cair na armadilha de toda landing de agência tech: jargão de processo, carrosséis genéricos de logos e "entregamos qualidade" em quatro idiomas. Pra fugir disso, estruturei a página em torno de uma pergunta de cada vez — preço, transparência e excelência técnica — cada uma respondida com sua própria seção e CTA.

DECISÕES

O que escolhi e por quê.

01

Prova social no primeiro fold

Quatro avatares humanos + "+100 clientes atendidos" abaixo do CTA principal. A decisão veio de uma observação simples: usuários de B2B não confiam em uma empresa que esconde quem ela já atendeu. Avatares reais (não ícones) fazem o cérebro processar "gente como eu" em milissegundos.

02

Metodologias como cartas paralelas

Scrum e Kanban viraram cartas com a mesma estrutura interna — "Páginas desenvolvidas", "Como usamos no dia a dia", "Nossas práticas". O paralelismo força a comparação justa e mostra que o time domina os dois jogos — não está vendendo um framework, está vendendo método.

03

FAQ como redutor de fricção

O acordeão de FAQ vive logo antes do rodapé porque é onde a objeção final acontece — "preciso de backend?", "posso usar IA pra escrever os textos?". Cada pergunta antecipada é uma micro-conversão: o visitante para de procurar motivo pra sair.

04

Reveal on-scroll, sem rolê

Usei IntersectionObserver puro em vez de libs externas pesadas. Cada bloco aparece com um leve fade + translate de 8px — o suficiente pra dar sensação de "descobrindo" o conteúdo sem virar parque de diversões. Performance: TTI < 1s no Lighthouse.

05

CTA recorrente, mas contextual

"Fale conosco" aparece 5 vezes ao longo da página — mas cada uma vem depois de um argumento diferente. Não é repetição por repetição; é dar à pessoa a porta de saída no momento exato em que ela está convencida.

STACK

Tecnologia enxuta.

Sem framework. Tudo HTML, CSS e JavaScript puros — landing page é o lugar onde bundle pequeno vira diferencial de conversão. Lighthouse rodou 98+ em Performance.

Markup
HTML5
Estilo
CSS3 · Grid · Flexbox
Lógica
Vanilla JS
Reveal
IntersectionObserver
Deploy
GitHub Pages
Tipografia
Web Fonts
PRÓXIMO PROJETO

ContaGotas — saúde preventiva.

Ver case study Voltar pro início