2022 – Web design e desenvolvimento
Melhorando a
experiência digital
de apadrinhamento
2022 – Web design e desenvolvimento
Melhorando a
experiência digital de apadrinhamento
Minha função
UX/ UI – Pesquisa UX, Visual design,
Design de interação, Desenvolvimento web
Equipe
Daniela Álvares (Gerente do Reconstruir)
Saimon Dias (Diretor do Reconstruir)
Linha do tempo
2 meses, lançado em Fevereiro 2022
Visão geral
Veja ao vivo em projetoreconstruir.org.br.
O Projeto Reconstruir é uma Organização Social sem fins lucrativos que atende 75 crianças e adolescentes da Comunidade “Morro das Pedras” em Belo Horizonte, desde 2005. Ofereci-me como voluntário para modernizar e melhorar a experiência no site da instituição e tive a honra deles aceitarem.
Declaração do problema
O site da instituição havia sido construído em uma plataforma antiga, era muito instável, tinha muitas informações importantes escondidas e seu visual não era interessante ou profissional.
Objetivos principais
Melhorar a experiência com uma navegação intuitiva e interações incríveis tanto na Web quanto em dispositivos móveis
Modernizar o design visual do site da instituição representando sua identidade e valores
Integrar novas e modernas funcionalidades para elevar os recursos da plataforma
Facilitar a curva de aprendizado para quem acessa o site pela primeira vez
Pesquisa e análise
Primeira reunião
Nesta primeira reunião nós coletamos mais insights e alinhamos o que mais seria interessante incluir nesta primeira versão do site.
Priorização
A equipe realmente tinha muitas ideias de melhorias para aplicar no novo site, então foi necessário priorizar e organizar as mais viáveis para implementar na primeira versão.
Deve ter
• Mobile-first
• Botão de doação fixo e destacado na parte superior
• Plugin que permite doações internacionais
• Plugins para LGPD
Poderia ter
• Plugin de formulário de contato
• Boletins informativos
• Testemunhos de padrinhos e familiares das crianças
• Banners de campanha mensais personalizados
Não vai ter
• Lista de espera para pais que querem seus filhos no projeto
• Redes sociais em destaque no topo
Moodboard e Guia de estilos
Construí um moodboard de referências, incluindo os principais ativos como cores, fontes, logotipo e outros elementos em um guia de estilos para facilitar o acesso rápido e acelerar a construção visual do site.
Processo de ideações
Após coletar referências de sites que a equipe já havia gostado, alinhei-os com o moodboard, e construí o layout em alta fidelidade das 2 primeiras sessões (mob e web) para facilitar a apresentação de ideias e o processo de aprovação.
Segunda reunião
Após a segunda reunião, depois da apresentação o layout foi aprovado. A equipe deu alguns feedbacks sobre esses pontos:
Quais as informações importantes a destacar quando falam do projeto
Não dar tanto destaque a números
Ajustar alguns detalhes sobre o projeto no layout
Trazer a foto de uma das crianças do projeto destacada no banner principal
Desafio: transferir o domínio
Nessa fase surgiu um desafio: transferir o domínio do site antigo para o novo serviço de hospedagem, porém, as senhas não estavam funcionando.
Tudo correu bem, mas levei algum tempo para atualizar as senhas antes de iniciar a implementação.
Desenvolvimento
🟢 Com as senhas de acesso e o layout aprovado, segui para o desenvolvimento do site. Apliquei técnicas como Pixel Perfect e Responsive Development para garantir os melhores resultados.
🟢 Como a experiência móvel precisava ser significativamente melhorada em comparação ao site anterior, adotei uma abordagem Mobile-First.
🟢 Para viabilizar doações internacionais, criei o site em português e inglês. Antes da entrega final, tive a versão em inglês revisada por um professor de inglês.
O novo site
Com animações e online! 😁
Aprendizados e opiniões
Sobre o jeito fácil
Geralmente queremos seguir o caminho mais fácil. Mas foi interessante aprender uma nova ferramenta para desenvolver este site. Isso me deu mais autoridade em relação a minhas opiniões com a equipe.
Seguir o padrão é tentador
Usar “default” ao configurar plugins é tentador, porém, existem regras que precisam ser configuradas de forma personalizada para obter os melhores resultados finais.
Palavras e termos
A realização de trabalho voluntário em um projeto social exige muito cuidado com as palavras e termos utilizados. Todos deveriam ter essa experiência em algum momento de sua carreira.
Agendamento de reuniões
Agendar reuniões de alinhamento com antecedência, te ajuda a visualizar prazos e mantê-los atualizados.
Solicitação de acesso
Solicitar todos os acessos no início é muito importante, pois ajuda a a visualizar os desafios que você enfrentará em outras etapas do projeto.
Sobre doações
Implementar a opção de receber doações de outros países não é uma tarefa fácil. Demorou mais tempo, mas o resultado final valeu o esforço.
O trabalho voluntário continua
O trabalho voluntário não acabou, continuo cuidando do site e fornecendo manutenção sempre que precisam. 😁
Vamos conversar sobre como transformar ideias em soluções reais?
Designed by Marcus Martins | 2025 © Todos os direitos reservados.