Site responsivo – Fazer o Bem

Estudo de caso – Site para doação para causas humanitárias.

 

 

Visão geral do projeto: Fazer o bem é o site de uma organização não governamental que atua com doações à população de rua na Cidade do Rio de Janeiro. Duração do projeto: 11 dias (21 a 31/10/2024)

 

 

O problema: Organizações de doações a causas humanitárias normalmente se utilizam de pagamentos recorrentes, através de boletos com valores fixos, impossibilitando doações esporádicas.

A meta: Apresentar um site onde toda ajuda é bem vinda. Doações esporádicas sem limitação de valores são bem recebidas da mesma forma que doações recorrentes de altos valores.

 

 

Minha função: Designer de UX responsável por todas as etapas do processo de criação.

Responsabilidades: Condução de entrevistas Wireframes em papel e digitais Protótipos de baixa e alta fidelidade Estudos de usabilidade Estudo de acessibilidade Iteração Design responsivo.

 

 

Compreendendo o usuário:
Pesquisa com usuários – Personas – Declarações de problema – Mapas da jornada do usuário

 

 

Através de entrevistas com 10 usuários criei mapas de empatia para entender melhor suas necessidades. Percebi que muitos usuários se incomodam com valores pré-fixados pelas organizações, além de serem obrigados a fazerem doações através de boletos mensais. Outro grande incômodo são as mensagens apelativas através de e-mails fazendo com que a não doação seja uma dor, uma culpa.

 

 

Pontos problemáticos:
Valores: Sites normalmente oferecem apenas valores pré-fixados.
Boletos: Sites normalmente oferecem apenas boletos de pagamento.
Mensalidades: Organizações normalmente forçam o doador a fazer pagamentos mensais.

 

 

Persona: Renato
Definição de problema: Renato é um é um fotógrafo freelancer que precisa fazer doações online para caridade sem estabelecer uma quantia fixa porque não tem um salário fixo e não pode estipular uma quantia mensal.

 

 

Mapa da jornada do usuário.

 

 

Iniciando o design:

Sitemap – Wireframes em papel – Wireframes digitais – Protótipo de baixa fidelidade – Estudos de usabilidade

 

 

Após concluir o design do app, iniciei a criação do design do site responsivo. Na imagem ao lado apresento a arquitetura que se mostrou mais eficiente para a navegação.

 

 

E chegou o momento dos wireframes em papel. Baseada no sitemap, fui esboçando a página inicial com todas as informações importantes e depois segui um fluxo de doação, a maior atenção foi para o botão “doar”.

 

 

Wireframes digitais: Ênfase no botão “doar”, que fica na barra fixa Opção “outro valor”.

 

 

Feito o esboço simulando a tela do computador, fiz o mesmo simulando a tela do celular.

 

 

Imagem com variações de tamanho da tela dos wireframes digitais.

 

 

Após o comando do fluxo do usuário, enviei para 10 usuários e recebi feedbacks bastante interessantes.

 

 

Estudo de usabilidade: Parâmetros .
Tipo de estudo Estudo não moderado.
Local: Brasil, remoto.
Participantes: 10 participantes.
Duração: 5-8 minutos.

 

 

Descobertas: No primeiro protótipo, não fixei a barra de menu principal, 8 participantes solicitaram que o botão ficasse fixo. Também foi bastante sugerido que inserisse o botão de doação no rodapé. Muitas sugestões de apresentar depoimentos de outros doadores e voluntários.

 

 

Refinando o design:

Mockups – Protótipo de alta fidelidade – Acessibilidade

 

 

Mockups –  Menu principal fixado para que que o botão “doar agora” fique sempre aparente.

 

 

Mockups – Inserção de depoimentos e voluntários.

 

 

Mockups – tamanho da tela original.

 

 

Mockups – Variações de tamanho de tela.

 

 

Protótipo de alta fidelidade: O fluxo do protótipo de alta fidelidade seguiu o mesmo padrão do protótipo de baixa fidelidade, tendo como alteração a inserção de opção de depoimento, mo pop-up após a efetivação da doação.
Clique para acessar o protótipo

 

 

Considerações de acessibilidade: Títulos com tamanhos e fontes diferentes para facilitar a hierarquia. Textos alternativos ao longo de todo o site. Combinação de cores e letras testadas no  

 

 

Conclusões e Próximos Passos.

 

 

Impacto: As melkhorias foram aprovadas pelos usuários e sentidas até mesmo pelos que não haviam percebido alguns detalhes.
Aprendi que sem os estudos de usabilidade, teria deixado passar alguns pontos importantes.

 

 

Próximos passos: Mais uma atualização do protótipo de alta fidelidade baseada em nova rodada de teste.
Solicitação de pesquisa por usuários desconhecidos.