Slide 1

Slide 1 text

UX/UI Designer Wagner Beethoven

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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;

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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:

Slide 14

Slide 14 text

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%

Slide 15

Slide 15 text

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%

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

UI/UX Designer Capybem 21 Moodboard

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

UI/UX Designer Capybem 25 Marca

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

UI/UX Designer Capybem 28 Design System: Tipografia

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Obrigado 😉😉