Fundada em 2020, a Earth Love United (ELU) é uma organização internacional sem fins lucrativos com sede na Nigéria dedicada a promover a conscientização sobre questões relacionadas ao clima. Eles acreditam um público informado é essencial para trazer um impacto ambiental positivo. Enquanto defendem soluções climáticas, eles acreditam firmemente que a presença on-line apoiará significativamente a realização de seu objetivo. Para isso, eles investiram em soluções por meio de campanhas de mídia social, podcasts, boletins informativos e o livro de seu fundador, The Green Energy Boom. A equipe da Earth Love United pediu que nós, designers de UX/UI do Guac Group, nos juntássemos a eles neste projeto.
A Earth Love United está particularmente interessada em envolver os jovens na luta pela justiça climática. Por causa disso, eles querem conectar pessoas que compartilham valores semelhantes. Para fazer isso, eles começaram a trabalhar em um aplicativo móvel que combina características de outras plataformas de mídia social, como Facebook e Instagram, e aplicativos de namoro, como Tinder e Bumble, para criar seu aplicativo.
1. Pesquisa e análise da plataforma existente, usando as 10 heurísticas de usabilidade de Jakob Nielsen, as regras de uso da Internet e descobrindo microinterações.
2. Comece com a iteração, usando como base o trabalho de design da equipe anterior e a nova proposta da nossa equipe. Em seguida, projetando maquetes de alta fidelidade para aprovação do cliente.
3. Testando com seu público-alvo, a Geração Z (até 24 anos de idade), para obter feedback.
4. Entrega final com modificações que foram feitas com o feedback coletado.
Eles haviam trabalhado anteriormente por um grupo de designers e precisavam de ajuda adicional para expandir seu projeto. Minha equipe e eu fomos responsáveis por fazer um análise atual de seu aplicativo móvel de mídia social e preparando um produto mínimo viável (MVP) com as mudanças apropriadas para o desenvolvimento.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendia vários enim em eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Anean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.png)
Começamos com um sessão de discussão entre um dos designers anteriores que trabalharam neste projeto e o cliente para obter todos os comentários e informações necessário para planejar as próximas etapas e debater ideias. Por fim, apresentamos os principais pontos que melhorariam a experiência do usuário.
As principais características que faltavam eram:
-Histórias.
-Seção de postagem e comentário com opção de compartilhamento.
-Vídeos curtos como TikTok e YouTube.
-Seção de bate-papo como qualquer outra plataforma social.
-Uma área de pesquisa (Pessoas e tópicos).
- Potencialmente utilizando morfismo de vidro.
O aplicativo contém cinco rotas vermelhas principais (casa, conexão, postagem, caixa de entrada e perfil), cada uma servindo a uma finalidade específica que, em última análise, se assemelhará a outras plataformas de mídia social, engajando assim o usuário. Ao fazer uma auditoria geral, obtivemos uma imagem decente de como os usuários interagirão com o aplicativo e o conteúdo de alto valor exibido.
As microinterações são essenciais para a funcionalidade de um aplicativo, forneça feedback instantâneo e relevante sobre uma ação concluída e ajude os usuários a direcionar sua atenção para onde ela precisa estar. Com isso em mente, com base no design anterior, pudemos explorar as possíveis microinterações que não foram criadas e como elas deveriam se comportar depois de implementadas.
O Avaliação heurística é uma parte essencial do design de um ótimo produto com o qual os usuários possam interagir facilmente e encontrar valor. Minha equipe e eu conseguimos encontrar pontos e inconsistências diferentes em todo o aplicativo. Além disso, fornecemos recomendações de acordo com a gravidade de cada caso.
.png)
Em seguida, criamos uma tabela que nos serviria de presente para trabalhar no pontos de dor encontrados classificando-os por gravidade, a regra heurística que estava infringindo e as recomendações.
Nosso processo de iteração começou usando descobertas durante a fase de pesquisa. Nosso foco principal era garantir texto e ícones contrastados de acordo com os padrões de acessibilidade. Além disso, elementos de interface de usuário consistentes em todo o aplicativo transmitir profissionalismo e confiança aos usuários. Finalmente, comparando as versões antiga e nova, podemos ter uma perspectiva clara da melhoria.
Embora o contraste de cores nos botões tenha passado pela acessibilidade, mudamos para um moderno e estético olhe.
Segue tendências atuais de design, adicionamos uma interface de glassmorphism toda vez que um campo de entrada de texto era exibido.
Na tela de login, alteramos a exibição dos ícones de mídia social e adicionamos um sublinhado no botão de inscrição para dar mais ênfase a ela.
Adicionamos uma opção de seleção de cartão diferente para as duas telas subsequentes e uma caixa para o botão “Agora não” para combinar com o botão acima para uma aparência mais elegante.
1. Adicionado histórias opção conforme solicitado pelo cliente.
2. Mudou a cor do ícone na barra de navegação na parte superior de verde para branco para melhor contraste.
3. Alterou a conta de cheque verde verificada de verde para azul para combinar com outras plataformas de mídia social e para fins de contraste.
1. Remova os ícones de não gostar, super curtir e curtir e, em vez disso, adicione um botão de seguir, com a opção de o usuário deslize para a esquerda e para a direita.
2. Foi adicionada a interface glassmorphism sob o nome para fins de acessibilidade.
1. Mude o ícone da mensagem por outro que contraste com o fundo escuro.
2. Em vez de usar botões de preenchimento para opções “pessoais” e “de grupo”, usamos um sublinhado e mudamos a cor das palavras para verde para combinar com as cores da marca.
3. O ícone da barra de navegação na parte inferior foi alterado para ser preenchido quando os usuários estiverem na tela.
1. Sob o perfil, esticamos a imagem pela tela para um melhor layout.
2. Também foi adicionada a interface glassmorphism sob o nome para melhor legibilidade.
3. Mudou a cor de “seguir”, “seguidores” e “postagem salva” para passar o contraste e adicionei uma seção dedicada para eles.
Com base na lista de microinterações que compilamos durante as etapas anteriores do projeto, criamos um design semelhante ao Instagram. Ao fazer isso, os usuários já estariam familiarizados com cada etapa e com o possível resultado quando interagissem. Isso nos daria o linha de base precisávamos desenvolver telas de alta fidelidade.
Os wireframes de microinteração serviram como base para o desenvolvimento de telas de alta fidelidade. Ao combinar as propostas existentes com as novas, entregamos um produto muito detalhado que fala o idioma do usuário.
.png)
Agora que tínhamos um aplicativo totalmente desenvolvido, era hora de testar com participantes que atenderiam aos nossos critérios. Nós escolhemos Geração Z (18 a 24 anos) pessoas interessadas em aprender sobre a crise climática e cConectando-se com pessoas que pensam como você. Além disso, eles precisavam estar familiarizados com as plataformas de mídia social mais populares. Primeiro, conduzimos um teste moderado para examinar as reações dos usuários.
-Descubra qualquer coisa possível problemas de usabilidade
-Identifique qualquer confusão com palavras e ícones
-Certifique-se de que as telas sejam intuitivo, e os usuários podem concluir as tarefas desejadas.
-Os usuários podem procurar um tópico ou pessoa específica?
-Como os usuários interagem com o recurso Connect?
-O que é do usuário experiência geral usando o aplicativo?
Depois que cada membro da equipe conseguiu concluir essa etapa, compilamos uma lista de notas contendo informações das entrevistas.
Todas as notas foram compartilhadas e começamos a observe padrões entre os entrevistados e o que eles vivenciaram durante a atividade. Usamos o mapeamento de afinidade para encontrar o feedback mais comum recebemos e pontos problemáticos que precisavam ser resolvidos.
Depois que o mapa de afinidade foi concluído, poderíamos organizar cada problema encontrado em categorias que nos permitiriam focar em implementando-os de volta no design. Nós os dividimos em quatro categorias: Crítico, Maior, Menor e Normal. Três deles, em particular, chamaram nossa atenção e precisavam ser abordados.
A função do recurso de conexão é restritiva e não é clara.
Resumo:
-O botão X foi esquecido, os usuários foram não tenho certeza de como seguir em frente.
-Os usuários que desejam ver um perfil anterior às vezes clicam acidentalmente no X.
-Não tenho certeza se o seguinte foi aprovado, preciso de confirmação.
Recomendações:
-Substitua o botão X pelas setas esquerda/direita para se mover entre os perfis.
-Adicione uma página/status de confirmação quando o botão de mensagem e seguir for clicado.
Não consigo distinguir entre mensagens novas e vistas
Resumo:
-Os usuários expressaram que as diferenças entre mensagens novas e vistas são muito sutis.
Recomendações:
-Texto em negrito da nova mensagem para se destacar mais.
O ícone da galeria de postagens salvas é confuso.
Resumo:
-Os usuários não são tenho certeza do que cada ícone significa.
Recomendações:
-Substitua os ícones por rótulos.
Depois de reunirmos e compilarmos todos os comentários de nossos participantes, mudamos para testes não moderados para obter informações adicionais, mas de forma mais rápida e imparcial. Um em cada três participantes apontou que o aplicativo se parece muito com o Instagram e o Tinder, que, aos olhos do nosso cliente, era exatamente o que ele procurava, cumprindo assim esse objetivo. Além disso, esta sessão validou nossas descobertas anteriores: o aplicativo é fácil de usar, direto ao ponto e se assemelha a outras plataformas de mídia social proeminentes.
.PNG)
.PNG)
Com base nos problemas encontrados, conseguimosPara implementar rapidamente as mudanças no design isso melhoraria o uso geral do aplicativo e engajamento do usuário. Essa seria a etapa final do nosso trabalho de design, que foi preparado para a entrega do desenvolvedor.
Para ajudar ainda mais comunicação entre minha equipe e os desenvolvedores, criamos uma documentação específica com anotações para ajudá-los a desenvolver o produto. Ao fazer isso, acabaremos por ajudar os desenvolvedores a entender a funcionalidade do aplicativo e como ele deve se comportar depois de lançado. O guia de estilo também foi incluído como referência, caso surja alguma dúvida.
.png)
Separando de minha própria opinião tendenciosa é fundamental para oferecer uma experiência de usuário excepcional. Portanto, é crucial analisar os dados da pesquisa do usuário. objetivamente formular uma forte justificativa para as decisões.
O processo de design é mudando constantemente, e a iteração é fundamentall. No entanto, não precisamos reinventar a roda. Em vez disso, simplesmente decompor os padrões de design existentes e implementá-los em nosso trabalho de design pode nos beneficiar.
Earl Love United compartilha objetivos semelhantes aos de muitas plataformas populares de mídia social. Conecte-se, envolva, ensine e conscientize jovens sobre nossa responsabilidade de cuidar das questões ambientais estão em sua essência.
