Toque no ícone para ver os tutoriais

Projeto 2

Portfólio

em construção

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

Conclusões: Impacto: As melhorias foram aprovadas pelos usuários e sentidas até mesmo pelos que não haviam percebido alguns detalhes. O que aprendi: Aprendi que sem os estudos de usabilidade, teria deixar passar alguns pontos importantes.

Conclusões Próximos passos



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 https://color.adobe.com/pt/create/color-contrast-analyzer

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.

Mockups variações de tamanho de tela

Mockups: tamanho da tela original

Mockup Inserção de depoimentos e voluntários

Mockup Menu principal fixado para que que o botão “doar agora” fique sempre aparente

Refinando o design Mockups Protótipo de alta fidelidade Acessibilidade

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

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

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

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

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.

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”

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.

Iniciando o design: Sitemap Wireframes em papel Wireframes digitais Protótipo de baixa fidelidade Estudos de usabilidade

Mapa da jornada do usuário

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.

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

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.

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

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

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.

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)

← Projeto 1 Projeto 3 →

Posts recentes