Serviços em acordeão
Cada categoria abre no "+" e mostra os serviços com descrição curta. Só uma fica aberta por vez, então a página continua leve mesmo com 16 itens.
UX WRITING -
UX DESIGN
cases e projetos · clique para abrir
MATRIX
case de UX · site institucional e de orçamento
Como transformei um portfólio em PDF de uma empresa de estrutura metálica com 20 anos de obra em um site escuro e premium, em que cada serviço leva direto a um pedido de orçamento no WhatsApp.
01
O contexto
A Matrix tem mais de 20 anos de estrutura metálica no Rio, galpão próprio, frota e equipe. Já entregou letreiros e lojas para Rock in Rio, The Town e Lollapalooza. Mesmo assim, toda essa história vivia num PDF de 16 páginas enviado por WhatsApp, sem um endereço que o cliente pudesse encontrar ou compartilhar.
A pergunta de UX era: como fazer uma serralheria parecer tão grande quanto os eventos que ela atende, sem perder o caminho curto até o orçamento?
02
O desafio
- Atender públicos muito diferentes: produtoras de eventos, comércios que precisam de galpão ou cobertura e famílias que querem escada, portão ou guarda-corpo.
- Organizar 16 serviços sem transformar a página numa lista cansativa.
- Mostrar dezenas de fotos de obra com qualidade irregular (fotos de celular e recortes de PDF) de um jeito que pareça premium.
- Fazer a equipe saber qual serviço o cliente quer antes mesmo de responder.
03
Arquitetura de informação
Organizei a página como um argumento de venda, da prova mais forte para a ação. A autoridade vem primeiro (os grandes eventos), depois as obras, a estrutura própria, o processo, os clientes e, só então, a lista de serviços, quando a pessoa já confia.
Promessa→
Grandes eventos→
Portfólio→
Estrutura própria→
Processo em 4 etapas→
Clientes→
Serviços→
WhatsApp com mensagem pronta
Os 16 serviços do PDF foram agrupados em 5 categorias por tipo de obra: estruturas e galpões, coberturas, escadas e mezaninos, serralheria e fachadas, eventos e contêineres.
No celular: topo com efeitos, logos dos eventos, filtros do portfólio e serviços em acordeão.
04
Decisões de interface
Um clique, uma mensagem pronta
Cada serviço abre o WhatsApp com "gostaria de um orçamento de: Mezaninos", por exemplo. O cliente só toca em enviar e a equipe já sabe o que ele quer.
Portfólio em vitrine 360°
As fotos giram num anel 3D, filtrado por categoria. O movimento valoriza as obras e disfarça a diferença de qualidade entre as fotos. Clique amplia, mouse pausa.
Logos como prova de autoridade
Rock in Rio, The Town e Lollapalooza aparecem logo após o topo, e uma faixa infinita de clientes repete a prova antes dos serviços.
Faíscas de solda
O topo tem faíscas, grade em perspectiva e brilho âmbar, e o cursor solta faíscas no site todo. Um detalhe que conecta a interface ao ofício da empresa.
Botão de WhatsApp sempre visível
Um botão flutuante acompanha a rolagem, e a chamada final oferece os dois telefones da equipe lado a lado.
Portfólio em anel 3D e serviços em acordeão: muito conteúdo, pouca carga visual.
05
Design system
Depois das primeiras versões, padronizei o site com tokens para que todo tamanho e espaço viesse de uma regra, e não do olho:
- Tipografia: escala de proporção 1.25 (base 16px), com títulos finos na Archivo levemente expandida e texto em Inter.
- Pesos: apenas três. 300 nos títulos, 500 em botões e destaques, 400 no texto.
- Espaçamento: grade de 8px (8, 16, 24, 32, 48, 64 e 96).
- Cor: tema escuro com dois tons de quase preto alternando entre seções e o âmbar da marca reservado para ação e destaque.
06
UX writing
| Princípio | Como ficou no site |
|---|---|
| Promessa clara no topo | "Soluções em aço que elevam o padrão da execução" |
| Números concretos no lugar de adjetivos | "20 anos", "900 m² de galpão próprio", "+20 profissionais" |
| Botão que diz o que acontece | "Solicitar orçamento", "Orçar para meu evento" |
| Reduzir o esforço do cliente | "Escolha o serviço e fale com a gente no WhatsApp. A mensagem já vai pronta." |
| Explicar o processo para tirar o medo | Contato e briefing, visita e orçamento, fabricação, montagem |
07
Acessibilidade e performance
- Animações desligadas ou desaceleradas para quem ativa "reduzir movimento" no aparelho.
- Faíscas do cursor desativadas em telas de toque e pausadas quando o topo sai da tela.
- Acordeão com botões reais e estado aberto ou fechado anunciado para leitores de tela.
- Fotos otimizadas e carregamento sob demanda. Site estático, sem plataforma paga.
- Dados estruturados de empresa local para busca no Google.
08
Aprendizados
O projeto foi construído em ciclos curtos com o cliente: cada rodada de feedback (fonte mais leve, seção menor, tema escuro) virou uma regra do design system, e não um ajuste isolado. Isso deixou o site mais consistente a cada versão.
Próximos passos: medir os cliques em cada serviço para descobrir quais geram mais orçamentos e ampliar o portfólio com fotos profissionais das próximas obras.
INSTITUTO ALENTO
case de UX · site institucional e de conversão
Como transformei um curso presencial conhecido só pelo boca a boca em um site pensado para o celular, com um caminho curto entre a primeira visita e a aula experimental no WhatsApp.
01
O contexto
O Instituto Alento é um curso presencial na Zona Oeste do Rio, com professores já conhecidos pelos alunos da região. Mesmo assim, a presença digital era só um perfil no Instagram, e o lançamento de dois produtos novos (Intensivo ENEM 2026 e Preparatório OAB) dependia de anúncios pagos que não tinham para onde levar as pessoas.
Na região, o Alento disputa atenção com colégios grandes que já oferecem pré vestibular junto com o ensino médio. A pergunta de UX era: como um curso pequeno ganha a confiança de quem nunca pisou lá, em poucos segundos e pelo celular?
02
O desafio
- Receber tráfego de anúncio, que chega frio, com pressa e quase sempre no celular.
- Falar com públicos diferentes no mesmo site: quem vai fazer o ENEM, os pais que pagam a mensalidade e bacharéis em Direito que trabalham durante a semana.
- Levar todo mundo para uma única ação de baixo risco: agendar a aula experimental gratuita.
- Permitir que a equipe saiba de qual curso veio cada contato, sem obrigar o aluno a explicar.
03
Para quem
A partir de conversas com o cliente e do briefing, montei três proto personas que guiaram as decisões de conteúdo e de hierarquia:
O vestibulando
Quer: uma reta final que caiba nas semanas que faltam até a prova.
Medo: pagar caro e virar só mais um numa sala lotada.
Precisa ver: datas, horário, professores e redação corrigida.
O responsável
Quer: segurança de que o filho vai ser acompanhado.
Medo: perder o dinheiro se a turma não fechar.
Precisa ver: preço claro, forma de pagamento e alguém para conversar.
O bacharel que trabalha
Quer: passar na 1ª fase da OAB sem largar o emprego.
Medo: não conseguir conciliar horário.
Precisa ver: comparação rápida entre as turmas.
04
Arquitetura de informação
Em vez de uma página longa tentando servir a todos, separei uma página por intenção. A home funciona como uma porta de entrada: em menos de uma rolagem a pessoa escolhe o curso ou agenda a aula.
Anúncio ou Instagram→
Home: escolher curso→
Página do curso (ENEM ou OAB)→
WhatsApp com mensagem pronta
Caminho alternativo: Fale conosco, com formulário curto, e a página de Obrigado, que explica o que acontece depois do envio.
Cada página de curso segue a mesma ordem, para que quem compara ENEM e OAB não precise reaprender a ler o site: o que é → como é a aula → quem dá aula → turmas e valores → dúvidas. Logo abaixo do título, atalhos em formato de chip (Como é, Professores, Valores, Dúvidas) deixam a pessoa pular direto para o que mais importa para ela.
Mobile first: as quatro portas de entrada vistas no celular, onde chega a maior parte do tráfego pago.
05
Decisões de interface
Barra de ação fixa no rodapé
No celular, o botão "Aula grátis" fica sempre ao alcance do polegar, junto de um atalho para os valores. A pessoa nunca precisa voltar ao topo para agir.
Um CTA principal por tela
O verde neon é reservado para a ação principal (agendar a aula). Ações secundárias, como "Ver valores", usam botão com contorno, para não competir.
Informação logística sempre visível
Endereço com link para o mapa e horário de atendimento aparecem logo no início. Para um curso presencial, "fica perto de mim?" é a primeira pergunta.
Faixa de benefícios em movimento
No topo, uma faixa repete os três argumentos mais fortes: aula experimental gratuita, turmas de até 15 alunos e unidade no Recreio. Prova de valor antes mesmo do título.
Comparação de turmas lado a lado
Na OAB, as turmas da manhã e de sábado viram cartões com o mesmo formato (horário, para quem é, preço), facilitando a escolha de quem trabalha.
Professores como prova social
Carrossel com foto, matéria, uma frase sobre o método e o Instagram de cada professor. Os nomes já conhecidos da região viram argumento de confiança.
Mesma estrutura nas duas páginas de curso: título, resumo em uma frase, chips com datas e duas ações claras.
06
UX writing
O texto foi escrito para responder às objeções de cada persona, na linguagem de quem está do outro lado. Alguns princípios e exemplos:
| Princípio | Como ficou no site |
|---|---|
| Verbo de ação e benefício no botão | "Agendar aula grátis", "Quero a turma de sábado", "Comparar turmas" |
| Datas concretas em vez de promessas vagas | "Início 10 de outubro", "Sábados, 8h às 13h", "Provas 8 e 15 de novembro" |
| Reduzir o risco percebido | "Assista a uma aula antes de pagar" e "Se a turma não abrir, devolvemos 100%" |
| Falar diretamente com quem decide | Bloco "É para o seu filho? Fale com a equipe antes de decidir" |
| Descrever o ganho, não a característica | "O professor sabe quem está ficando para trás" em vez de só "turma pequena" |
| Microcopy que tira dúvida no formulário | Campos marcados como "(opcional)", exemplo dentro da mensagem e a frase "Usamos seus dados apenas para responder ao seu contato" |
| Dizer o que acontece depois | Página de obrigado com 3 passos: recebemos seus dados, te chamamos no WhatsApp, você agenda a aula |
Professores, diferenciais e chamada final: cada bloco responde a uma objeção diferente.
07
WhatsApp como ponto de conversão
O público já resolve tudo pelo WhatsApp, então o site não tenta substituir a conversa: ele prepara a pessoa para ela. Cada botão abre o WhatsApp com uma mensagem pronta diferente (ENEM, OAB ou contato geral). O aluno só toca em enviar, e a equipe já sabe o curso de interesse sem precisar perguntar.
Para quem prefere não abrir o app na hora, o Fale conosco oferece um formulário curto, com o curso escolhido por botões grandes em vez de uma lista suspensa, mais fácil de tocar no celular.
08
Acessibilidade e performance
- Layout mobile first, pensado para telas a partir de 320px e para a área segura dos celulares com recorte.
- Link "Pular para o conteúdo" para quem navega pelo teclado ou leitor de tela.
- Alto contraste entre texto claro e fundo verde escuro, com o neon usado só em destaques.
- Áreas de toque grandes nos botões e chips.
- Site estático e leve, sem plataforma paga, que abre rápido mesmo no 4G.
- Títulos e descrições escritos para busca local ("Recreio" e "Jacarepaguá").
09
Aprendizados e próximos passos
O maior aprendizado foi tratar o site como parte de uma jornada maior, e não como uma vitrine isolada: o anúncio promete, o site confirma e o WhatsApp fecha. Cada tela foi desenhada para responder à pergunta que a pessoa tem naquele momento.
Próximos passos: acompanhar os cliques em cada botão de WhatsApp e a taxa de conversão das campanhas, testar variações de título nas páginas de curso e incluir os novos produtos do Instituto (mentoria e reforço) seguindo a mesma arquitetura.
CLARITY GLASS
case de UX · app do colaborador e UX content
Como transformei um regimento interno cheio de regras em um manual do colaborador acolhedor e fácil de consultar, pensado como o primeiro módulo (MVP) de um aplicativo para os colaboradores da Clarity Glass.
01
O contexto
Todo colaborador novo precisa conhecer as regras da empresa: ponto, faltas, uniformes, segurança do trabalho, conduta e sanções. Esse conteúdo costuma chegar como um documento jurídico, denso e lido só na hora de assinar.
A pergunta de UX era: como fazer um documento obrigatório virar uma referência que o colaborador realmente consulta no dia a dia?
02
Por que o manual é o MVP
O app do colaborador pode reunir muita coisa no futuro. Comecei pelo manual porque ele é o conteúdo que todo colaborador recebe, desde o primeiro dia, e o que mais gera dúvidas para o RH. Ele já foi organizado em capítulos curtos, que funcionam como as telas de um app.
03
Arquitetura de conteúdo
Organizei o manual numa ordem que vai do acolhimento à formalidade: primeiro quem é a empresa, depois a rotina, depois as regras e, no fim, o compromisso.
Boas-vindas→
Nossa história→
Rotina de RH→
Segurança→
Comportamento→
Sanções e canal de denúncias→
Termo de ciência
O sumário mostra cada capítulo com uma linha explicando o que tem dentro, para a pessoa saber onde procurar antes de abrir.
Missão, visão e valores em blocos; rotina de RH com destaques; tabelas para consulta rápida.
04
Decisões de conteúdo e interface
Cada capítulo com dois títulos
Um subtítulo manuscrito e humano ("Regras do jogo", "Rotina e relacionamento") antes do título formal. O tom acolhe sem tirar a seriedade.
Caixas de Importante e Atenção
As regras que mais geram problema, como ponto e hora extra sem autorização, ganham destaque visual para não se perderem no texto.
Tabelas no lugar de parágrafos
Faltas abonadas viram uma tabela com motivo, dias e documento necessário. A pessoa encontra a resposta sem ler a página inteira.
Mascote da marca
O mascote aparece nas boas-vindas e na segurança do trabalho, deixando o material mais próximo de quem está chegando.
Canal de denúncias em destaque
O contato do canal ético fica numa caixa própria, com a garantia de anonimato explicada em linguagem simples.
Termo de ciência pronto para o digital
O anexo final já prevê aceite por assinatura eletrônica, preparando o conteúdo para dentro do app.
05
UX writing
| Princípio | Como ficou no manual |
|---|---|
| Começar pelo acolhimento | "Bem-vindo(a) à Clarity" e "Tudo o que você precisa saber para começar bem" |
| Dizer para que serve antes de explicar | "Nossa referência comum sempre que surgir uma dúvida sobre rotina, conduta ou segurança" |
| Títulos humanos sobre títulos formais | "Regras do jogo", "Cuidar de si e dos outros", "Fale com segurança" |
| Instrução direta na hora certa | "Acompanhe sempre seus registros de ponto através do aplicativo" |
06
Design system
- Cor: escalas de azul e ciano, ligadas à identidade da Clarity e ao próprio vidro.
- Tipografia: família Aller, com uma fonte manuscrita só nos subtítulos de capítulo.
- Espaçamento: base de 4pt.
- Componentes: cards de sumário, caixas de alerta, tabelas e etiquetas de valores, documentados para serem reaproveitados nas telas do app.
07
Próximos passos
Levar os capítulos para dentro do app como telas navegáveis, com busca por tema, e somar novos módulos à mesma base de componentes.
DIAGNÓSTICO KAHMO
projeto autoral · em desenvolvimento
Uma ferramenta gratuita no site da Kahmo que avalia o site e o tráfego de um negócio e entrega um diagnóstico com prioridades de melhoria.
01
Estrutura do diagnóstico
O diagnóstico é dividido em três fases, para que o resultado aponte onde está o problema e não só que ele existe:
Marketing e Design→
Tecnologia e UX→
Automação e IA
02
A mensagem central
Na fase de marketing, o diagnóstico reforça uma ideia simples: criativo ruim é anúncio ruim. Antes de aumentar o investimento em tráfego, vale olhar para a peça que o público vê.