ONG Jaguaracambé - Novo design de interface
Novo Design - site ong jaguaracambé
Nova proposta de design para o site da ONG Jaguaracambé
MINHA FUNÇÃO
DURAÇÃO
FERRAMENTAS
Trabalho freelancer
Designer de interfaces e experiência do usuário
3 semanas (05/2023)
Figma Miro Illustrator
PROMPT
A Jaguaracambé é uma associação não governamental, fundada em 0000 e que desenvolve e apoia ações para a conservação da biodiversidade. A ONG recebe doações e também consegue financiamento por meio de emendas parlamentares, ações governamentais e venda de produtos. A ONG possuía um site, mas os membros da diretoria não estavam muito satisfeitos com sua interface. A primeira versão do site foi feita por um profissional que não é da área de design para que o site estivesse no ar, então alguns problemas relacionados ao uso de cores, tipografia e a disposição das informações nas páginas eram evidentes.
O site para a ONG é uma forma de obtenção de recursos e veículo de divulgação e informação das ações e projetos desempenhados pela associação. A partir disso, meu trabalho foi o de entender melhor os problemas relacionados ao site antigo e as demandas que a equipe possuía relacionadas ao seu site e repensar um novo site, mais atrativa e funcional, que cumprisse sua função de veicular informações sobre as ações e projetos da Jaguaracambé.
O problema
O site antigo deixava a desejar em vários quesitos relacionados ao design e layout, e a associação desejava investir mais no site para usá-lo como ferramenta de captação de recurso e plataforma de divulgação.
- Como fazer um design para o site que auxilie na captação de recursos e divulgação da causa e seus projetos?
Solução
- Após a etapa de pesquisa, aspectos relacionados a atratividade natural do ser humano por imagens e criações visuais, e o grande potencial que imagens associadas a textos possuem diante a atenção humana, o foco estabelecido para o projeto foi a criação de um site imersivo, que prenda a atenção, ensine e ilustre a causa;
- Registros fotográficos e ilustrações relacionados a temática e trabalhos desenvolvidos pela ONG foram integrados como parte fundamental do design.
Protótipo de alta fidelidade - desktop
- Sugestão – clique na logo ou no nome “Figma” para uma melhor visualização e interação com o protótipo;
- O protótipo mobile e as telas estão disponíveis no final da página;
Habilidades
- Pesquisa;
- Ajuste de cores da paleta do site;
- Vetorização;
- Wireframe de alta fidelidade;
- Novo design da interface para o site;
- Criação da página de produtos do site;
- Protótipo de alta fidelidade (mobile e desktop);
- Responsividade;
- Testes de uso;
escopo do produto
O site da associação tem por finalidade servir como um meio de captação de recursos e veículo de divulgação e informação das ações e projetos que a ONG realiza e apoia. As informações para a realização de doações estão disponíveis no site, assim como os produtos disponíveis para venda e suas informações. Os projetos e ações também são explicados e expostos em páginas dentro do site. O site é constituído basicamente por landign pages.
DESIGN PROCESS
PONTO DE PARTIDA
USUÁRIOS ALVO
- Pesquisadores e estudantes da área de preservação da biodiversidade; – divulgação cientifica e parcerias;
- Possíveis empresas ou pessoas doadoras; – doações/financiamento
- Curiosos sobre o assunto; – retorno do conhecimento científico a comunidade e conscientização
QUESTÕES INICIAIS
Para iniciar meu trabalho, parti de algumas dúvidas iniciais para começar a etapa de imersão:
- Como expor o conteúdo de texto de forma atrativa e que gere interesse nos usuários que não possuem conhecimeto prévio sobre os trabalhos e ações da ong? – imagens como resurso narrativo junto ao texto é uma boa opção?
- As pessoas em geral conhecem coisas relacionadas a ONG? por exemplo as famíias que a ong trabalha, ou é interessante ser uma exposição mais ilustrativa?
- Em geral as pessoas doam para ONG’s no seu cotidiano? Ou a obtenção de produtos gera mais resultados?
PESQUISA
Pesquisa 1 - PESQUISA COM USUÁRIOS
- Para tirar algumas dúvidas e entender melhor algumas questões
- Plataforma usada: Google Forms
- Usuários: 00 usuários responderam a pesquisa, os usuários possuiam perfis diversos e foram recrutados de TAL FORMA
- As perguntas visam ter uma visão geral
RESULTADOS
- De forma geral, os resultados mostram que a maioria das pessoas consideram que imagens associadas a textos auxiliam na compreensão do que está escrito. A utilização de imagens como forte recurso visual integrativo no site pode auxiliar nessa compreensão;
- A maioria das pessoas que votaram colocam que não possuem o hábito de doaram para ONG’s, ao mesmo tempo que mais da metade já adquiriu algum produto ou serviço fornecido por uma ONG. Isso pode indicar que devolutivas e ações mais integrativas podem gerar mais retorno para a associação. É interessante destacar a disponibilidade e oferecer uma boa caracterização dos produtos disponíveis no catálogo de produtos solicitado para o site, afim de oferecer informações necessárias para o usuário e gerar um bom reconhecimento do produto ;
- O desconhecimento por mais da metade dos participantes por pelo uma das famílias que a ONG trabalha sinaliza que é interessante uma melhor ilustração e explicação a que animais estão relacionados a essas famílias, o uso de imagens pode ser bem utilizado aqui;
PESQUISA 2 - DOAÇÕES
OBJETIVO
Entender melhor as formas de doações e financiamento de ONG’s e como o site pode auxiliar nesse processo
MÉTODO ESCOLHIDO
- Desk research
Afim de criar conhecimentos que ajudem na tomada de decisão, os dados secundário obtidos com a psquisa serviram para dar base ao projeto e responder na dúvida levantada
Para compreender melhor como o site pode auxiliar no processos de arrecadação de doações para a ong, comecei pesquisando sobre formas de doações, principalmente sobre emendas parlamentares, já que a ong já conseguiu uma e pretende tentar outras. Em suma, emendas parlamentares são recursos do Orçamento público que podem ser alocados por indicação de deputados estaduais, deputados federais e senadores. Normalmente os parlamentares enviam estes recursos para suas regiões de origem.
Em 2021, por exemplo, cada congressista teve pouco mais de R$ 16 milhões para alocar. Um recurso significativo!
A pesquisadora Maria Luiza Souza Caetano, em seu artigo sobre sites de Organizações Não Governamentais coloca que:
Oliveira e Santos (2013) afirmam que vários projetos da Internet não cumprem às expectativas programadas, se abortando na imensidão no universo virtual, não resultando em engajamento ou reforço. Portanto faz – se essencial que as ONGs se manifestem publicamente
de forma clara. Machado e Pérsigo (2015) esclarecem que planejar a melhor maneira de galgar espaço nas mídias de comunicação é fundamental para a sobrevivência dos movimentos.
Tal colocação mostra claramente que a existencia, matutenção e uso de um site por ongs pode ter um impacto positivo em seu crescimento
RESULTADOS
- Como a ONG já recebeu uma emenda parlamentar, fazer um site que possa ajudar na atração de novas oportunidades como essa é essencial. A ONG iniciou suas atividades com o auxílio financeiro de uma emenda parlamentar e essa é uma boa possibilidade de arrecadação para que a ong continue seu trabalho.
- O repasse da verba de emendas parlamentares é feita por indicação de deputados estaduais, deputados federais ou senadores, e o site se mostra um bom produto para auxiliar nessa tentativa de novos recebimentos de repasse de verba, por ser uma plataforma que ilustra e sintetiza os projetos e atividades realizados pela ONG, é um bom cartão de visita e um bom produto para ser mostrado junto a uma explicação inicial sobre a associação.
OUTRAS OPÇÕES
- Sintetizar as ações da ong para possíveis colaboradores e financiadores
- Não só doações por meio de emendas, mas doações por pessoas do público geral também podem se deparar com o site da ong, conhecer mais sobre e querer doar para a causa.
Pesquisa 2 - Usuários e exposição do conteúdo
objetivo
- Buscar formas eficientes de expor o conteúdo do site de forma atrativa e imersiva para gerar interesse e entendimento sobre as ações e projetos da ONG
MÉTODO ESCOLHIDO
- Pesquisa bibliográfica online;
- Desk research – criar conhecimentos que ajudem na tomada de decisão;
Para pensar em uma boa forma de expor os conteúdos do site de forma bastante atrativa e imersiva, comecei realizando uma pesquisa online sobre a imagem e atenção, aprendizagem. Algumas citações dos estudos serviram de base para o desenvolvimento do design.
RESULTADOS
- CITAR O PARALELO ENTRE A ADOÇÃO E AJUDA A ANIMAIS SILVESTRES
- Logo, é claro que a imagem e a fotografia ajudam a aproximar o conteúdo exposto ao consumidor do produto oferecido, e o uso estratégico de imagens, no caso escolhido, fotografias, pode egrar um resultado satist=fatório diante a audiencia da ong e ajudar na arrecaç~~ao de fundo e venda de produtos
há uma predisposição das pessoas pela informação visual (Dondis, 2007) - Afotografia foir escolhida por ser uma boa opção e pla ong possuir um bom registro fotografico de seus trabalhos as que não foram de autoria de membros da ong estão referenciadas.
DECLARAÇÃO DA HIPÓTESE
- As pesquisas mostraram que o uso de um site por uma obg pode ser vantajoso na captação de recurso sim
- É necessário um fluxo de uso intuitivo e imerssivo, e para isso, o uso de fotografias dos projetos alinhadas junto a narrativa descritiva dos proejtos pode facilitar a leitura e torna la mais marcante;
- O uso de imagens junto a narrativa do texto ajuda a ilustrar procedimentos e até animais que não são tão conhecidos pelo público geral
SITE MAP
- Versão inicial, desenvolvido seguindo as necessidades que a ONG apresentava.
DECISÕES DE DESIGN
LOGO
TIPOGRAFIA
Desktop
MOBILE
CORES
- Para manter a identidade visual ja estabelecida da ONG, foi realizado apenas um ajuste de tom nas cores utilizadas originalmente em seu site e logo afim melhorar o contraste e deixar as composições visualmente mais agradáveis.
- Variações das cores primária, secundária e terciária foram estabelecidas para eventuais usos, para uma melhor flexibilização do uso dessas cores, mas sem causar grandes afastamentos do conceito e identidade visual da escolhida para a ONG.
O SITE
DESKTOP
Página Inicial
PÁGINA - PROJETO SOU, EU PEQUI
PÁGINA - PROJETO AVALIAÇÃO SANITÁRIA
PÁGINA - NOSSOS PRODUTOS
PÁGINAS EM CONSTRUÇÃO - ESPÉCIES
A fim de chamar a atenção com uma quebra de expectativa e causar um sentimento de curiosidade para ver as outras páginas, ilustrações com animais representantes das espécies que a ONG trabalha foram desenvolvidas. Elas também têm o intuito de reter o usuário no site.
MOBILE
IMPACTO ESPERADO
Fazer com que as pessoas fiquem mais tempo no site e conheçam a causa, para aumentar a chance de doações, parcerias, aquisições de produtos e conscientização sobre a causa. Apresentar bem a ONG, suas ações e projetos para que eventuais parceiros conheçam e entendam bem a causa, facilitando a comunicação entre a organização e eventuais parceiros.
PROTÓTIPO DE ALTA FIDELIDADE - DESKTOP
- Sugestão – clique na logo ou no nome “Figma” para uma melhor visualização e interação com o protótipo.
Protótipo de ALTA FIDELIDADE - MOBILE
- Sugestão – clique na logo ou no nome “Figma” para uma melhor visualização e interação com o protótipo.