Petrobras
Como melhorar o SEO e reduzir a quantidade de canais de conteúdo da Petrobras?
Criei a experiência visual do portal em um projeto que juntou design de produto, conteúdo, SEO e tecnologia. O novo Nossa Energia passou a reunir conteúdos educativos e institucionais em um só lugar.
- UX/UI
- Arquitetura de Informação
- Handoff
%20scale(3)'%3e%3c/rect%3e%3cpath%20d='M144%20216C144%20176.641%20175.907%20144.733%20215.267%20144.733V144.733C254.626%20144.733%20286.534%20176.641%20286.534%20216V216C286.534%20255.36%20254.626%20287.267%20215.267%20287.267V287.267C175.907%20287.267%20144%20255.36%20144%20216V216Z'%20fill='%231ABCFE'%3e%3c/path%3e%3cpath%20d='M1.46603%20358.534C1.46603%20319.175%2033.3733%20287.267%2072.733%20287.267H144V358.534C144%20397.894%20112.093%20429.801%2072.733%20429.801V429.801C33.3733%20429.801%201.46603%20397.894%201.46603%20358.534V358.534Z'%20fill='%230ACF83'%3e%3c/path%3e%3cpath%20d='M144%202.19946V144.733H215.267C254.627%20144.733%20286.534%20112.826%20286.534%2073.4664V73.4664C286.534%2034.1068%20254.627%202.19946%20215.267%202.19946L144%202.19946Z'%20fill='%23FF7262'%3e%3c/path%3e%3cpath%20d='M1.46603%2073.4664C1.46603%20112.826%2033.3733%20144.733%2072.733%20144.733L144%20144.733L144%202.19941L72.733%202.19941C33.3733%202.19941%201.46603%2034.1067%201.46603%2073.4664V73.4664Z'%20fill='%23F24E1E'%3e%3c/path%3e%3cpath%20d='M1.46603%20216C1.46603%20255.36%2033.3733%20287.267%2072.733%20287.267H144L144%20144.733L72.733%20144.733C33.3733%20144.733%201.46603%20176.641%201.46603%20216V216Z'%20fill='%23A259FF'%3e%3c/path%3e%3c/svg%3e)
Desafio
Definir o papel de cada canal.
O antigo Nossa Energia publicava conteúdo educativo sobre energia. O Fatos e Dados reunia temas institucionais e iniciativas da Petrobras. Precisávamos definir o papel de cada canal e organizar os caminhos até seus conteúdos.
O planejamento reuniu esses dois canais no escopo do hub e direcionou outros dez ao site institucional. A Agência Petrobras de Notícias continuava como canal separado, conectado ao hub.
Antes
O diagnóstico de audiência e SEO.
No antigo Nossa Energia, 89,38% das sessões acessavam apenas uma página. O diagnóstico de SEO também identificou falta de links internos e conteúdos relacionados pouco segmentados.
O site registrava 930 mil sessões, com duração média de 28 segundos. Esses dados orientaram as decisões do time sobre conexões entre páginas e recomendações de leitura.
Minha contribuição
Minha atuação em arquitetura, navegação e templates.
Desenhei a navegação, os formatos de conteúdo e os templates da plataforma. Usei os componentes do Design System e preparei o handoff para desenvolvimento.
Participei da arquitetura da informação com o gerente de conteúdo e a líder técnica responsável pelo Liferay. Design de produto, conteúdo, SEO e tecnologia construíram juntos a pesquisa, a estratégia editorial e o naming.
Decisões
Categorias organizam. Tags conectam.
A proposta de arquitetura atribuía uma categoria principal a cada conteúdo. As tags conectavam assuntos, formatos e localidades entre categorias, oferecendo outros caminhos até matérias relacionadas.
Páginas temáticas teriam uma introdução e conteúdos em destaque. O planejamento também previa matérias relacionadas, indicação do caminho de navegação e filtros de busca por assunto e formato.
Explorações
Explorando a estrutura da home.
As explorações testaram como destaques, temas e busca poderiam criar mais caminhos pelo hub.
Uma home editorial.
Exploração anterior da home em alta fidelidade, com destaques, artigos, temas e vídeos.
Processo
- 01
Diagnóstico: mapear os canais e analisar a audiência, as palavras-chave e as referências editoriais.
- 02
Estratégia: definir o escopo do hub e a organização dos conteúdos.
- 03
Design: explorar a estrutura das páginas e desenvolver os templates do portal.
- 04
Handoff: documentar a interface para o time de desenvolvimento em Liferay.
Solução
A experiência editorial no desktop e no mobile.
Um ponto de partida editorial.
Destaques e formatos de conteúdo organizados na home desktop.
A experiência no mobile.
A mesma hierarquia editorial adaptada à tela vertical.
Um template para explorar um assunto.
Abertura temática, conteúdos em destaque e uma coleção de matérias relacionadas em um mesmo template.
Mais caminhos até o conteúdo.
Busca, filtros e tags populares traduzem a arquitetura da informação em caminhos de descoberta.
Um template para a leitura.
Hierarquia de título, texto e mídia em um template de artigo com conteúdo demonstrativo.
Entregas
O que o projeto entregou.
Nossa Energia e Fatos e Dados reunidos em um hub editorial.
Templates de páginas e formatos de conteúdo para desktop e mobile.
Padrões e componentes do Design System aplicados ao portal.
Design da experiência entregue ao time de desenvolvimento em Liferay.
Handoff
Regras de navegação para implementação.
O handoff documentou como o portal usava os componentes do Design System. Colaborei com o time técnico responsável pela implementação em Liferay. O case PetroDS apresenta as fundações e a biblioteca de componentes do sistema.
Aprendizados
O que levo deste projeto.
Definir o papel dos canais antes de desenhar as páginas.
O mapa dos canais ajudou a decidir quais conteúdos deveriam ir para o hub. Essa definição de escopo deu um ponto de partida para desenhar as páginas.
Construir a experiência com conteúdo e tecnologia.
Discutir a arquitetura com conteúdo, SEO e a liderança técnica trouxe as necessidades editoriais e do Liferay para o desenho das páginas. Essas conversas precisaram acontecer logo no início do processo.
Adaptar componentes às necessidades editoriais.
Usar o Design System exigiu decidir como organizar os componentes para cada formato de conteúdo. Os templates e as especificações de handoff registraram essas escolhas.
No ar
Veja o portal Nossa Energia publicado.
Ver projeto no arPróximo Case
Clinia
Plataforma 2.0, design system e fluxo com IA