Fotografia mostra uma pessoa segurando um smartphone com uma interface de um aplicativo aberto na tela.

Capybem

Nesta página: Aplicativo mobile que promove a conscientização sobre o descarte correto de lixo reciclável, conectando cidadãos a cooperativas de catadores e incentivando a geração de renda sustentável.

Plataforma para incentivar a reciclagem e a sustentabilidade urbana

Sobre o projeto

Desafio: o processo de idealização, concepção e desenvolvimento está descrito abaixo e fez parte de uma atividade proposta pela Capyba.

Objetivo do projeto: A proposta do Capybem é criar um aplicativo que facilite a separação de lixo, aumente a conscientização ambiental e crie oportunidades de geração de renda para catadores. A solução foi desenhada para ter uma interface simples e acessível, motivando os cidadãos a participarem ativamente no processo de reciclagem.

Processos e ferramentas utilizados

Para garantir que o desenvolvimento do Capybem fosse completo e eficaz, adotei uma abordagem robusta, envolvendo diversas etapas do processo de design e pesquisa. Cada fase foi cuidadosamente planejada, desde o benchmark de concorrentes até a criação de protótipos em alta fidelidade. Abaixo, apresento os principais processos utilizados no projeto, com seus respectivos motivos e ferramentas empregadas, destacando como cada etapa contribuiu para a construção de uma solução sólida e centrada no usuário.

ProcessoMotivoFerramentas
Análise dos concorrentes e Pesquisa de ConteúdoEntender concorrentes e obter insights para o projetoNavegador Web
Loja de Aplicativos
Identificação e Estudo do PúblicoLevantar dados sobre o público e suas necessidadesGoogle Docs/Forms
User/Job StoryCompreender as ações dos usuários com o lixo reciclávelNão se aplica
PersonasConsolidar pesquisas em perfis de usuários reaisAdobe XD
Google Docs/Forms
WireframesValidar fluxos e posicionamento de componentesAdobe XD
Protótipos em Alta FidelidadeDefinir o design visual detalhadoAdobe XD
UI KitDocumentar os elementos da interfaceAdobe XD
Illustrator
Photoshop
Processos de criação

Análise de concorrentes

Para entender melhor o mercado e as funcionalidades que poderiam ser relevantes, realizei uma análise detalhada de aplicativos concorrentes, como Cataki, Intellibins, Litterati e outros. Cada um foi estudado profundamente para identificar boas práticas e lacunas que o Capybem poderia preencher.

AplicativosFuncionalidades Relevantes
Cataki, Litterati
Intellibins
Conexão entre cidadãos e cooperativas, mapeamento de locais de descarte
Desafio Ambiental
Sustentabilizando
Gamificação para engajamento e educação ambiental
Moeda Verde
Manual de Etiqueta
Informações sobre separação de lixo, dicas sustentáveis
Funcionalidade por aplicativo

Acesse o documento com a análise completa.

Pesquisa de conteúdo

Após analisar o ecossistema digital dos aplicativos, realizei um estudo aprofundado sobre os temas a serem trabalhados no Capybem. Esse estudo foi essencial para gerar insights e argumentar sobre as funcionalidades mais relevantes. O conteúdo abrange instruções sobre a separação correta dos materiais, tipos de lixo reciclável, e informações específicas sobre resíduos orgânicos e eletrônicos. Para mais detalhes, acesse o material completo.

Pesquisa qualitativa

Usuários comuns

Realizei uma pesquisa quantitativa com usuários através de questionários aplicados nas redes sociais, como Facebook e WhatsApp. Isso ajudou a entender o comportamento dos cidadãos em relação ao descarte de resíduos recicláveis. Dados como os 52,4% que não separam o lixo adequadamente foram cruciais para direcionar as funcionalidades do app.

Identificação do usuário

Distribuição por Faixa Etária
Distribuição de Escolaridade
Distribuição por gênero
Distribuição por estado

O que as pessoas fazem com cada tipo de material reciclável

Separação do lixo
Separação do lixo por tipo
Separação para Catadores e Cooperativas

Informação sobre o meio ambiente, poluição e descarte do lixo

Obtenção de informação sobre meio ambiente
Fontes de informação sobre meio ambiente

Consideram utilizar um aplicativo que dê informações sobre o descarte de lixo

Uso de aplicativo

Desk research

Catadores

A pesquisa com catadores foi embasada no “Anuário da Reciclagem” (2017-18), da ANCAT, para entender melhor suas necessidades e as condições de trabalho. Isso influenciou diretamente o design da funcionalidade de agendamento de coleta e a integração do app com mapas.

Distribuição dos resíduos coletados pela coleta regular pelo sistema público em 201

Artesões

Através do Sebrae coletei alguns dados para utilização de futuras versões. As informações estão reunião em um documento disponibilizado aqui.

Mapa Mental

Para organizar todas as informações e funcionalidades do Capybem, criei um mapa mental, que ajudou a estruturar o fluxo de usuários e as principais interações dentro do aplicativo.

Acesse o mapa mental interativo aqui.

User/Job Story

Foram construídas quatro situações principais para justificar os fluxos de uso da aplicação, divididas entre User Stories e Job Story.

User Stories

  • Fluxo de Doação: “Eu, como cidadão, quero descartar meu lixo reciclável na cooperativa de catadores mais próxima da minha região.”
  • Fluxo de Descarte: “Eu, como cidadão, quero obter informações sobre como separar corretamente os materiais recicláveis para, em seguida, doá-los a uma cooperativa.”
  • Fluxo Usuário-Cooperativa: “Eu, como catador, quero confirmar o recebimento da doação de um cidadão para que ele receba pontos e melhore sua posição no ranking.”

Job Story

  • Fluxo de Ranking: “Quando estou dando aula (situação), eu quero conscientizar meus alunos sobre a importância da reciclagem (motivação), para que eles contribuam com a preservação do meio ambiente (resultado).”

Personas

Com base nas pesquisas realizadas, criei duas personas principais para guiar o desenvolvimento do Capybem:

  • Felipe Lopes: 50 anos, catador. Seu objetivo é conscientizar a população sobre a importância da coleta seletiva para preservar o meio ambiente.
  • Heloísa da Conceição: 32 anos, professora. Tem uma forte convicção de que a educação é a chave para mudar o mundo e que essa mudança começa com atitudes.

Recursos principais

O Capybem possui dois perfis de usuários, cada um com funcionalidades específicas para atender suas necessidades. Algumas funcionalidades são comuns a todos os usuários, enquanto outras são exclusivas para cidadãos ou cooperativas.

Funcionalidades para todos os usuários

  • Dicas para separação adequada do lixo.
  • Informações sobre preservação ambiental e descarte consciente de resíduos.
  • Visualização de ranking em diferentes níveis: estado, cidade e bairro.
  • Criação de grupos para competições internas de doação de materiais recicláveis.

Funcionalidades para cidadãos

  • Agendamento de horários para coleta de materiais recicláveis com catadores ou cooperativas.

Funcionalidades para cooperativas

  • Criação de rotas integradas com aplicativos de mapa/transporte para facilitar a coleta no local indicado pelo cidadão.
  • Visualização do ranking dos cidadãos que mais doaram para a cooperativa.
  • Confirmação do recebimento das doações de materiais recicláveis.

Arquitetura da Informação

A arquitetura da informação foi desenhada para facilitar a navegação dos diferentes perfis de usuários. A estrutura do app é simples e eficiente, permitindo que cidadãos e catadores encontrem facilmente as funcionalidades necessárias.

Fluxograma do Capybem. Abaixo uma descrição detalhada da estrutura e do conteúdo:Acessar o Aplicativo:O fluxo inicia com a ação "Acessar o Aplicativo", que leva a duas opções: Login ou Criar Conta.
Login:O login pode ser realizado "Através do Sistema" ou "Através das Redes Sociais".
Ambos os caminhos levam o usuário à Dashboard.Dashboard:
A partir da Dashboard, o usuário tem várias opções de navegação:
Informações: Natureza, Poluição e Lixo: Acessa conteúdo informativo sobre temas ambientais.
Descarte: Provavelmente um recurso que orienta sobre o descarte correto de materiais.
Ranking: Um ranking de usuários, possivelmente com base em contribuições de reciclagem ou participação.
Doação Voluntária: Opção para usuários que desejam doar materiais recicláveis.
Minhas Doações/Receber Material: Uma seção para acompanhar doações realizadas e recebidas.
Funcionalidades de Doação:Na seção de doações, há duas sub-funções principais:
Traçar Rota: Facilita o planejamento de rotas para coleta ou entrega de materiais.
Confirmar Doação: Opção para confirmar a doação realizada.
Doações Pendentes:Possibilidade de visualizar e gerenciar doações que estão aguardando processamento ou confirmação.
Pesquisa de Catadores ou Cooperativas:O usuário pode pesquisar por catadores ou cooperativas, com algumas opções adicionais:
Pesquisar por Localização ou CEP: Busca baseada em localização.
Definir Intervalos de Data: Filtro para visualizar doações dentro de um intervalo de tempo.
Visualizar Lista: Exibe uma lista com resultados da pesquisa.
Ranking Detalhado:O ranking pode ser visualizado de forma Regional ou em Grupos Particulares:
Regional: Organizado por Bairro, Cidade, e Estado.
Grupos Particulares: Focado em usuários específicos.
Perfis de Usuários:No canto esquerdo inferior, há uma distinção entre usuários com acesso geral (verde) e funcionalidades exclusivas para catadores e cooperativas (azul).

Moodboard

Várias fotografias e ilustrações relacionados ao meio ambiente, sustentabilidade, mudanças climáticas, saúde e impacto humano no planeta.Uma mão segura uma folha verde em um fundo desfocado de natureza.Mão que puxa uma página como se estivesse "revelando" a poluição oculta atrás, com uma paisagem industrial poluída.Mão segura um smartphone com uma interface de aplicativo.Ilustração do planeta Terra com rachaduras, escorrendo um líquido preto e fumaça saindo.Criança com o rosto coberto de pós coloridos.Cabeça de uma tartaruga dentro de um saco plástico.Fotografia de uma geleira derretendo.Protótipo de um aplicativo sendo mostrando em um aparelho celular

O moodboard do Capybem foi inspirado nas cores das lixeiras de reciclagem e na estética ambiental, buscando um visual que evocasse sustentabilidade e praticidade.

Wireframes e Protótipos

Wireframes

Fluxo de navegação das telas.

Desenvolvi wireframes iniciais para mapear os fluxos de navegação. Esses protótipos ajudaram a definir como o usuário interage com as funcionalidades principais, como o agendamento de coleta e a visualização do ranking.

Protótipo navegável

Você pode acessar o protótipo interativo navegável para explorar as principais funcionalidades do Capybem.

Acesse o wireframe no navegador.

Protótipo de alta fidelidade

5 aparelhos iPhone exibidos um ao lado do outro. Dois da esquerda estão levemente inclinados para a direita e 2 da direita estão inclinados para a esquerda. O aparelho do centro é apresentado sem inclinação.

Após os ajustes necessários, criei o protótipo de alta fidelidade, com foco em uma interface visualmente agradável e fácil de usar. As telas de alta fidelidade estão apresentadas abaixo individualmente.

Da esquerda para a direita: página informativa, lista de cooperativas, tela inicial, lista de materiais e exemplo de formulário.

Branding

A marca do Capybem foi construída com base na logo da Capyba, e as cores seguem o padrão visual de lixeiras de reciclagem, reforçando o conceito de sustentabilidade. O processo de criação da logo, a tipografia escolhida e o estudo do ícone podem ser vistos abaixo.

Elemento gráfico. Do lado esquerda do nome, "capybem", há um ícone colorido que parece representar pessoas conectadas. O ícone é composto por três elementos semicirculares: um verde, um vermelho e um azul no centro de cada semicírculo, centralizado há um círculo. Os elementos estão alinhados como se formasse um círculo e estivessem sendo visto de cima e se abraçam. Na parte central um círculo azul, ele representa o planeta.
Logotipo Capybem
Essa imagem mostra três elementos lado a lado:
Um globo terrestre, indicando uma conexão com o mundo, sustentabilidade e preocupação ambiental.Uma foto de um grupo diverso de crianças em um círculo, reforçando a ideia de comunidade, inclusão e colaboração.O ícone da Capybem, indicando que o design do logotipo busca inspiração em temas de unidade, diversidade e globalidade.
Inspiração para criação do logo
Elementos gráficos apresentados para mostrar a construção da logo do Capybem.As dimensões são especificadas, com "1x" indicando a altura do semicírculo  e "1.5y" a altura do nome, mostrando o alinhamento e a escala proporcional entre o ícone e a tipografia.
Medidas do Logo do Capybem

UI Kit

A tipografia Noto foi escolhida por sua ampla cobertura de idiomas, representando a pluralidade gráfica necessária para a conscientização global sobre o meio ambiente. Elementos textuais, botões e outros componentes visuais seguem um padrão cromático baseado nas cores do ambiente.

Padrão cromático

Paleta de 5 tons de azul, representa o papel/papelão
Azuis: “papel/papelão”
Paleta de 5 tons de vermelho, representa o plástico
Vermelhos: “plástico”
Paleta de 5 tons de verde, representa o vidro
Verdes: “vidro”
Paleta de 5 tons de cinza, representa as cores neutras utilizadas no aplicativo
Neutros: cinzas
Paleta de 5 tons de amarelo, representa o metal
Amarelos: “metal”
Paleta de 2 cores, branco e preto
Branco e preto

Tipografia

Independentemente de onde o usuário esteja, do idioma falado ou dos conjuntos de caracteres utilizados, a fonte escolhida deve refletir a pluralidade gráfica que representa os diversos povos ao redor do mundo, reforçando a responsabilidade coletiva pela preservação ambiental. A família tipográfica escolhida para o Capybem foi a Noto, uma fonte que abrange uma ampla gama de idiomas, garantindo acessibilidade e inclusão para todos os usuários.

Exemplo de aplicação da fonte

Exemplo de aplicação da fonte

Elementos textuais

Elementos tipográficos

Iconografia

Criei uma série de ícones para representar os diferentes materiais recicláveis, como papel, plástico e vidro, seguindo a coloração padrão internacionalmente reconhecida para facilitar o entendimento dos usuários.

Funcionalidades futuras

Além das funcionalidades atuais, planejei novas features para futuras versões:

Doação coletiva: Permite que grupos, como condomínios, empresas ou famílias, realizem doações de materiais recicláveis em conjunto, facilitando o descarte consciente em maior escala.

Premiação real: Os pontos acumulados pelos usuários poderão ser trocados por prêmios reais em estabelecimentos credenciados, incentivando a participação contínua e o engajamento com práticas sustentáveis.

Carona solidária: Com o objetivo de reduzir a poluição causada por automóveis, usuários que oferecem caronas através do Capybem ganharão pontos extras. Essa funcionalidade adiciona um novo perfil ao app, incentivando a mobilidade sustentável.

Incentivo ao uso de bicicleta: Para promover a redução de carros no trânsito, usuários que registrarem seus trajetos de bicicleta no Capybem serão recompensados com pontos extras, incentivando um transporte mais ecológico.

Perfil de artesão: Será adicionado um novo perfil de usuário voltado para artesãos que utilizam materiais recicláveis em suas obras. Dessa forma, cidadãos e cooperativas poderão doar matéria-prima para esses profissionais, fomentando a geração de renda sustentável.

Obrigado por chegar até aqui 🤗. Curta o projeto no Behance 👍

Publicação anterior

Anotações de estudo para certificação SCRUM

Próxima publicação

Hackathon CNJ Inova ou o primeiro Hackathon a gente nunca esquece

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *