Vitor Abreu
Todos os cases

Petrobras / 2024

Petrobras — Modernização de Sistemas Legados (NORTEC + Interage)

Redesenho de sistemas corporativos legados com workflows de aprovação, formulários densos e e-mails transacionais no Design System.

Papel
Senior Product Designer / UX Lead
Empresa
Petrobras
Ano
2024
Diagrama de fluxo do NORTEC/Interage: mapa de telas agrupado por ação (Aprovar, Cancelar, Retornar, Encaminhar Solicitação, Atualização)
Petrobras · Visão geralCapítulos

01 / 05

Visão geral

3 perfis (solicitante, ponto focal, aprovador) unificados num fluxo único e rastreável

Os produtos: NORTEC (Codificação e Normas Técnicas) e Interage (Gestão de Interações de Segurança). Escopo: redesenho de sistemas legados, arquitetura de informação para telas densas, workflows de aprovação, validações inline e e-mails transacionais no Design System. O grande problema resolvido: simplificar sistemas corporativos pesados, reduzindo o tempo de navegação, erros de preenchimento e dúvidas entre os diferentes perfis (solicitante, ponto focal e aprovador).

02 / 05

O problema

Plataformas corporativas antigas costumam ter formulários longos sem validação imediata, falta de clareza em qual etapa o processo está parado e visões desconectadas entre as equipes.

03 / 05

Contexto

NORTEC e Interage eram dois sistemas internos da Petrobras usados por solicitantes, pontos focais e aprovadores em processos de segurança e normas técnicas. Cada perfil enxergava o processo de um jeito diferente, sem um fio condutor visual comum entre as telas e as notificações por e-mail.

04 / 05

Decisões de design

01

Stepper de Status & Ações Contextuais (Interage): progresso visual no topo da tela, liberando apenas os botões válidos para a etapa atual.

Central de Notificações do NORTEC/Interage: cards contextuais por tipo de evento (Código de Origem, Anexos Norma, Alerta NTP, Fórum)
02

Navegação em Árvore & Validação Inline (NORTEC): estrutura lateral expansível para achar códigos técnicos e validação de campos em tempo real no formulário.

Fórum do NORTEC: lista densa e filtrável de sugestões técnicas, com filtros combinados por subcomissão, norma, data, usuário e status
03

Tabelas Densas e CRUD Seguro: filtros combinados e modais de confirmação obrigatórios para ações destrutivas. E-mails Transacionais no DS: as notificações de aprovação por e-mail foram desenhadas com a mesma identidade visual e estrutura da plataforma web.

Lista de Interações (Interage): tabela densa com filtros combinados por palavra-chave, situação, dimensão, lotação, local e tipo, e status coloridos por linha

05 / 05

Resultado

O novo desenho unificou a linguagem visual entre NORTEC e Interage, reduzindo dúvidas entre solicitante, ponto focal e aprovador sobre em que etapa cada processo estava, e diminuindo erros de preenchimento graças à validação inline.

Vamos construir algo juntos

Tudo sempre começa com uma boa conversa.