UX/UI Designer Wagner Beethoven

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

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.

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;

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.

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

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.

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.

UI/UX Designer Capybem 9 Benchmark • Cataki • Desafio Ambiental • Intellibins • Litterati • Moeda Verde • Manuel de Etiqueta Sustentável • Sustentabilizando

UI/UX Designer Capybem 10 Identificação do público alvo Usuário Artesões Catadores

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.

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

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:

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%

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%

UI/UX Designer Capybem 16 Mapa mental Maiores detalhes: https://miro.com/app/board/o9J_kncBNMA=/?fromEmbed=1

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.

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.

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.

UI/UX Designer Capybem 20 Arquitetura da Informação

UI/UX Designer Capybem 21 Moodboard

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

UI/UX Designer Capybem 23 Protótipo em alta fidelidade

UI/UX Designer Capybem 24 Protótipo em alta fidelidade

UI/UX Designer Capybem 25 Marca

UI/UX Designer Capybem 26 Marca Cores utilizadas Conceito da construção do ícone

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

UI/UX Designer Capybem 28 Design System: Tipografia

UI/UX Designer Capybem 29 Design System: Cores e Botões Cores do aplicativo Botões

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

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.

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

Obrigado 😉😉