Símbolo do logotipo da Fattoria
Texto do logotipo da Fattoria
Seta branca em diagonal para cima e para a direita.

Webposto

UX e UIFront-end | Webflow
Notebook navegando no site do WebPosto.
Seta branca para baixo.

O desafio aceito

O que começou como um redesign virou uma revisão estratégica completa do site. Ao mergulhar no projeto, nosso time identificou que o caminho ia além do visual: passava também pela estrutura. A organização dos produtos precisava refletir melhor a forma como os usuários pensavam e navegavam.

Design Thinking

Uma análise que foi além

Imagem relativa a uma análise profunda do projeto.

Imersão

Entender
antes de criar

O briefing inicial era modernizar o site do webPosto, líder de mercado em sistemas para postos de combustíveis. Mas antes de abrir qualquer ferramenta de design, nosso time mergulhou no produto. Estudamos o que funcionava, o que podia evoluir e onde estavam as oportunidades ainda inexploradas.

Só depois disso começamos a desenhar.

Iniciativa

A descoberta que
redefiniu o projeto

Durante a imersão, identificamos algo que não estava no escopo original: a arquitetura do site não traduzia a real oferta de valor do webPosto. Os produtos existiam, eram robustos — mas estavam organizados pela lógica interna da empresa, não pela jornada de quem chegava ao site pela primeira vez.

A dinâmica de Card Sorting revelou padrões que nenhum briefing teria antecipado. Com esses dados em mãos, apresentamos o diagnóstico aos stakeholders — que aceitaram e validaram a nossa recomendação.

Imagem de card sorting.

Design / UX

Uma nova forma de organizar o que já existia

Imagem de elementos do site WebPosto.

Arquitetura

Um ecossistema organizado
em três eixos

Com os dados das dinâmicas de UX em mãos, reorganizamos o portfólio em três frentes — Pista, Conveniência e Gestão. Cada produto encontrou seu lugar dentro de uma estrutura alinhada tanto à lógica do usuário que chega pela primeira vez quanto à visão dos stakeholders do webPosto.

A arquitetura deixou de ser um reflexo da empresa e passou a espelhar o usuário.

Imagem da sessão do WebPosto retrabalhada.

Design / UI

Construindo presença humana para o produto

Com a identidade visual definida, o desafio estava na linguagem fotográfica. Mockups e frames de sistema são funcionais, mas incapazes de gerar identificação com quem navega. O webPosto precisava de personalidade e presença humana na narrativa do produto.

A solução foi criar um ensaio fotográfico completo com apoio de Inteligência Artificial — com direção de arte construída a partir das personas aprovadas. Cada imagem foi pensada para um perfil, um contexto, uma história. 

O resultado é uma comunicação visual coesa, realista e alinhada à identidade visual do site, que parece ter sido fotografada para o webPosto — o que, de certa forma, aconteceu.

6 quadrados diferentes com pessoas sorridentes trabalhando no WebPosto
Área relativa a página do WebPostoÁrea relativa a página do WebPosto

Tecnologia

Autonomia para
gerenciar o conteúdo

A escolha do webflow como plataforma de desenvolvimento respondeu a três critérios inegociáveis: flexibilidade para construir layouts complexos, autonomia para a equipe de marketing operar o conteúdo sem depender de desenvolvimento e velocidade de entrega sem abrir mão da qualidade.

O blog ficou no WordPress — uma estrutura sólida, familiar para times de conteúdo editorial e integrada ao site de forma transparente para o usuário final.

A combinação das duas plataformas entregou o que o projeto exigia: um site moderno e performático, que o webPosto consegue manter, evoluir e escalar sozinha.

Imagem do WebFlow com o site do WebPosto

Iniciativa

A descoberta que
redefiniu o projeto

Durante a imersão, identificamos algo que não estava no escopo original: a arquitetura do site não traduzia a real oferta de valor do webPosto. Os produtos existiam, eram robustos — mas estavam organizados pela lógica interna da empresa, não pela jornada de quem chegava ao site pela primeira vez.

A dinâmica de Card Sorting revelou padrões que nenhum briefing teria antecipado. Com esses dados em mãos, apresentamos o diagnóstico aos stakeholders — que aceitaram e validaram a nossa recomendação.

Veja também

Portal
Fapes

UX e UIFront-endBack-end | JavaAzure | NuvemAPI | Integação
ver projeto
Seta branca em diagonal para cima e para a direita.Ícone de seta preta
Um tablet navegando no site da Fapes.