Your scrollable content goes here

Customization of the Petrobras Website Ecosystem

Customization of the Petrobras Website Ecosystem

How the remapping of Petrobras' website ecosystem brought a new navigation and interactivity experience to users, reducing friction and the perception of different environments.

CLIENT

Petrobras

(as Brivia)

TOOLS.

Figma . Figjam . Notion

YEAR

2022

ROLE

UI UX Designer

Problem

This project aimed to completely restructure Petrobras' website ecosystem, focusing on user experience. More than 2,000 URLs were redesigned, simplified, and reorganized to provide an interactive and innovative experience, bringing more clarity and making the content easier to understand, as it was previously very complex.

Process

With the original content filtered and redesigned for a more harmonious and intuitive distribution, the design team started working on the portal redesign. The creation process focused on three main points.

How do we value and emphasize technical content?

How do we make the visual design contemporary and scalable?

How do we improve the overall user experience?

First Step

The first step was to define the navigation and information hierarchy. All pages were first validated through low-fidelity wireframes, where we could already understand basic structural needs that could be reused to scale the project using components in the design system.

Visual Concept

After extensive research and market reference analysis, we developed an innovative visual concept for the new website.

Incorporating modern design principles, such as a mobile-first approach, we ensured scalability and delivered exceptional experiences in both usability and visual appeal.

Components and Design System

More than 1,500 components were created, from simple titles to complex interactive timeline components. Almost 100% of the structures were built using components. The goal was to create a scalable toolkit to meet all the needs of different types of content.

Besides the components, a style guide was also created, including all details about fonts, sizes, spacing, and colors to be applied in the interfaces of the new site.

Result and impact

The main highlight of the new website is the special pages. They show the importance of four strategic topics for the company: pre-salt, innovation and technology, energy journey, and energy transition.

The new website was launched on October 3, 2023, the date when Petrobras celebrated its 70th anniversary.

Take a look at some of the interactivity on the special pages and the final result of Petrobras' new website. An intuitive, attractive, and interactive digital product with easy navigation, accessibility, and a strong connection with the audience.

Take a look at some of the interactivity on the special pages and the final result of Petrobras' new website. An intuitive, attractive, and interactive digital product with easy navigation, accessibility, and a strong connection with the audience 👇

There are more than

There are more than

1 milion

1 milion

daily visits

daily visits

to internal URLs

to internal URLs

of over

200 PAGES

200 PAGES

in the ecosystem.

in the ecosystem.

✦  THANK YOU ✦    FOR COMING
✦  THANK YOU ✦    FOR COMING

I’m available for new projects and challenges.
If you liked my work, feel free to reach out so we can talk! 🚀

I’m available for new projects and challenges.


If you liked my work, feel free to reach out so we can talk! 🚀

CONTACT FORM

thaisgliosci@gmail.com

+55 51 98277-0717

Made with 💖 by Thais Gliosci