fuel vision

Fuel Vision é uma plataforma SaaS desenvolvida para centralizar a gestão operacional de postos de combustíveis, permitindo o acompanhamento de abastecimentos, estoque, frota, indicadores e relatórios em um único ambiente.

- Discovery
- Arquitetura de informação
- Wireframes
- Design de interface
- Colaboração com desenvolvimento front-end

Ferramentas e tecnologias utilizadas:

- Figma
- HTML / css tailwind / JS / IA (colaboração técnica)

A gestão operacional de postos de combustíveis envolve diversas operações simultâneas.
- abastecimentos
- estoque
- veículos
- frota
- pedidos
- financeiro
- manutenção

observação importante:
Grande parte dessas informações estavão distribuídas em processos manuais ou sistemas pouco intuitivos, dificultando o acompanhamento da operação.

Criar uma plataforma capaz de:
- centralizar informações
- reduzir erros operacionais
- facilitar auditorias
- aumentar a velocidade de tomada de decisão
- oferecer uma experiência moderna

Principais dores

Operadores:
- dificuldade para localizar informações
- excesso de telas
- muitos dados sem hierarquia

Gestores:
- pouca visibilidade operacional
- relatórios demorados
- dificuldade de análise

Negócio:
- alto risco operacional
- pouca padronização
- dificuldade para escalar

Compreensão do domínio
Antes de iniciar o design foi necessário compreender:
- operação dos postos
- fluxo de abastecimento
- tipos de usuários
- decisões críticas

Por exemplo:

- Módulo: Dashboard
- Justificativa: Primeiro ponto de acesso para acompanhar indicadores e alertas da operação.

- Módulo: Abastecimentos
- Justificativa: Principal atividade operacional do sistema e uma das funções mais utilizadas.

- Módulo: Frota
- Justificativa: Acompanhamento contínuo do consumo e desempenho dos veículos.

- Módulo: Estoque
- Justificativa: Gestão dos níveis de combustível e movimentações dos tanques.

- Módulo: Financeiro
- Justificativa: Acompanhamento gerencial, geralmente acessado após as operações do dia.

- Módulo: Relatórios
- Justificativa: Consultas específicas e análises pontuais, utilizadas conforme necessidade.

- Módulo: Configurações
- Justificativa: Funcionalidade administrativa de baixa frequência de uso.

O dashboard foi projetado para oferecer uma visão rápida da operação, permitindo que gestores identifiquem indicadores críticos, acompanhem tendências e consultem informações detalhadas sem precisar navegar entre diferentes módulos.

O principal objetivo foi reduzir o tempo necessário para compreender o estado atual da operação e apoiar a tomada de decisão diária.

Por que os KPIs ficaram no topo?

Os indicadores foram posicionados no topo da interface por representarem as informações mais consultadas durante o acesso inicial ao sistema.
Antes de qualquer análise detalhada, o gestor precisa responder rapidamente perguntas como:

Existem pedidos pendentes?
Quantos processos foram autorizados?
Existem cargas em trânsito?
Há operações aguardando conciliação?

Ao apresentar esses dados logo na primeira dobra da tela, é possível obter um panorama imediato da operação sem necessidade de interação adicional.
Além disso, a disposição em cartões independentes facilita a comparação entre os diferentes status e permite identificar rapidamente situações que exigem atenção.

Objetivo de UX:

- Reduzir o tempo para localizar informações críticas.
- Priorizar indicadores de alto impacto operacional.
- Facilitar a identificação de exceções e gargalos.

Por que os gráficos aparecem logo abaixo?

Após compreender o estado atual da operação por meio dos KPIs, o próximo passo natural é analisar o comportamento desses indicadores ao longo do tempo.
Por isso, os gráficos foram posicionados imediatamente abaixo dos cards.
Enquanto os KPIs respondem "o que está acontecendo agora", os gráficos ajudam a entender "como esse cenário evoluiu".
O gráfico principal de Cargas Emitidas foi priorizado por representar uma métrica estratégica do negócio, permitindo identificar tendências, variações e possíveis desvios operacionais.
Ao lado do gráfico principal, os cards comparativos apresentam os totais do mês atual e do período anterior, oferecendo contexto para a análise sem exigir que o usuário alterne entre diferentes telas.

Objetivo de UX:

- Complementar os indicadores com contexto histórico.
- Facilitar análises comparativas.
- Apoiar decisões baseadas em tendências, e não apenas em números isolados.

Por que as tabelas ficaram na parte inferior?

As tabelas apresentam informações mais detalhadas e normalmente são utilizadas após a análise inicial do dashboard.
Por esse motivo, elas foram posicionadas abaixo dos indicadores e gráficos, respeitando uma progressão natural da informação:

- Visão geral da operação.
- Evolução dos indicadores.
- Detalhamento dos dados.

Essa organização evita sobrecarga cognitiva e permite que o usuário aprofunde a análise apenas quando necessário.

Diversas decisões de design foram tomadas para reduzir o esforço cognitivo e tornar a interpretação das informações mais rápida.

Decisão de Design: KPIs agrupados na primeira dobra
Benefício para o usuário: Visão imediata do estado da operação

Decisão de Design: Cards com mesmo tamanho e alinhamento
Benefício para o usuário: Facilita comparação visual entre indicadores

Decisão de Design: Gráfico principal centralizado
Benefício para o usuário: Direciona a atenção para a principal métrica operacional

Decisão de Design: Métricas comparativas posicionadas ao lado do gráfico
Benefício para o usuário: Permite análises sem troca de contexto

Decisão de Design: Hierarquia tipográfica (títulos, números e descrições)
Benefício para o usuário: Melhora a escaneabilidade das informações

Decisão de Design: Uso consistente da cor laranja apenas para informações relevantes
Benefício para o usuário: Destaca dados importantes sem gerar excesso de estímulos visuais

Decisão de Design: Espaçamento amplo entre seções
Benefício para o usuário: Organiza o conteúdo em blocos e reduz a sensação de densidade da interface

Decisão de Design: Tabelas separadas por contexto
Benefício para o usuário: Facilita consultas específicas sem comprometer a visão geral

Problema:

- excesso de informação
- navegação extensa
- tabelas complexas
- indicadores dispersos

Decisão:

- Cards com hierarquia visual
- Sidebar organizada por contexto
- filtros persistentes
- Dashboard central

Benefício:

- leitura rápida
- menos cliques
- produtividade
- tomada de decisão

Durante todo o projeto fui responsável por conduzir o processo de UX/UI Design e Frontend Design desde a compreensão do negócio até a construção das interfaces finais. Minha atuação incluiu a organização da arquitetura da informação, definição dos fluxos de navegação, criação de wireframes, desenvolvimento do Design System e prototipação em alta fidelidade, trabalhando em conjunto com a equipe de desenvolvimento e a liderança da empresa para garantir uma solução funcional, escalável e alinhada aos objetivos do produto.

- Interface moderna
- Navegação simplificada
- Estrutura escalável
- Padronização visual
- Melhor organização da informação
- Base preparada para evolução do produto

O Diego foi essencial no desenvolvimento do nosso sistema de gestão de combustível aqui na Fuel Vision. Sua expertise em Design de Interface, Figma e web design trouxe modernidade e funcionalidade ao projeto, superando nossas expectativas. Trabalho de alto nível!

Osvaldo Eduardo
CEO Fuel Solution Tecnologia

Projetar um sistema de gestão para operações de postos de combustíveis reforçou a importância de compreender profundamente o contexto do negócio antes de desenhar qualquer interface. Mais do que criar telas visualmente organizadas, o desafio foi transformar processos complexos em uma experiência clara, eficiente e escalável. O projeto também evidenciou como decisões de arquitetura da informação e hierarquia visual impactam diretamente a produtividade de usuários que trabalham diariamente com grande volume de dados.