'/%3e%3c/svg%3e)
Petrobras
Nossa Energia, o portal de conteúdos da Petrobras.
%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
Organizar conteúdo sem perder consistência.
A Petrobras tinha conteúdos institucionais e artigos distribuídos em diferentes estruturas. O desafio era dar mais governança para publicação, reduzir inconsistências visuais e permitir maior autonomia editorial.
Além disso, a solução precisava respeitar restrições técnicas, dialogar com CMS Liferay e preservar a consistência do ecossistema digital existente.
Antes
Um hub para centralizar conteúdo institucional.
O Nossa Energia foi pensado para centralizar conteúdos da Petrobras em uma experiência editorial mais clara, modular e fácil de evoluir.
O projeto se conecta diretamente ao design system da Petrobras: os mesmos tokens, componentes e padrões que sustentam o portal também servem como base para o site principal e outras frentes digitais.
Como resolvemos
Mapas de processo primeiro, telas finais depois.
Processo
Mapeamento dos conteúdos dispersos e dos principais tipos editoriais da Petrobras.
Arquitetura da informação para organizar artigos, editorias, informações institucionais e chamadas.
Uso do Design System Petrobras v2 para acelerar consistência visual, componentes e governança.
Documentação manual de specs, tokens, componentes, seções, templates, motion e acessibilidade.
Solução
Um portal modular construído a partir do design system.
Centralização dos conteúdos institucionais em uma experiência editorial mais clara.
Maior liberdade para equipes publicarem páginas e artigos sem depender de layouts únicos.
Reuso de componentes, sections e templates do design system entre portal, site principal e outras frentes digitais.
Base mais escalável para colaboração entre UX, UI, desenvolvimento Liferay e conteúdo.
Relação
Portal, design system e site principal são o mesmo ecossistema.
Este projeto faz parte da família digital Petrobras: Nossa Energia, design system e site principal. Juntos, eles mostram uma base reutilizável para múltiplos produtos.
A documentação do Petro DS v2 organizava Design Tokens, Components, Sections, Templates, Motion e Acessibilidade. Esse material foi criado manualmente e serviu como referência para reduzir ambiguidade na implementação e facilitar evolução do ecossistema.
No ar
Veja o portal Nossa Energia publicado.
Ver projeto no arPróximo Case
Clinia
Plataforma 2.0, design system e fluxo com IA