AAFESP
Associação de Anemia Falciforme do Estado de São Paulo
UI Design - Website
Protótipo de baixa fidelidade (Wireframe)
Protótipo de alta fidelidade
Style guide do produto
Protótipo navegável
Projeto educacional
Agosto/2020
ONG
Brasil
Proposta
O projeto foi executado durante a Semana do Product Discovery - promovido pelos canais XLab (antigo UXlab), Design Team e UXNow.
A proposta do evento foi apresentar soluções que poderiam resolver os problemas expostos pelas ONGs participantes.
Através do processo de discovery, desenvolver uma solução em curto período de tempo, um produto ou serviço que acomodasse as principais demandas da ONG escolhida.
Este projeto foi desenvolvido em equipe, com a Renata Rocha e Nicolas Menezes de forma remota.
Associação de Anemia Falciforme do Estado de SP
Escolhemos trabalhar com a AAFESP (Associação de Anemia Falciforme do Estado de São Paulo), uma ONG que tem como principal missão contribuir para a redução da mortalidade por Anemia Falciforme no Brasil e no mundo.
Um representante participou da live nos canais que promoviam o evento (a live foi transmitida simultaneamente nos três canais), expondo todo o trabalho da instituição, bem como suas principais dores e os maiores obstáculos para que fossem sanadas.
Desafios
Principais desafios do projeto:
Abordar uma dor que impactasse na missão da AAFESP;
Realizar o processo de discovery em pouco mais de uma semana;
Desenvolver uma solução que fosse viável técnica e financeiramente;
Testar, apresentar e entregar a proposta da solução para a ONG.
Como ajudar a AAFESP a informar as pessoas sobre a Doença Falciforme?
Alinhamento
Principal dor observada: Falta de Informação sobre a Anemia Falciforme.
Principais hipóteses
Qual a opinião das pessoas sobre a importância da ONGs.
As pessoas participam ou contribuem com ONGs?
As pessoas conhecem a anemia falciforme?
Existe informação disponível sobre a anemia falciforme para as pessoas?
Como elas recebem tais informações?
Se as pessoas recebem informações sobre ONGs e como recebem estas informações.
Como as pessoas portadoras da doença se comportam em comunidades virtuais.
Pesquisa
A partir das hipóteses foi englobado três frentes:
Desk research para saber o que havia disponível de informações sobre a Anemia Falciforme,
Netnografia a fim de entender como os portadores da doença se comportavam nas redes sociais, bem como suas principais dores
Pesquisa quantitativa para mapear o comportamento do público em geral com relação à atuação de ONGs.
Ideação
A partir dos insights da fase de pesquisa, a fase de ideação foi iniciada. As ferramentas utilizadas foram: Brainstorming e Lean Canvas. Para o alinhamento e definição do MVP foi utilizado a ferramenta MosCoW.
Proposta de Valor
Integrar os portadores da anemia falciforme com o público, resultando na disseminação do que é a anemia falciforme e das dificuldades enfrentadas por seus portadores.
Desenvolvimento do MVP
Para priorizar as funcionalidades que fariam parte do MVP (Minimal Viable Product), foi utilizada a matriz MoSCoW.
MVP
Uma plataforma com informações exclusivamente sobre a doença e gratuita.
Esta plataforma integraria o público geral, que poderia se informar sobre a anemia falciforme, com as pessoas portadoras, que poderiam compartilhar sua vivência.
O nosso produto seria um portal exclusivo sobre a Anemia Falciforme, que poderia ser integrado ao site da AAFESP.
Uma seção com vagas de emprego destinadas aos portadores, a fim de incluir estas pessoas no mercado de trabalho.
O portal teria informações gerais sobre a doença, notícias, fóruns de discussão, depoimentos e vídeos dos portadores da doença.
Criação
Mood board
O moodboard foi utilizado para as referências visuais do produto a ser desenvolvido.
User Flow
Foi mapeado os passos dos usuários para ter um panorama geral do produto digital. A estrutura foi pensada de forma a compreender como poderia manter uma experiência simplificada por toda navegação do portal website.
User flow
Prototipação: UI Design
Wireframes
No início foi criado wireframes de média fidelidade para que fosse possível a colaboração entre outros membros na construção do protótipo de média fidelidade no Figma. Os wireframes foram utilizados como base para a construção do protótipo de alta fidelidade, não sendo utilizados para testes.
Protótipo de média fidelidade
Página inicial
Protótipo de alta fidelidade
Desenhamos as telas do protótipo de alta fidelidade no Figma. Seguimos a identidade visual da ONG para definir as cores no interface visual para um website desktop. O design da interface ajudará principalmente a portadores de doença falciforme a se conectar com empresas que irão disponibilizar vagas de emprego e participarão de eventos de speed hiring. Não houve uso de um guia de estilo específico, mas foi levado em consideração uso do material design como referência.
Testes
Validação
Antes de lançar o produto, foi feito uma rodada de testes para revelar possíveis problemas de usabilidade através do protótipo de alta fidelidade.
Foram recrutados do público geral e analisadas suas primeiras impressões. A partir das observações durante os testes feitos de forma moderada e remota por vídeo chamada.
Houveram insights de melhorias no protótipo fossem implementadas para uma nova rodada de testes antes da entrega do protótipo final.
As opiniões dos usuários foram importantes para percebermos como a arquitetura da informação e hierarquia dentro de uma página são importantes, e desta forma, atingir o principal objetivo desse projeto: levar informações sobre a doença falciforme e dar visibilidade a problemas relacionados, principalmente, ao mercado de trabalho.
Problemas encontrados no layout:
"Não ficou claro o motivo do fórum e o mural de vagas no site."
"Poderia ser mais fácil para ler outros tópicos sem precisar voltar à página anterior."
"Não ficou claro que a página de Rostos da Anemia Falciforme é uma página de depoimentos, só entendi depois de rolar a página."
Layout Final
Acesse o protótipo de site desktop no figma através do link.
Página inicial
Página de notícias
Informações sobre anemia falciforme
Fórum de discussão
Lições aprendidas
Foi o primeiro projeto na área que pude aplicar e produzir artefatos entregáveis de UX e UI design. Fizemos o melhor que pudemos devido prazo curto para entrega.
Feito é melhor do que perfeito.
Melhoria contínua: errar, aprender, adaptar e melhorar.
Confiar no processo.
Frameworks não são bala de prata.
Mentorias são importantes, principalmente, quando é iniciante na área.
Alinhar durante todas as etapas, quando necessário, para não desfocar.
Nem sempre a solução é um produto digital totalmente novo.
Não sabotar o MVP, tornando - o muito complexo.
Procurar outras fontes de informações, como a netnografia, quando o tempo é curto para entrevistas.
Processos em Design:
Desk Research
Avaliação heurística
Netnografia
Pesquisa quantitativa
Indexação de pesquisa
Brainstorming
MVP
Wireframes de baixa fidelidade
Protótipos de alta fidelidade
Testes de usabilidade remotos com usuários.