PortalAssociação Horizontes2025
Para uma ONG, o site não é vitrine. É onde o doador decide se confia.
- Cliente

- Papel
- Product builder: estratégia, design e desenvolvimento com IA
- Duração
- Cerca de 4 semanas, com atualizações ao longo de 2026
- Disciplinas
- Arquitetura de informação, UX/UI, Conteúdo, Desenvolvimento com IA

O contexto
A Associação Horizontes, de Votorantim (SP), tem mais de vinte anos de trabalho social e atende crianças e adolescentes em projetos de atletismo, artes marciais, dança e atividades recreativas. Começou num vestiário improvisado e chegou à sede própria. Vive de doações de pessoas físicas, de empresas e de projetos aprovados em leis de incentivo ao esporte e à cultura.
Um primeiro site foi feito rapidamente, em um dia, para ocupar o endereço. Poucos dias depois começou a versão definitiva, com um objetivo que guiou todas as decisões: captar recursos. De quem doa pouco e de quem pode destinar imposto.
A dor
Organização social disputa atenção com causas do país inteiro, e o doador tem uma dúvida que ninguém diz em voz alta: esse dinheiro chega mesmo? Sem resposta a essa pergunta, nenhum botão de doação funciona.
Havia ainda um público que quase nenhum site de ONG pequena atende: empresas e pessoas que podem destinar parte do imposto de renda a projetos incentivados. Elas não sabem que podem, e quando sabem, não sabem como.
O estudo
A arquitetura foi desenhada a partir de três perguntas de quem chega:
- O que vocês fazem? Quem somos, história, sede, estrutura organizacional e uma página para cada projeto, com missão, atividades e números do projeto.
- Posso confiar? Uma área de transparência inteira: prestação de contas com os balanços patrimoniais e demonstrativos de cada ano para visualizar e baixar, reconhecimentos oficiais e selos.
- Como eu ajudo? Três caminhos, do mais leve ao mais comprometido: doação rápida por Pix, doação recorrente e voluntariado. E um quarto, para quem tem imposto a destinar: a lei de incentivo.
O menu segue essa ordem. E o botão “Quero Doar” fica fixo no topo, em destaque, em todas as páginas.


A solução
A página inicial da Horizontes é um resumo de todo o site: quem somos, a missão em uma frase, os projetos, os caminhos de doação, a prestação de contas e as últimas notícias.

A doação foi desenhada para não ter atrito. O Pix aparece com chave para copiar e QR Code num modal; a doação recorrente e o voluntariado abrem um formulário curto de interesse.

A prestação de contas é a peça de confiança. Os balanços de cada ano ficam lado a lado, cada um com visualizar e baixar. Quem quer conferir abre o documento sozinho, sem a equipe precisar enviar nada. Cada ano novo é só mais um card: os demonstrativos mais recentes entraram meses depois do lançamento, sem mexer na estrutura.

A página de lei de incentivo explica, em linguagem de contribuinte, que parte do imposto devido pode ir para projetos sociais, e mostra o passo a passo.


Há ainda uma área de notícias com página por matéria, que registra eventos, certificações e conquistas e mantém o site vivo entre uma campanha e outra.
No celular, o banner, a doação e a transparência mantêm a mesma ordem de leitura.

Como foi construído
React com Vite e Tailwind, gerado e iterado com um construtor de interfaces com IA e refinado à mão. São mais de quinze páginas: institucionais, três projetos, transparência, prestação de contas, doação, lei de incentivo, notícias com página de detalhe, contato, privacidade e termos de uso. O formulário de contato envia por um script de e-mail na própria hospedagem da associação, com validação no servidor e limite de envios por endereço para segurar spam. SEO com sitemap, robots e imagens de compartilhamento. Banner de cookies com preferências.
O que eu levo desse projeto
- Em ONG, transparência é o argumento de venda. A página de prestação de contas convence mais que qualquer frase de impacto.
- Doação tem degraus. Pix avulso, recorrência, voluntariado e lei de incentivo são pedidos diferentes para pessoas diferentes. Colocar todos no mesmo botão desperdiça os maiores.
- Conteúdo que muda todo ano precisa de lugar fixo. Documentos anuais, notícias e slides do banner entram sem refazer página. Foi isso que manteve o site atualizado depois da entrega.
- Primeiro no ar, depois bem-feito. A versão de um dia ocupou o endereço; a definitiva teve tempo para ser pensada.
