Plataforma de gincana de lixo eletrônico para ONG — vencedora do desafio
Pesquisa, personas e três telas na entrega que venceu, entre quatorze times.
Uma plataforma para a gincana interescolar de coleta de lixo eletrônico de uma ONG: escolas se cadastram, acompanham a coleta num ranking ao vivo, ganham selos e falam com a ONG. Desenhada em cinco meses, num time de três, contra quatorze times concorrentes — e venceu. Meu escopo foi a pesquisa primária — nove entrevistas em profundidade levadas até uma grade de análise que liga cada insight à fala que o gerou — mais as personas e a jornada, a cocriação do fluxo, e as telas de cadastro, FAQ e perfil da escola. A liderança do time era de outra pessoa, e a plataforma nunca foi construída.
- Função
- Designer within a three-person competition team — owned the registration, FAQ and school-profile screens, ran the interviews, built the personas and journey, and co-owned the user flow
- Período
- jan. de 2022 – mai. de 2022
- Stack
- Figma
- Evidência
- Design + código
- Arquivo de design
Desenvolver um website que auxilie as escolas que desejam ingressar na Gincana da Agenda Geek, explicando os principais pontos sobre o e-lixo e retirando as principais dúvidas sobre o funcionamento da Agenda Geek.
Este projeto faz parte da minha jornada pelo Desafio Ajude uma ONG promovido pelas comunidades Jovens UX&UI e VagasUX com duração de 5 meses (Janeiro – Maio de 2022).
Objetivo da Solução
- Demonstrar de uma forma simplificada como está a evolução das escolas participantes na gincana, assim como estimular o engajamento dos participantes.
- Fornecer um meio de comunicação rápido.
- Facilitar o acesso a documentos importantes e necessários.
Sumário
- Contexto (Principais Desafios).
- Descoberta & Definição (Processo de Design).
- Desenvolvimento e Entrega (Conclusão).
- Próximos Passos e Aprendizados (Resolução).
- Equipe 86 - Os Sobreviventes! (Quem fez o projeto acontecer).
Contexto
Atualmente o Brasil ocupa o 5º lugar dos países que mais geram resíduos eletrônicos. De acordo com relatório desenvolvido pela Universidade das Nações Unidas, o Brasil descartou, apenas em 2019, mais de 2 milhões de toneladas de resíduos eletrônicos, sendo que menos de 3% desse volume foi reciclado. — Relatório Green Eletron.
Um problema com tendência de aumento...
- 2 MILHÕES
- toneladas resíduos eletrônicos
- -3% Reciclados
- Porcentagem de e-lixo reciclado
Fonte: Relatório desenvolvido pela Universidade das Nações Unidas.
1🧑 = 2📱💻 dispositivos
Do total de 440 milhões de dispositivos 53% são celulares e os outros 47% computadores/notebooks/tablets.
Descoberta & Definição
Desk Research
Iniciamos essa etapa realizando uma Desk Research para compreender melhor sobre o segmento onde a ONG Agenda Geek atua. Os participantes realizaram leitura de relatórios e materiais fornecidos e consolidamos o conhecimento gerado em uma Matriz CSD. Na Matriz agrupamos por afinidade as informações de acordo com as partes interessadas no projeto (Escola, Alunos, Pais, Agenda Geek, Patrocinadores e Parceiros).
Análise de Competidores
Para avaliarmos o posicionamento da Agenda Geek em relação aos seus principais competidores, realizamos uma análise que nos permitiu levantar pontos fortes da ONG e oportunidades de melhoria.
Matriz de Impacto x Conhecimento
O grupo elaborou 6 protopersonas com base nas pesquisas realizadas até esse estágio. Esse estudo nos ajudou a direcionar melhor as dúvidas e perguntas que seriam levadas para a etapa de entrevista.
Durante a elaboração da protopersona atualizamos a Matriz CSD para verificar se alguma questão não havia sido abordada. Nesse estágio o grupo levantou muitos pontos interessantes para o projeto e por isso sentimos a necessidade de priorizar as dúvidas que seguiriam para a pesquisa com o usuário. Para definir a prioridade elaboramos uma matriz de impacto x conhecimento das protopersonas (Estudante, Escola, Agenda Geek e Pais).
Entrevista em profundidade
Para a etapa de entrevista em profundidade optamos por seguir apenas com as personas Aluno e Escola, pois acreditamos que, ao focarmos na solução dos problemas dessas personas, teríamos um impacto maior.
Construção do Roteiro
Com as dúvidas e insights da pesquisa resumidos, o grupo reuniu em um mapa de afinidade as principais dúvidas agrupadas por temas e depois realizamos uma nova reunião para verificar as principais dúvidas e definir o método de pesquisa mais adequado para saná-las.
Realização das entrevistas
- 9 📹
- Entrevistas
- 4 🧑🏫
- Representantes de escola
- 5 👲
- Estudantes
O resultado da pesquisa foi reunido em um novo mapa de afinidade onde separamos os principais insights das entrevistas.
O resultado em alta qualidade pode ser visto no FigJam.
Persona e Jornada do Usuário
As entrevistas nos ajudaram a validar e ajustar alguns pontos das personas. O contato com os usuários-foco durante as entrevistas permitiu ao grupo compreender melhor as suas rotinas e a partir desse olhar construímos a jornada da pessoa usuária e levantamos oportunidades.
Como poderíamos (HMW)
Para consolidar e alinhar a equipe em torno dos desafios que levantamos durante essa etapa o grupo utilizou a ferramenta “Como poderíamos” (how might we) com questionamentos extraídos das entrevistas e pesquisas realizadas. A partir das ideias que surgiram com o HMW, priorizamos quais soluções seriam levadas para a etapa seguinte.
Desenvolvimento & Entrega
Fluxo de Usuário
A partir das ideias que foram priorizadas na etapa anterior, pensamos nas seções e etapas que deveriam existir para auxiliar o usuário em sua jornada, criando um fluxo de usuário.
Crazy 8’s
A seguir, a equipe se reuniu para a realização do exercício Crazy 8s. A partir das seções e etapas pensadas na etapa anterior, cada membro da equipe idealizou 8 funcionalidades para a solução. Após cada integrante explanar suas ideias para o grande grupo, partimos para a votação e priorização das que o grupo entendeu que trariam mais resultados.
Wireframes
Foram feitos wireframes de cada desenho que foi priorizado na etapa anterior. O wireframe ajudou a equipe a compreender melhor o conceito do site e a desenhar o fluxo necessário para o usuário se inteirar da gincana, realizar a inscrição, mensurar seu resultado e entrar em contato com a Agenda Geek.
🎨 StyleGuide
Para a construção do Styleguide levamos em consideração os arquétipos e escolhas realizadas pela ONG na dinâmica que foi realizada em conjunto com os mentores. A partir dos principais pontos a equipe desenvolveu MoodBoards para inspirar a escolha das cores e fontes. O principal foco foi trazer a tecnologia associada à natureza.
Com essas definições básicas a equipe iniciou o trabalho de criação de componentes-base. Além de ganhar mais agilidade no desenvolvimento com os componentes, pudemos garantir a consistência dos elementos e aumento da produtividade da equipe de desenvolvedores do projeto. Todas as descrições dos componentes se encontram no arquivo do Figma.
💬 Diretrizes de UX Writing
A voz do site da Agenda Geek foi pensada a partir da entrevista feita com o fundador da ONG, e, a partir dela, foi montada uma tabela de voz (voice chart). A tabela de voz é um guia importante para que o conteúdo esteja alinhado com os objetivos da organização e das pessoas e pode ser utilizada como uma ferramenta de decisão. A tabela contém cada princípio do produto em uma coluna e, para cada princípio, cada um dos seis aspectos da voz é definido em uma linha diferente: conceitos, vocabulário, verbosidade, gramática, pontuação e maiusculização (capitalization).
Diretrizes gerais
- Título: até 45 caracteres
- Corpo do texto por seção: até 160 caracteres
- Botão(ões): até 25 caracteres cada um
Tabela de voz
Assim, o tom de voz pensado é mais entusiasmado, já que um dos atributos que representam a marca é apaixonada; mais respeitoso do que irreverente, já que trata de um assunto sério e deve ser acessível a todas as idades. O tom também é mais casual, podendo ser entendido por várias faixas etárias e puxando para um lado mais descontraído, pois o o intuito é ser acessível e jovial.
Tom de voz
Assim, o tom de voz pensado é mais entusiasmado, já que um dos atributos que representam a marca é apaixonada; mais respeitoso do que irreverente, já que trata de um assunto sério e deve ser acessível a todas as idades. O tom também é mais casual, podendo ser entendido por várias faixas etárias e não sério em demasia, mas mais engraçada, pois o o intuito é ser acessível e jovial.
Prova Real
Após termos elaborados os textos que iriam aparecer no protótipo dentro dos parâmetros mencionados anteriormente, utilizamos a ferramenta Hemingway Editor para nos certificarmos de que as frases concebidas eram simples e de fácil compreensão. De acordo com o próprio site da ferramenta, o ideal é que o texto apresentado seja compreensível para alunos da 9ª série em diante, estando as telas do projeto dentro desse espectro.
📦Protótipo
Conteúdos
A seguir, apresentamos uma tabela explanando o motivo de cada tela ter sido criada com o intuito de auxiliar os desenvolvedores e explicar o conceito por trás da solução.
🧪 Teste de Usabilidade
Nessa etapa, para verificar se o conceito e a navegabilidade estavam de acordo com as necessidades do usuário, aplicamos um teste de usabilidade não moderado utilizando a ferramenta Maze e o protótipo em alta fidelidade.
Roteiro do teste (expandir)
- 6 👥
- Testes aplicados
- 4 ✅
- Tarefas
- 68 🟡
- Score do Maze
De acordo com o Maze e, levando em consideração os indicadores de sucesso da tarefa, duração e abandono do teste, o protótipo ficou com uma nota média (68).
Devido ao tempo de entrega não conseguimos realizar testes moderados para avaliar as principais dificuldades no protótipo. Porém, de acordo com o feedback dos participantes, a principal dificuldade foi compreender como o Maze funciona e por isso eles tiveram dificuldade em completar algumas tarefas.
A recomendação da equipe seria realizar 5 testes moderados para validar o feedback ou avaliar as possíveis alterações no protótipo.
🎬 Apresentação do Projeto
Após 5 meses de trabalho árduo, tivemos a reunião de demonstração onde apresentamos o nosso projecto para o Fabiano Holtsmann (fundador e presidente da Agenda Geek), para os mentores e organizadores do desafio, e para as outras equipes que estavam competindo.
Após a apresentação, recebemos elogios de todos. Todas as equipes realizaram um excelente trabalho. De 14 equipes, 4 chegaram ao fim, e a nossa foi consagrada campeã, ganhando o desafio!
Demo Meeting
Próximos Passos e Aprendizados
- Fazer o handoff com a equipe de desenvolvimento.
- Definir e acompanhar as métricas de sucesso (NPS, Heart, CTR, ...).
- Criar roadmap com as ideias que não fora implementadas na primeira onda.
Melhorias para o próximo projeto (backlog):
- Implementar o roadmap criado.
- Realizar testes moderados para analisar a etapa de inscrição.
- Tornar responsivo todos os componentes da interface.
- Melhorar a usabilidade do formulário de inscrição.
- Aprimorar o visual dos artigos da página inicial.
Equipe 86 - Os Sobreviventes!
❤️ Feito com carinho pela Equipe 86.
Evidência
De 14 equipes, 4 chegaram ao fim, e a nossa foi consagrada campeã, ganhando o desafio. A plataforma nunca foi construída.