[Voltar](https://eduardoamaral.me/projetos/) 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 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. Mapa dos canais antes da reorganização. Apresentação do projeto, p. 20. 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. Dados anteriores ao projeto. Fonte: Google Analytics, de 1º de janeiro de 2022 a 31 de janeiro de 2023. Apresentação do projeto, p. 24. 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. Proposta de destino dos canais. Apresentação do projeto, p. 21. 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. Especificações no Figma: limite de caracteres dos rótulos, variações do menu e navegação oculta durante a busca. 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. [Ver documentação do Petro DS v2](https://uxdudu.notion.site/Petro-DS-v2-2d88fb2f824449078175f0599d7b0b92?pvs=73) [Ver case PetroDS v2](https://eduardoamaral.me/projetos/petrobras-design-system/) 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 ar](https://nossaenergia.petrobras.com.br/) Próximo Case [Clinia Plataforma 2.0, design system e fluxo com IA](https://eduardoamaral.me/projetos/clinia/) Source: https://eduardoamaral.me/projetos/petrobras-nossa-energia/ Language: pt-BR