Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Capybem

 Capybem

Apresentação feita para a defesa do desafio proposto plea empresa Capyba

Wagner Beethoven

October 23, 2020
Tweet

More Decks by Wagner Beethoven

Other Decks in Design

Transcript

  1. UI/UX Designer Capybem 2 Agenda 1. Problema proposto 2. Proposta

    do aplicativo a. O porquê de uma aplicação mobile 3. Etapas do processo de criação 4. Benchmark 5. Identificação do público alvo 6. Pesquisa com usuários a. Resultados 7. Mapa mental 8. User/Job Story 9. Personas 10.Recursos principais 11.Arquitetura da Informação 12.Moodboard 13.Wireframe 14.Protótipo em alta fidelidade 15.Marca 16.Design System a. Tipografia b. Cores e Botões c. Iconografia 17.Funcionalidades futuras
  2. UI/UX Designer Capybem 3 Problema proposto A poluição em relação

    ao ar e aos rios de Recife (ou em outra grande cidade) é algo muito visível no dia a dia das pessoas. Pensando nisto, uma cooperativa sugeriu a criação de um aplicativo que tivesse como objetivo a conscientização e o trabalho colaborativo dos cidadãos na preservação do meio ambiente. Para melhorar o engajamento na plataforma talvez seja necessário alguma estratégia de motivação, ficando a critério do designer do projeto. Levando este mini briefing em consideração, como você atuaria para criar uma solução para este problema.
  3. UI/UX Designer Capybem 4 Problema proposto Entregáveis: • Apresentação com

    seu processo e como chegou na solução. • Quais etapas, métodos e ferramentas você utilizou e porque. • 3 a 5 telas "tangibilizando" visualmente a solução. • Quais seriam seus próximos passos no projeto. Entregáveis opcionais: • User Stories dos atores envolvidos no projeto • Design Handoff;
  4. UI/UX Designer Capybem 5 Proposta do aplicativo Com o aumento

    dos impactos negativos causados pelo descarte inapropriado de lixo no meio ambiente, a reciclagem é uma das soluções para combater esse problema, além de representar fonte de renda para algumas pessoas. Pensando nisso, o Capybem vai informar e orientar as pessoas na separação e descarte do lixo, além de proporcionar que parte do lixo se transforme em renda seja através da venda realizada pelos catadores ou reciclagem feita por profissionais treinados. Para aumentar o engajamento das pessoas para o uso do Capybem, a gamificação estará presente através da premiação com selos virtuais obtidos na realização de algumas atividades propostas pelo aplicativo.
  5. UI/UX Designer Capybem 6 O porquê de uma aplicação mobile

    Dos países que mais usam a internet, o Brasil está em segundo lugar do ranque com 85% dos aparelhos móveis conectados, por isso foi decida a construção de uma aplicação mobile ao invés de desktop. Um outro fator que influenciou essa decisão é que nosso país tem 79% dos minutos gastos em aparelhos móveis, onde as aplicações mais utilizadas são do tipo mapas e trânsito (98%) e redes sociais (97%). As informações acima foram retiradas no site GUS.digital: gus.digital/comscore-apresenta-pesquisa-inedita-sobre-o-uso-dos-dispositivos-moveis-em-todo-o- mundo
  6. UI/UX Designer Capybem 7 Etapas do processo de criação •

    Benchmark (Análise dos concorrentes) para entender como os concorrentes estão tratando o mercado de lixo reciclável e não sair "demais" fora da curva. • Pesquisa de conteúdo para melhorar a imersão sobre o assunto tratado na solução, assim ter argumentos para construção de componentes. • Identificação e estudo do público alvo para fazer o levantamento sobre o posicionamento do público em relação ao tema abordado. • User/Job Story para entender como são realizadas algumas das ações realizadas aos descartes de lixo reciclável.
  7. UI/UX Designer Capybem 8 Etapas do processo de criação •

    Criação de personas para fazer com que os dados levantados na pesquisa sejam consolidados em personagens, cuja as características serviram como bases para justificar as funcionalidades sugeridas na aplicação com foco no usuário real. • Wireframes para validar o posicionamento dos componentes, fluxos das telas e das funcionalidades. • Protótipos em alta fidelidade para definir a identidade visual dos elementos utilizados no wireframe. • Design systems para documentar os elementos da interface do usuário.
  8. UI/UX Designer Capybem 9 Benchmark • Cataki • Desafio Ambiental

    • Intellibins • Litterati • Moeda Verde • Manuel de Etiqueta Sustentável • Sustentabilizando
  9. UI/UX Designer Capybem 11 Pesquisa com usuários A pesquisa foi

    feita através do Google Forms e compartilhada livremente nas redes sociais (Facebook, Twitter, LinkedIn) e pelos mensageiros (WhatsApp e Telegram). Para informações detalhadas sobre a pesquisa, acesse o link: https://www.notion.so/Usu-rio- 3fdabea7b16f4702a8a7b32bf2eae3c1 Os dados consolidados serão apresentando a seguir.
  10. UI/UX Designer Capybem 12 Pesquisa com usuários: resultados Idade 24-29

    anos - 10% 30-35 anos - 48% 36-41 anos - 38% 42-47 anos - 5 % • Ensino fundamental ou médio - 4,76% • Graduação: 33,3% • Especialização: 57,14% • Mestrado: 4,76% Grau de Instrução Fundamental/médio - 4,76% Graduação: 33,3% Especialização: 57,14% Mestrado: 4,76% Gênero • Homem: 47,6% • Mulher: 52,4% Localização •PE: 81% • AL, RN, RS e SP: 4.8% cada
  11. UI/UX Designer Capybem 13 Pesquisa com usuários: resultados Não separam

    para reciclagem • Papel: 62% • Vidro: 33% • Plástico: 48% • Alumínio: 48% • Lixo Eletrônico: 19% Separam para reciclagem • Papel: 38% • Vidro: 67% • Plástico: 52% • Alumínio: 52% • Lixo Eletrônico: 81% O que as pessoas fazem com cada tipo de material reciclável:
  12. UI/UX Designer Capybem 14 Pesquisa com usuários: resultados Buscam informações

    sobre poluição e descarte de lixo • Sim: 81% • Não: 19% Onde as informação são obtidas: • Jornais, revistas ou veículos de notícias: 58,8% • Redes sociais (Facebook, Instagram, Twitter e afins): 29,4% • Outros: 11,8%
  13. UI/UX Designer Capybem 15 Pesquisa com usuários: resultados • Ensino

    fundamental ou médio - 4,76% • Graduação: 33,3% • Especialização: 57,14% • Mestrado: 4,76% Consideram utilizar um aplicativo que dê informações sobre o descarte de lixo. • Sim: 71,4% • Não: 4,8% • Talvez: 23,8%
  14. UI/UX Designer Capybem 17 User / Job story User story

    • eu, como cidadão quero descartar meu lixo reciclável para cooperativa de catadores mais próxima da região onde moro. • eu, como cidadão quero obter maiores informações sobre como separar melhor os materiais propícios para reciclagem para posteriormente realizar a doação para uma cooperativa. • eu, como catador quero confirmar o recebimento da doação de um cidadão para que ele receba a pontuação e aumente sua posição no ranking na competição. Job story • quando estou dando aula, eu quero criar ou aumentar a conscientização da importância na reciclagem de lixo para que meus alunos contribuam com a preservação do meio ambiente.
  15. UI/UX Designer Capybem 18 Personas Heloísa da Conceição 32 anos,

    professora que acredita que só a educação poderá mudar o país e o mundo e essa mudança acontece com atitude. Felipe Lopes 50 anos, catador que busca conscientizar as pessoas sobre a importância da coleta seletiva para o meio ambiente.
  16. UI/UX Designer Capybem 19 Recursos principais O Capybem terá dois

    perfis de usuários. Algumas funcionalidades só estarão disponíveis para um determinado perfil. Todos os usuários • Dicas de separação do lixo. • Informativo sobre o meio ambiente e o descarte de lixo • Visualização de ranking em diversos níveis: estado, cidade e bairro. • Criação de grupo para competição interna de doação de material reciclável. Cidadão • Agendamento de horário para a coleta de material reciclável pelo catador/cooperativa. Cooperativa • Criar rota integrada ao aplicativo de mapa/trânsito até o local onde será realizada a coleta da doação de material reciclável. • Visualização do ranking dos usuários que mais realizaram doação para a cooperativa. • Confirmação do recebimento da doação de material reciclável.
  17. UI/UX Designer Capybem 22 Wireframe Para visualizar a imagem maior,

    acesse o link: wireframe- fullwidth.png O fluxo navegacional referente ao wirefreme pode ser acessado no link: wireframe-navigation.xd
  18. UI/UX Designer Capybem 27 Design System: Tipografia Independe de onde

    esteja, do idioma falado ou dos conjuntos de caracteres utilizados, a fonte deverá abranger toda a pluralidade gráfica utilizada pelos diversos povos espalhados no planeta, já que é obrigação de todos a preservação do meio ambiente. A família tipográfica escolhida para o Capybem foi a Noto, fonte que abrange um grande idiomas. Exemplo de aplicação da fonte ABCDEFGHI JKLMNOPQ RSTUVWXYZ abcdefghijkl mnopqrstu vwxyz
  19. UI/UX Designer Capybem 30 Design System: Iconografia Ícones dos materiais

    Os ícones que representam as categorias de materiais recicláveis são compostos pelos seguintes itens: • Cor padrão adotada mundialmente para a categoria do material reciclável • Nome do material reciclável • Imagem representativa Ícones das páginas
  20. UI/UX Designer Capybem 31 Funcionalidades futuras • Doação coletiva Possibilidade

    de realizar doação de lixo reciclável permitindo que condomínios, empresas ou famílias possam fazer doações em grupo. • Premiação real De acordo com os pontos que cada usuário tiver, ele terá a possibilidade de trocar esses pontos por prêmios reais nos estabelecimentos credenciados no aplicativo. • Carona solidária Visando reduzir as taxas de poluição causada por automóveis e trazer para o Capybem um novo perfil de usuário, os donos de carro poderão oferecer caronas pelo aplicativo e serão recompensados com pontos extras. • Incentivo bike Para reduzir o excesso de carros no trânsito e incentivar o de uso de bicicleta, cada percurso que o usuário fizer de bicicleta registrando as informações no Capybem ele será recompensado com pontos extras. • Artesanato Será adicionado outro perfil de usuário: o artesão. O Capybem irá contemplar os profissionais que utilizam materiais recicláveis para produzir suas obras e gerar renda, fazendo com que usuários "cidadãos" e cooperativas possam doar matéria prima para esses profissionais.
  21. Informações adicionais Todo o material apresentando aqui está documentando com

    maior nível de detalhes no link: https://www.notion.so/Funcionalidades-futuras-995443622be04cfe8017e76fe7923dff Todos os arquivos fontes estão disponíveis no repositório do OneDrive através do endereço: https://1drv.ms/u/s!AkkMpcXs4WkOkZ8hf-2dm53wppY_uA?e=I3JdpS