Petrobras # Nossa Energia: two Petrobras channels in one content hub. I designed the portal's visual experience with product design, content, SEO and technology working together. The new Nossa Energia brought educational and institutional content into one place. - UX/UI - Information Architecture - Handoff Challenge ## Define each channel's role. The former Nossa Energia published educational content about energy. Fatos e Dados covered institutional topics and company initiatives. We needed to define each channel's role and organize how people would find its content. The plan brought these two channels into the hub and directed ten others to the institutional website. The Petrobras News Agency remained a separate channel, connected to the hub. Channel map before reorganization. Project presentation, p. 20. Original slide in Portuguese. Before ## What audience data and SEO revealed. On the former Nossa Energia site, 89.38% of sessions included just one page. The SEO diagnosis also identified missing internal links and poorly segmented related content. The site recorded 930,000 sessions, with an average duration of 28 seconds. These findings informed the team's decisions about links between pages and recommendations for further reading. Pre-project baseline. Source: Google Analytics, January 1, 2022 to January 31, 2023. Project presentation, p. 24. Original slide in Portuguese. My contribution ## My work on architecture, navigation and templates. I designed the navigation, content formats and page templates. I used the design system components and prepared the development handoff. I worked on information architecture with the content manager and the technical lead responsible for Liferay. Product design, content, SEO and technology shaped the research, editorial strategy and naming together. Decisions ## Categories organize content. Tags connect it. Proposed destinations for the channels. Project presentation, p. 21. Original slide in Portuguese. The architecture proposal gave each piece of content a main category. Tags connected topics, formats and locations across categories, offering additional paths to related stories. Topic pages would have an introduction and featured stories. The plan also included related content, breadcrumbs and search filters by topic and format. Explorations ## Exploring the home page structure. The explorations tested how featured stories, topics and search could create more paths through the hub. ### An editorial home page. An earlier high-fidelity home exploration with featured stories, articles, topics and videos. Process - 01 Diagnosis: map the channels and review audience data, keywords and editorial benchmarks. - 02 Strategy: define the hub's scope and content organization. - 03 Design: explore page structure and develop the portal's templates. - 04 Handoff: document the interface for the Liferay development team. Solution ## The editorial experience on desktop and mobile. An editorial starting point. Featured stories and content formats organized in the desktop home. The experience on mobile. The same editorial hierarchy adapted to a vertical screen. A template for exploring a topic. A thematic opening, featured content and a collection of related stories in one page template. More paths to the content. Search, filters and popular tags translate the information architecture into ways of finding content. A template for reading. Title, text and media hierarchy in an article template with sample content. Deliverables ## What the project delivered. Nossa Energia and Fatos e Dados brought together in one editorial hub. Page templates and content formats designed for desktop and mobile. Existing design system patterns and components applied to the portal. Experience design handed off to the Liferay development team. Handoff ## Navigation rules for implementation. Figma specifications: menu-label character limits, menu variants and navigation hidden while search is open. Original annotations in Portuguese. The handoff documented how the portal used the design system's components. I worked with the technical team responsible for implementation in Liferay. The PetroDS case covers the system's foundations and component library. [View Petro DS v2 documentation](https://uxdudu.notion.site/Petro-DS-v2-2d88fb2f824449078175f0599d7b0b92?pvs=73) [View PetroDS v2 Case](https://eduardoamaral.me/projects/petrobras-design-system/) Learnings ## What I take from this project. ### Clarify each channel’s role before designing the pages. The channel map helped us decide which content belonged in the hub. Defining that scope gave the page design a starting point. ### Build the experience with content and technology. Discussing architecture with content, SEO and the technical lead brought editorial needs and Liferay requirements into the page design. Those conversations belonged early in the process. ### Adapt components to editorial needs. Using the design system required decisions about how to arrange components for each content format. The templates and handoff specifications recorded those choices. Live ## See the published Nossa Energia portal. [View live project](https://nossaenergia.petrobras.com.br/) Next Case Study [Clinia Platform 2.0, design system and AI-powered workflow](https://eduardoamaral.me/projects/clinia/) Source: https://eduardoamaral.me/projects/petrobras-nossa-energia/ Language: en