IPAS
Transformando realidades
O IPAS - Instituto Profissionalizante e de Assistência social, é uma ONG comprometida em promover projetos sociais para crianças, jovens e adultos em situação de vulnerabilidade, com foco na educação, cultura, capacitação profissional e assistência social.
A instituição já impactou diretamente mais de 6 mil pessoas em seus 13 anos de história, e atende a 850 famílias por mês com doações. O IPAS combate a desigualdade através de oportunidades, com o intuito de gerar impacto positivo na vida das pessoas vulneráveis e promover a transformação social.
Contexto do projeto
O problema
O IPAS passa por desafios na arrecadação de recursos e doações, não conseguindo viabilizar seus projetos e manter as ações sociais constantes.
Equipe
Time multidisciplinar formado por um Product Manager, dois Desenvolvedores, uma UX Consultant e um Analista de Marketing.
Meu papel
Como UX/UI Designer, realizei entrevistas e análises de concorrentes, criei personas, fluxos de usuário, wireframes e protótipos de alta fidelidade.
Metodologias
Para o processo de design, foi aplicado o Design Centrado no Usuário, que coloca o usuário final em primeiro lugar, considerando todos os insights gerados nas pesquisas. Já para o trabalho da equipe como um todo, foi utilizado o método Scrum, com sprints semanais.
Entender: Processo de Discovery
Matriz CSD
Quando iniciamos o projeto, sentimos a necessidade de compreender melhor quais eram os desafios reais que o IPAS enfrentava, para que pudéssemos criar algo que de fato ajudasse a ONG.
Dessa forma, o primeiro passo foi a realização de um brainstorming com todo o time, seguido da construção de uma Matriz CSD, com nossas certezas, suposições e dúvidas sobre o projeto.
Desk Research
Em seguida, realizei um Desk Research, com o objetivo de entender mais sobre ONGs e seus desafios.
Por meio dessa pesquisa descobri que as principais dores das ONGs são:
Dificuldade para captar recursos;
Conquistar credibilidade e confiança;
Manter uma gestão financeira efetiva;
Falta de inovação e estrutura interna.
Entrevista com a fundadora
Tendo em mente as dificuldades que as ONGs enfrentam de modo geral, senti a necessidade de me aprofundar no cenário do IPAS. Por isso, realizei uma entrevista com a sua fundadora, Maria de Lourdes.
Essa conversa trouxe insights valiosos sobre as dores da instituição, que se resumem em 4 problemas principais:
O IPAS não possui autossuficiência financeira;
A ONG não é reconhecida e apoiada na cidade;
O IPAS não tem um espaço próprio e adequado;
Não há maneiras efetivas de divulgar as ações do IPAS.
Especificar: problemas e soluções
Definição do problema
Depois de identificar os principais problemas enfrentados pelo IPAS, a equipe escolheu o mais crítico deles para solucionar: o IPAS não possui autossuficiência financeira.
Definição da solução
A equipe concluiu que a solução para esse problema seria a criação de um site como um MVP, tendo inicialmente apenas as principais funcionalidades.
Definimos, então, que o site seria formado por uma página inicial com as sessões ancoradas na barra de navegação fixa no topo, mostrando ao público quem é o IPAS e o que ele faz, com o intuito de captar doações.
Projetar: Ideação em conjunto
Proto Personas
Para iniciar o processo de ideação, realizei, em conjunto com a equipe, uma pesquisa secundária sobre o perfil dos voluntários e doadores das ONGs no Brasil.
Como o IPAS nunca teve um site, não temos usuários a partir dos quais construir uma persona baseada em dados de pesquisas próprias. Assim, a solução encontrada foi usar dados de outras instituições dentro do mesmo setor para criar proto personas. Dessa forma, conseguimos alinhar o time sobre para quem estamos desenhando a solução.
A partir dessa pesquisa, criamos duas proto personas para nossos dois grupos de usuários: doadores e voluntários.
Proto Persona: Doador
Proto Persona: Voluntária
Moodboard
Em seguida, criamos um moodboard com sites diversos, para inspirar o processo de cocriação que viria a seguir.
Moodboard com inspirações de UI
Crazy Eights
Com as personas em mente e depois de observar o que há no mercado, utilizamos o método Crazy Eights para esboçar 8 ideias diversas para a página inicial do IPAS, em 8 minutos.
Wireframes criados pela equipe durante a dinâmica do Crazy Eights
Wireframe
Após esse exercício criativo, apresentamos nossas ideias uns aos outros e agrupamos as melhores, construindo o wireframe da página inicial:
Wireframes digitais para a página inicial do site
Design: Protótipo navegável
A criação do protótipo foi um processo iterativo, no qual busquei constantemente feedbacks da equipe e verifiquei a viabilidade técnica do design com os desenvolvedores a cada versão e melhoria implementada.
Esse processo teve 3 etapas antes de chegar ao seu resultado final: a construção do style guide do IPAS, a análise de concorrentes e a criação do fluxo do usuário no site.
Style guide
O style guide determina as diretrizes de design de um projeto, documentando sua identidade visual através de cores, tipografia e componentes.
Na construção do site do IPAS, o style guide ajudou no desenvolvimento dos protótipos e na comunicação entre o time de design e desenvolvimento.
O style guide do IPAS contém estilos de tipografia, cores primárias, secundárias e terciárias, ícones e componentes. À medida que o projeto evoluir, o style guide ganhará novos elementos.
Análise de concorrentes
Também conhecida como benchmarking, a análise de concorrentes foi essencial no processo de pesquisa, uma vez que ele é contínuo, não se restringindo apenas ao discovery.
Através dessa análise eu pude identificar como outras ONGs construíram seus fluxos de doação, observando tendências e pontos positivos e negativos para a experiência do usuário.
A analise de concorrentes teve como foco o fluxo de doação nos sites observados, com a seguinte metodologia:
A partir da análise das percepções sobre cada concorrente, chequei a um resumo dos principais pontos postivos e negativos nos fluxos de doação estudados, o que me levou a gerar insights para o fluxo de doação do IPAS:
Fluxo do usuário
Através dos insights coletados através da análise de concorrentes, construí o fluxo de doação do IPAS de modo a ajudar os doadores a cumprirem seu objetivo de contribuir com a causa.
Definir o fluxo de doação do IPAS era fundamental para criar o design da página de doações, uma vez que ela resolve a maior dor da instituição: a captação de recursos.
Protótipo Navegável
Com o fluxo do usuário definido e as demais páginas do site projetadas, o protótipo navegável chegou a sua versão final:
Como o intuito do projeto é inicialmente lançar um MVP, mantivemos as funcionalidades e a interface simples, para atender às principais necessidades da ONG e contornar as limitações técnicas da equipe.
Testes de usabilidade e pesquisas com os usuários ainda serão realizadas para coletar feedbacks e melhorar a experiência. Esperamos, com isso, gerar impacto positivo no alcance e nos resultados do IPAS.
Aprendizados
Participar da criação do site do IPAS foi uma oportunidade valiosa de adquirir experiência em um ambiente real de criação e evolução de produto. Trabalhar em equipe junto aos desenvolvedores me ensinou muito sobre como um produto digital é construído, e como o design que eu faço será traduzido em código por eles.
Assim, consegui desenvolver mais empatia por esses profissionais, e melhorei minhas habilidades de design de interfaces e prototipação, entregando especificações que permitiram a escalabilidade do nosso projeto.
Além disso, foi muito gratificante ajudar uma instituição que muda a vida de tantas pessoas em situação de vulnerabilidade social. Saber que o produto que desenvolvi pode trazer ainda mais visibilidade, recursos e apoio ao IPAS foi um dos pontos altos dessa experiência.