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
Página inicial do site da Associação Horizontes, com banner colorido e botão de doação no topo

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:

  1. 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.
  2. 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.
  3. 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.

Banner da página inicial com foto de uma criança, chamada sobre a associação e contadores de anos de história e vidas impactadas
O banner mostra quem é atendido. O botão de doar nunca sai do topo.
Seção de apresentação da associação com linha do tempo de fundação e vídeo institucional
A história curta, com datas, antes de qualquer pedido.

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.

Cards dos três projetos da Associação Horizontes com fotos das atividades e listas do que cada um oferece
Cada projeto com foto real das atividades e o que a criança faz ali. Doador quer ver para onde vai.

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.

Seção de doação com Pix de doação rápida e doação recorrente
Pix com um clique para copiar, QR Code num modal. A doação avulsa não pode dar trabalho.

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.

Página de prestação de contas com cards dos balanços patrimoniais de cada ano, com botões de visualizar e baixar
Cada ano, um card com o documento. Transparência que o doador verifica sem pedir.

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.

Página sobre lei de incentivo com a chamada para destinar parte do imposto de renda
O público que mais pode contribuir é o que menos sabe que pode. Uma página inteira para ele.
Página do projeto de artes marciais com logotipo do projeto, missão e números
Cada projeto tem página própria, útil também para prestar contas a patrocinadores.

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.

Três telas do site no celular: banner, doação por Pix e prestação de contas
No celular, a doação por Pix fica a um polegar de distância.

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.

Publicado em 29 de setembro de 2026

Próximo projetoWebsite · Dr. João Vitor GarciaDr. João Vitor Garcia, um site de ortopedia que começa pelo sintoma