A solução proposta para o portal do Jornal do Commercio nasce diretamente das dores identificadas na Imersão e é estruturada para responder a um problema central: o usuário entra, lê uma notícia e vai embora. Nosso objetivo foi redesenhar a experiência para que a navegação deixe de ser um obstáculo e passe a incentivar o “segundo clique”, o retorno e a fidelidade, sem comprometer o modelo de negócio baseado em anúncios.

Mais do que criar telas novas, desenhamos um ecossistema de navegação, conteúdo e tecnologia, pensado de ponta a ponta para o contexto mobile-first, que hoje concentra cerca de 90% dos acessos ao portal.

Visão Geral

A solução combina Design de Experiência do Usuário e Ciência da Computação em três pilares principais:

Clareza e organização da navegação: o usuário sempre sabe onde está, o que pode fazer em seguida e como voltar ao que estava vendo antes.
Engajamento contínuo: o portal incentiva o segundo clique por meio de recomendações contextuais, listas de notícias bem estruturadas e uma página unificada de busca e exploração de conteúdo.
Sustentação técnica e evolução incremental: back-end em Django, modelo de dados robusto, testes automatizados e pipeline de CI/CD garantem estabilidade, manutenção e crescimento do produto ao longo do tempo.

Princípios de Design

A solução foi guiada por alguns princípios fundamentais:

Mobile-first: toda a navegação foi pensada inicialmente para telas pequenas, garantindo legibilidade, hierarquia visual e acessos rápidos às ações principais (buscar, navegar por categorias, ouvir a rádio, ver mais notícias).
Foco na leitura, não na distração: redução de ruído visual, layout limpo, uso intencional de espaços em branco e anúncios integrados de forma harmoniosa ao feed.
Contexto sempre visível: o usuário não cai em “becos sem saída”; depois de ler uma notícia, ele enxerga claramente o que pode explorar em seguida.
Consistência visual e técnica: marca, paleta de cores (60/30/10), tipografia, iconografia e componentes de interface se repetem de forma coesa em todas as telas.

Arquitetura da Solução de Navegação

A partir do sitemap definido na fase de Prototipação, estruturamos o portal em alguns eixos centrais:

Homepage
- Uma página inicial organizada em blocos curados (Em Alta, Últimas, Locais, Esportes/Cultura etc.), com destaque para notícias mais relevantes e temas locais.
- A homepage não é apenas uma lista infinita: ela orienta o olhar do usuário, facilita a descoberta de conteúdo e oferece botões “Ver mais” que levam para uma experiência de exploração mais profunda.
Página “Todas as Notícias” / Busca Unificada
- Criamos uma página única dedicada à exploração do conteúdo, reunindo:
  - feed de notícias com ordenação padrão por “Mais recentes”;
  - barra de busca integrada com filtros (categoria, período) e ordenação (Mais recentes, Em alta, Mais vistas);
  - comportamento inteligente: quando o usuário chega a partir de “Ver mais” em uma categoria específica, o filtro correspondente já vem aplicado;
  - anúncios intercalados a cada 3 cards, visualmente integrados ao feed, sem quebrar a experiência de leitura;
  - carregamento contínuo (infinite scroll ou “Carregar mais”) com preservação da posição ao voltar de uma notícia.
Página de Notícia Genérica
- A página de leitura de notícia foi redesenhada para:
  - dar protagonismo ao conteúdo jornalístico;
  - integrar de forma fluida anúncios ao longo da página, sem poluição excessiva;
  - exibir recomendações contextuais ao final do texto, baseadas em categorias e tags, estimulando o “próximo clique”;
  - suportar conteúdo multimídia (vídeo, áudio, podcasts) quando houver, mantendo a experiência coesa.
Rádio Jornal e Multimídia
- O player da Rádio Jornal foi pensado como um elemento presente e acessível ao longo da navegação:
  - player colapsável, fixo na interface;
  - possibilidade de ouvir enquanto navega por outras páginas;
  - integração com notícias multimídia que também podem incluir vídeo e áudio, enriquecendo o consumo de conteúdo.
Newsletter Personalizada (Sem Autenticação Complexa)
- A solução prevê uma página simples de inscrição em newsletter:
  - formulário mínimo (nome + e-mail);
  - escolha de categorias de interesse (por exemplo: Local, Política, Esportes, Cultura);
  - foco em personalização sem exigir criação de conta ou sistema de login, reduzindo fricção na adesão.
Elementos Transversais
- Em todas as páginas, mantemos:
  - header fixo com logotipo, ícone de busca e menu hambúrguer;
  - menu off-canvas com acesso direto a “Todas as Notícias”, categorias, newsletter e páginas institucionais;
  - rodapé com links como Fale Conosco, Trabalhe Conosco e informações de LGPD.

Funcionalidades-Chave da Solução

A partir das histórias de usuário (em BDD e dentro dos critérios INVEST), a solução foi decomposta em funcionalidades claras, conectadas às dores mapeadas na Imersão:

Menu lateral off-canvas (História 5)
- Resolve a queixa de navegação confusa em mobile, mantendo o acesso às seções do site sempre disponível pelo header fixo.
Organização lógica da homepage e editorias (História 2)
- Facilita entender o que é destaque, o que é local, o que é complementar, sem obrigar o usuário a “garimpar” conteúdo.
- Lista unificada em “Todas as Notícias” com filtros, ordenação e busca avançada (História 6 + História 8)
- Permite que o usuário encontre rapidamente o que procura, explore por interesse e mantenha o contexto ao voltar da leitura.
Infinite Scroll / Carregar Mais com preservação da posição (História 3)
- Garante exploração contínua, sem recarregar página ou perder o ponto da lista.
Recomendações contextuais ao final da notícia (História 1)
- Atuando como segunda camada de engajamento, oferece caminhos naturais para o segundo clique.
Anúncios integrados e responsivos (História 4)
- Mantêm o modelo de negócio sem comprometer a experiência: integrados no feed, responsivos e com espaçamento adequado.
Rádio Jornal e multimídia (História 7)
- Enriquecem o consumo de conteúdo e aproveitam uma força já existente da marca JC.

Sustentação Técnica da Solução

Para garantir que essa solução não fosse apenas um protótipo estático, mas um sistema tecnicamente consistente e evolutivo, estruturamos o back-end e o processo de desenvolvimento com foco em qualidade:

Framework Django
- Escolhido por sua robustez, organização em modelos e integração com o Django Admin, permitindo rápido gerenciamento de conteúdo.
Modelo de Dados Evolutivo
- Iniciado ainda na Semana 8 e refinado ao longo das semanas 9 e 10, o modelo de dados traduz:
  - estrutura de notícias, categorias, tags;
  - relacionamento com elementos como multimídia e newsletter;
  - suporte a futuras evoluções sem quebra de compatibilidade.
Testes Automatizados
- Implementados a partir da Semana 12 e expandidos nas semanas seguintes:
  - cobrem histórias de usuário críticas;
  - reduzem risco de regressão a cada nova implementação;
  - integram-se à pipeline de CI/CD.
CI/CD com Pipeline no GitHub
- Criada e aprimorada nas semanas 14 e 16:
  - build automatizado;
  - execução dos testes;
  - deployment em nuvem;
  - screencasts documentando tanto os testes quanto o fluxo da pipeline.
Deploy em Produção e Monitoramento Iterativo
- O sistema foi implantado em ambiente de produção na nuvem, recebendo:
  - correções de bugs,
  - ajustes de performance,
  - melhorias progressivas com base nos testes.

Identidade Visual e Interface

A solução também se materializa em uma identidade visual consistente, alinhada ao posicionamento do portal:

Marca da solução (KIVO + chave)
- Representa a ideia de destravar o acesso ao conteúdo, facilitando o caminho entre o primeiro e o segundo clique.
Moodboard, paleta e gama cromática
- A partir do moodboard, definimos:
  - paleta seguindo a regra 60 / 30 / 10;
  - gama cromática em RGB e CMYK;
  - aplicações da marca em positivo e negativo, garantindo legibilidade em diferentes fundos e contextos.
Layouts das principais telas e protótipo navegável no Figma
- A evolução visual culmina em:
  - layouts finais da homepage, Todas as Notícias, Notícia, Newsletter e páginas de apoio;
  - protótipo navegável que simula a experiência real do usuário antes da implementação completa.

Resultado: do Primeiro ao Segundo Clique

A Solução proposta não é apenas uma soma de telas, mas uma mudança na forma como o JC conduz a jornada do usuário:

reduz atritos de navegação;
organiza melhor o conteúdo;
integra anúncios de forma menos invasiva;
amplia as possibilidades de engajamento (recomendações, newsletter, multimídia);
e se apoia em uma base técnica sólida, testada e documentada.

Em outras palavras, a solução transforma o portal em um ambiente onde o usuário não apenas chega, mas permanece, explora e volta, aproximando o Jornal do Commercio de uma experiência digital à altura da qualidade do seu conteúdo jornalístico.

Page updated

Report abuse