Ecoleta: de um case de UX a um produto real

O Ecoleta conecta cidadãos a cooperativas de catadores — e a escolas, condomínios e empresas — para doar, coletar e dar destino a recicláveis.

Resumo

• Papel: UX/Product Designer de ponta a ponta: pesquisa, produto, marca, negócio. Levei do protótipo ao produto publicado sozinho, com IA como par de engenharia.
• Problema: a maioria não separa o lixo e não sabe pra quem doar; o catador, que faz a reciclagem acontecer, precisa de fluxo e reconhecimento.
• Produto: acessível (WCAG AA), PWA mobile-first, múltiplos perfis em conta única, gamificação e certificados verificáveis.
• Negócio: modelo de dois lados, grátis pra quem participa, financiado por quem tem obrigação legal ou meta de ESG.

Alguns numeros do produto

Origem

A pesquisa e o problema vieram do case de UX Capybem (2020) — benchmark, pesquisa com cidadãos e desk research sobre catadores (dados ANCAT). O que não veio foi a arquitetura: o Ecoleta foi repensado do zero. Ver a publicação original do Capybem →

Arquitetura (refeita do zero)

O Capybem era plano: três perfis paralelos, cada um sua conta. O produto real quebrou isso. O Ecoleta gira em torno de uma conta única (Cidadão) que acumula contextos, escola, cooperativa, condomínio, grupo, não há trocar de login.

Decisões-chave

Cada uma vem da pesquisa ou de uma restrição de negócio, com o trade-off explícito.

1. Inclusão antes de precisão.Volume por sacola (P/M/G) em vez de quilo. Abre precisão em troca de adoção, serve quem não tem balança.
2. Conta única multi-contexto.O cadastro cria sempre um Cidadão, que acumula escola/cooperativa/condomínio. Migração complexa; em troca, cresce em contexto, não em cadastro.
3. A cooperativa é um time, não um login.Separei a entidade dos membros; cada confirmação registra quem confirmou. Decisão de estrutura que destravou escola, condomínio e grupo.
4. Confiança desenhada.Cooperativa entra como pendente e só opera após verificação; CNPJvalidado na fonte via BrasilAPI. Confiança verificável, não suposta.
5. Cor oficial=acessibilidade.Adotei a norma CONAMA 275. Essa norma é acima das escolhas estéticas. Base reconhecível e consistente.
6. Acessibilidade auditada.Contraste AA e mapa por forma+número (daltonismo). Resultado medido: WAVE 0 erros, Lighthouse 98.
7. Gamificação justa.Níveis, selos e sequência (streak) com teto no bônus de regularidade. O projeto foi desenhado para ser justo.
8. Governança de espaços.Arquivar, suspender, encerrar e transferir, sem apagar histórico nem pontos. O que separa demo de produto real.
9. Certificado como prova institucional.Campanhas escolares emitem certificados com QR, validação pública e PDF. Vira o artefato de venda pro público escolar.
10. Roteiro sem API paga.Ordem otimizada por 2-optno navegador+handoff pro Google Maps. Complexidade só entra quando o volume paga.
11. Compartilhamento como aquisição.Página pública de conquista+card, com token não-enumerável e noindex. Aquisição sem expor dado sensível.
12. Feature flag como disciplina.O perfil Artesão está pronto no código, mas oculto por flagaté validar demanda. Esconder o incompleto é decisão de produto.

Interfaces

Cidadão

Cooperativa

Condomínio / Escola

Identidade visual

Ao virar Ecoleta, criei uma marca nova: uma folha dentro de um ciclo (órbita tracejada): une eco (natureza) e coleta/ciclo (reciclar). O ciclo é feito de quatro traços abertos = os quatro elos que fazem a reciclagem girar (quem doa, quem coleta, quem transforma, quem multiplica).

• Tipografia: Noto Sans, escolhida pela ampla cobertura de idiomas (inclusão) e legibilidade em tela.
• Cor: verde da marca como primária + cores de material pelo norma, expostas como tokens que trocam sozinhos entre claro e escuro.
• Ícones: biblioteca Lucide, consistente e escalável.

Como foi construído: IA como alavanca

O gargalo clássico do designer de produto é “quem constrói?”. Aqui a resposta foi: eu com IA como par de engenharia. Não terceirizei nenhuma decisão de produto; usei IA para atravessar a fronteira protótipo→produto na velocidade de um time, sozinho.

Divisão de trabalho:

• Claude / Codex — geração de código (Laravel), testes automatizados (Playwright), segurança (CSP, headers, rate-limit) e roteiros de teste manual.
• GPT: pesquisa e copy do site (voz humana, sem utilização jargão ou número inventado), além de utilização de linguagem simples.
• Eu, orquestrava cada decisão: definição de produto, arquitetura de perfis, regras de negócio, todas as decisões e a auditoria de acessibilidade feita à mão. O WAVE limpo (0 erros, 0 erros de contraste, AIM 9.9/10) não é acessibilidade “gerada por IA”: é humano e verificado.

Qualidade de código sem saber programar, revisão cruzada entre IAs. Não leio código a ponto de auditar linha a linha, então montei um controle onde uma IA revisa o código da outra: o Codex propõe, o Claude faz code review (e vice-versa). Divergência entre elas vira sinal de alerta, obriga a explicar o trade-off antes de eu aprovar. Não é revisão humana de engenharia sênior, e não finjo que é; é um crivo de qualidade adversarial que pega regressão, código morto e má prática “melhor do que um não-programador sozinho jamais pegaria“. O critério do que entra continua meu; a leitura técnica linha a linha é cruzada entre os modelos.

A distinção que importa: a IA não decidiu que quilo vira sacola, que cooperativa é time e não login, ou que white-label espera a 1ª cidade. Ela acelerou a implementação dessas decisões. Designer dirige, IA executa mais rápido, é o que torna viável um profissional de UX entregar um produto full-stack acessível, testado e seguro sem virar engenheiro nem montar time.

A IA acelera código, mas exige curadoria constante, revisar o que gera, rejeitar o que não serve à regra de produto e manter acessibilidade e decisão sob controle humano. A alavanca multiplica quem já sabe o que quer; não substitui o critério

Estratégia, negócio e escalabilidade

Modelo de dois lados: grátis para quem participa (cidadão, catador, escola, condomínio); financiado por quem tem obrigação legal ou meta de ESG — prefeituras (a Política Nacional de Resíduos Sólidos já obriga coleta seletiva com inclusão de catadores) e empresas (logística reversa e ESG com prova). A escola entra pelo certificado, um artefato institucional de baixíssimo risco.

Escala desenhada, não improvisada: o white-label por cidade tem dois caminhos — instância por cidade (esforço pequeno) ou multi-tenant (esforço grande). A decisão é não construir especulando: caminho simples quando a 1ª cidade fechar, o complexo a partir de 3 cidades. Cada peça de complexidade só entra quando o negócio a paga.

Impacto e aprendizados

O valor é estrutural e verificável: pesquisa → decisão → design → produto no ar → modelo de negócio, sem terceirizar etapa; acessibilidade medida, não declarada; cada escolha rastreável com trade-off claro.

Aprendizados

• Case vira produto quando você paga o preço da fronteira: migração de dados, condomínio em conflito, coordenador que sai. A maturidade do produto e do projeto aparece além de uma tela bonita, aparece na governança.
• Estrutura é estratégia: “conta única e entidade × membros” foram o que destravou escala, não foi uma escolha de UI.
• Viabilidade é design: saber o que não construir (quilo→sacola, rota sem API, white-label adiado) é decisão de produto.
• IA é alavanca, não piloto: multiplicou execução; produto e acessibilidade seguiram decisão humana.
• Negócio precisa de artefato: o certificado transforma engajamento em prova que fecha piloto.
• Distribuição e negócio também são design.

Passos futuros

Piloto em 1ª cidade → white-label; campanhas solidárias e premiação real com parceiros; reavaliar o religamento do Artesão conforme demanda.