Portal Despoluir: Modernização e Redesenho da Experiência

O programa Despoluir é o maior programa ambiental da iniciativa privada do Brasil, promovendo serviços gratuitos aos transportadores como avaliações de opacidade, avaliação da qualidade do diesel e serviço de orientação ao transportador.

Desafio

O portal anterior do programa Despoluir apresentava limitações significativas que comprometiam sua eficácia. O conteúdo estava desatualizado e organizado de forma excessivamente técnica, dificultando o acesso à informação pelos usuários finais.

A identidade visual era pouco atraente e não havia responsividade adequada para dispositivos móveis. Era necessário desenvolver um novo portal mais moderno, claro e estratégico para atender adequadamente aos três públicos principais: transportadores interessados nos serviços, representantes do governo e federações de transporte rodoviário.


Metodologia e processo de desenvolvimento

O projeto foi conduzido através de reuniões mensais com stakeholders para compreender os objetivos do programa e alinhar as prioridades de negócio. Além disso, fizemos coletivamente uma etapa de desk research para entender melhor o negócio. A partir dos dados de monitoramento do Google Analytics, pudemos traçar quais eram as páginas mais acessadas, e quais os gargalos os usuários possuíam ao encontrar uma informação.

Assim, pudemos traçar personas interessadas e utilizamos a matriz CSD para mapear hipóteses e necessidades dos públicos-alvo, direcionando tanto a estratégia de conteúdo quanto a arquitetura da informação.


Foi realizada uma curadoria criteriosa do conteúdo existente, removendo publicações obsoletas e reescrevendo textos com foco na clareza e na explicação dos produtos e serviços oferecidos.

Migração e preservação de conteúdo

A migração técnica do portal envolveu múltiplas etapas para garantir a continuidade do acesso aos conteúdos existentes. Para preservar a experiência do usuário e manter a autoridade de SEO do domínio, implementei um sistema de redirecionamento das URLs antigas para as novas páginas correspondentes, assegurando que links externos e bookmarks continuassem funcionais.

Inicialmente, realizei a migração do antigo SharePoint para SharePoint Online utilizando o SharePoint Migration Tool. Posteriormente, exportei o conteúdo através de ferramentas específicas do WordPress, com apoio de planilhas Excel para o mapeamento e organização dos dados e nova importação no WordPress.

Solução implementada

Propusemos uma nova linguagem visual baseada em publicações recentes do programa, incorporando cores mais vibrantes e linguagem mais acessível, além de reduzir blocos extensos de texto para favorecer a escaneabilidade.

A arquitetura da informação foi completamente redefinida, tornando a navegação mais intuitiva e alinhada aos fluxos reais dos usuários. Durante este processo, foi feito um processo educativo com as áreas envolvidas, pois haviam algumas dúvidas sobre a disposição das informações e serviços. Os componentes foram escolhidos e documentados com foco na padronização e escalabilidade do design, priorizando a performance em dispositivos móveis, que correspondem à maior parte do acesso.

A página de contato foi redesenhada para explicar claramente quais serviços estão disponíveis em cada federação, eliminando ambiguidades que antes só eram esclarecidas após o envio de solicitações. A disponibilidade regional de cada serviços também foi incluída na página individual de cada um, evitando uma possível frustração do usuário que poderia não ser atendido na região em que se encontrava.

Resultados obtidos

Os indicadores iniciais demonstram melhorias significativas na performance do portal: aumento no tempo médio de permanência, melhoria nas taxas de conversão (solicitações de atendimento) redução na taxa de rejeição e crescimento nos acessos via dispositivos móveis.

Os stakeholders reportaram feedback positivo sobre a clareza das informações e a melhoria da experiência de navegação, validando as decisões tomadas durante o processo de redesenho.

Gostaria de agradecer a todo o time envolvido neste processo, e a parceria durante todo o processo de trabalho e entrega. Foi um período de grande crescimento para mim ter feito parte desta equipe.

ITL: Migração de site para WordPress

Com a ajuda da equipe envolvida, conduzi a migração do site institucional do ITL (Instituto de Transporte e Logística) para WordPress, focando na modernização da arquitetura, implementação de responsividade e melhorias significativas de acessibilidade. O projeto envolveu a reconstrução completa da experiência digital, mantendo a identidade visual consolidada da instituição.

Análise da Estrutura Original

O site original apresentava uma estrutura bem definida para uma instituição educacional, com foco em três pilares principais:

  • Cursos Executivos: Preparação para desafios do setor
  • Especializações e MBAs: Formação de alta performance
  • Certificações Internacionais: Qualificação com instituições globais

Estratégia de Migração

1. Arquitetura de Templates Personalizados

Desenvolvi uma estrutura de templates modulares para garantir consistência e flexibilidade:

Hierarquia de modelos de página:

  • Cabeçalho responsivo com navegação adaptativa. Foram construídos 2 cabeçalhos para melhor divisão da informação.
  • Página inicial com apresentação dos cursos e notícias mais recentes;
  • Templates específicos para páginas de cursos, especializações e MBAs.
  • Páginas individuais de cursos com estrutura padronizada.
  • Página de resultados de busca otimizada.
  • Página de erro personalizada mantendo o branding.
  • Adaptações para responsividade em dispositivos móveis.

2. Implementação de Responsividade

Mobile-First Approach:

  • Redesenho completo da experiência mobile, priorizando conteúdo e navegação;
  • Cards de cursos empilháveis em dispositivos menores;
  • Menu hambúrguer com animações suaves.

3. Melhorias de Acessibilidade (WCAG 2.1)

Navegação por Teclado:

  • Implementação de skip links para conteúdo principal;
  • Focus indicators visíveis em todos os elementos interativos;
  • Ordem lógica de tabulação.

Legibilidade e Contraste:

  • Ajuste de contrastes para atender padrão AA;
  • Hierarquia tipográfica clara com tamanhos escaláveis;

4. Otimização de Performance

  • Implementação de cache avançado;
  • Minificação de CSS/JS;
  • Redirecionamento de URLs antigas (com as quais haviam conexões de outros sites e redes sociais).

5. Navegação Intuitiva

Apesar de manter a estrutura do site original, algumas adaptações para a experiência do usuário foram implementadas, como:

  • Aumento de contraste: A leitura de botões foi facilitada pelo aumento de contraste implementado.
  • Call-to-Actions Estratégicos: Posicionamento otimizado para conversão

6. Integração com Analytics para Monitoramento

  • Google Analytics 4 com eventos personalizados;
  • Monitoramento de Core Web Vitals;
  • Heatmaps para análise de comportamento;

Resultados Alcançados

Performance

  • Melhoria de 65% no tempo de carregamento mobile;
  • Score 80+ no PageSpeed Insights;
  • Redução de 10% na taxa de rejeição;

Entrega e Capacitação da Equipe

Após a conclusão da migração e testes finais, o sistema foi oficialmente entregue ao ITL. Realizei uma oficina prática com a equipe de comunicação e marketing da instituição, capacitando os usuários internos para o uso autônomo da plataforma WordPress para publicação de notícias. A oficina incluiu a criação de um manual de uso personalizado e estabelecimento de fluxos de trabalho para manutenção contínua do site.