Produto digital · Site institucional B2B

Sem Parar Empresas.

Redesenho do site institucional B2B: da home parada em 2018 a uma vitrine que explica, compara e vende cada produto.

Ver o que melhorou no UX Ver no Behance

Sem Parar Empresas (Grupo Fleetcor) · 2023 — 2025 · UX/UI Designer

Nova home no navegador: cabeçalho com menu Produtos, links diretos, botões Compre Online e Acessar Conta; banner rosa com a tag Sem Parar e o título O futuro do vale-pedágio chegou. — Depois: primeira dobra com produto, motivo e uma ação.

32

telas desenhadas

25

semanas de projeto

Fonte: imagem 02 do Behance (Desafio).

O trabalho

A Sem Parar Empresas vende tag de pedágio, vale-pedágio, cartão combustível e benefícios para frotas e RH. O site institucional não mudava desde 2018 e a conversão orgânica vinha caindo depois de um rebrand. O trabalho refez a home e a estrutura do site: navegação por produto, loja com compra online, prova social em camadas e blog, tudo sobre um design system que serve desktop e celular.

O contexto

A Sem Parar Empresas é a frente B2B da Sem Parar. Quem entra no site é gestor de frota, comprador, dono de transportadora ou RH procurando um jeito de pagar pedágio, combustível, vale-transporte e refeição sem papel e sem retrabalho. São produtos diferentes, com públicos diferentes, e o site é a porta de entrada de todos eles: é onde a pessoa descobre o que existe, compara, pede proposta ou compra direto. Com um rebrand recente, a marca já tinha uma cara nova; o site ainda não.

O desafio

A home anterior tinha três problemas visíveis nas telas. Falava mais da empresa do que dos produtos: a primeira dobra era uma promoção sazonal e, abaixo, três cartões sobre confiança, abrangência e eficiência, sem nada que ajudasse a decidir. Os produtos apareciam espremidos em abas e mini-cartões de letra miúda, cada um de uma cor, difíceis de ler e de comparar. E o único caminho de conversão era um formulário de proposta com sete campos obrigatórios e CAPTCHA, antes de a pessoa saber preço ou condição. O desafio era transformar a página num percurso com começo, meio e fim, mantendo a identidade nova e sem perder nenhum produto do portfólio.

Setor: Mobilidade e pagamentos B2BPeríodo: 2023 — 2025Função: UX/UI DesignerFerramentas: Figma, Google Analytics, Miro, Maze, Hotjar, Smartlook

Como foi feito

Do problema à tela.

01
Organização
Antes de desenhar, o escopo foi mapeado: páginas existentes, produtos que precisavam de espaço, quem aprovava o quê e em quanto tempo. Isso virou um cronograma de 25 semanas e uma lista do que levantar antes de abrir o Figma.
02
Desk research
Benchmark de concorrentes e de referências fora do setor, olhando como cada um apresenta portfólio, preço e prova social, para entender o que o visitante B2B já espera de uma home e onde dava para ser mais direto.
03
Análise de dados
Leitura do Google Analytics, Hotjar e Smartlook sobre o site antigo: por onde as pessoas entravam, até onde rolavam, onde clicavam e onde abandonavam. Isso definiu o que subiu para a primeira dobra.
04
Pesquisa com usuários
Pesquisa qualitativa com dois grupos, clientes e não clientes da Sem Parar, porque quem já conhece os produtos e quem está descobrindo chegam ao site com perguntas diferentes.
05
Protótipo
O protótipo foi feito primeiro no celular, depois na tela grande. Componentes e tokens saíram do design system da marca, o que manteve botões, cartões e títulos consistentes nas 32 telas.
06
Testes e validações
O protótipo foi apresentado a diferentes áreas, de negócio a desenvolvimento, e testado com usuários no Maze. Cada rodada gerou ajustes de texto, ordem de seções e hierarquia.
07
Apresentação e handoff
Apresentação final para quem aprovava e, com o ok, handoff documentado para o time de desenvolvimento, com os componentes já nomeados no design system.

O que melhorou no UX

8 decisões, com a tela pra provar.

01 / 08

Menu organizado por produto, com duas ações separadas

O atrito: O menu antigo misturava produtos, categorias amplas, blog e institucional numa linha só, com um único botão, Acessar conta, que servia ao cliente atual e ignorava quem queria comprar.
O que a tela faz agora: O novo cabeçalho tem um item Produtos que abre o portfólio inteiro, links diretos para os cinco produtos mais procurados e o blog. À direita, dois botões distintos: Compre Online, secundário com carrinho, e Acessar Conta, no botão cheio.; Por que é melhor: Quem já é cliente e quem está pesquisando têm objetivos diferentes. Um botão para cada um, com peso visual diferente, evita o clique errado por falta de opção.

Antes

Captura da home antiga de 2018: banner escuro de Black November, três cartões institucionais, abas de gestão de veículos e benefícios com mini-cartões coloridos e fileira de selos de prêmios. — Antes: a home de 2018, promoção na frente e produtos escondidos em abas.

Depois

02 / 08

Primeira dobra com produto e motivo, não só promoção

O atrito: A home antiga abria com um banner escuro de Black November, texto pequeno e o produto numa foto de mão. Uma oferta por tempo limitado envelhece rápido e não explica o que a empresa faz.
O que a tela faz agora: O novo banner mostra a tag física em tamanho grande, título curto em caixa alta e uma frase com o motivo de agir agora: pagar pedágio com a tag e ficar dentro da nova regulamentação. Um só botão Saiba mais, setas laterais grandes e indicador de slide visível.; Por que é melhor: O visitante entende em segundos qual é o produto e por que ele importa. Os controles maiores ajudam quem navega no celular.

Antes

Depois

03 / 08

Portfólio em seis cartões iguais, cada um com uma frase

O atrito: Os produtos ficavam escondidos em abas e, dentro delas, em cinco mini-cartões de cores diferentes com parágrafos em letra miúda. Era preciso trocar de aba para descobrir que existia vale-refeição.
O que a tela faz agora: A seção Soluções para sua empresa não parar lista seis produtos em cartões do mesmo tamanho, cada um com ícone, nome, seta e uma linha de descrição. Tudo visível de uma vez, sem aba.; Por que é melhor: Comparar fica fácil porque os cartões têm a mesma estrutura. Uma frase por produto basta para decidir se vale clicar; o detalhe fica na página do produto.

Antes

Depois

Seção Soluções para sua empresa não parar com seis cartões iguais: Tag Sem Parar, Vale-Pedágio, Multiabastece, VR+VA, Transporte e Multi, com ilustração de família ao lado de um carro. — Seis produtos, uma frase cada, sem aba.

04 / 08

Compra online com condição e preço na própria home

O atrito: O único caminho de conversão era Solicite uma proposta: nome, e-mail, telefone, empresa, CNPJ, número de funcionários, UF, todos obrigatórios, mais CAPTCHA, antes de qualquer condição.
O que a tela faz agora: A seção Compre online traz três cartões, um por produto principal, com a oferta em destaque (meses grátis, taxa zero, cashback), a condição em letra menor, um botão cheio Contratar agora e um link secundário para outros planos.; Por que é melhor: Quem já decidiu compra na hora; quem ainda compara vê a condição sem preencher formulário. Menos atrito no começo do funil.

Antes

Captura do site anterior com o formulário Solicite uma proposta sobreposto ao banner, sete campos obrigatórios e CAPTCHA, acima de cartões de benefícios e de outros produtos. — Antes: o único caminho de conversão era um formulário longo.

Depois

Seção Compre online com três cartões de oferta (Tag Sem Parar, VR+VA, Cartão Combustível), botões Contratar agora e, abaixo, uma régua com números da operação. — Oferta e condição na própria home, com compra direta.

05 / 08

Prova social em camadas: números, prêmios, depoimentos, logos

O atrito: A prova social antiga era uma fileira de cinco selos redondos com legenda minúscula, e o texto institucional vinha antes dos produtos.
O que a tela faz agora: Agora ela vem depois da oferta e em quatro camadas: régua de números da operação, reconhecimentos em linha com título e descrição legíveis, três depoimentos com estrelas, logo e cargo de quem fala, e uma faixa de logos de empresas atendidas.; Por que é melhor: Cada camada responde a uma dúvida: a empresa é grande? É premiada? Quem usa gosta? Empresas como a minha usam? Nessa ordem, a página sustenta a decisão.

Antes

Depois

Bloco de vídeo institucional sobre fundo vinho e, abaixo, a seção Reconhecimentos com cinco prêmios em linha, cada um com título e descrição. — Vídeo e prêmios com texto legível.

Depoimentos com nota, logo e cargo.

06 / 08

Blog e newsletter como continuação, não como apêndice

O atrito: O blog existia só como item de menu. Quem não estava pronto para comprar saía do site sem outro caminho.
O que a tela faz agora: Antes do rodapé, um carrossel de artigos com foto, título em caixa alta e link Saiba mais, seguido de uma faixa de newsletter com um campo só, e-mail, e botão Enviar.; Por que é melhor: Dá uma saída para o visitante em fase de pesquisa e um jeito de manter contato com um único campo, em vez do formulário longo.

07 / 08

Rodapé virou mapa do site por tipo de público

O atrito: Com mais de quinze produtos e serviços, o rodapé antigo não ajudava a achar nada.
O que a tela faz agora: O rodapé abre com um botão Mapa do Site e organiza os links em colunas por quem procura: a empresa, para seus veículos, para seus colaboradores, serviços e institucional.; Por que é melhor: É a última chance de quem rolou até o fim sem achar o que queria. Agrupar por público faz a pessoa ler só a coluna que é dela.

Rodapé como mapa do site.

08 / 08

Uma página, um sistema de componentes

O atrito: O site anterior misturava cartões com sombras diferentes, botões de tamanhos variados e cores por produto que não vinham da marca.
O que a tela faz agora: Todas as seções usam os mesmos tokens: um rosa de acento, um vinho de apoio, fundo branco alternado com cinza-claro, títulos na mesma família condensada, cartões com o mesmo raio e sombra, botões primário e secundário de altura igual.; Por que é melhor: Consistência reduz o esforço de leitura e dá ao desenvolvimento peças prontas para as outras páginas.

Antes

Depois

Página inteira da nova home da Sem Parar Empresas, do cabeçalho ao rodapé. — A home inteira, de ponta a ponta.

Mais telas

O resto do trabalho, tela por tela.

Página inicial

Capa do projeto: a nova home no notebook.

O que fica desse trabalho

Site B2B também é página de venda: oferta e condição visíveis convertem mais que um formulário que pede tudo antes de mostrar qualquer coisa.
Produto escondido em aba é produto que ninguém acha. Mostrar tudo de uma vez, com a mesma estrutura, facilita comparar.
Prova social funciona em ordem: primeiro o tamanho, depois o reconhecimento, depois quem usa. Cada camada responde a uma dúvida.
Começar pelo design system economiza tempo depois: as seções da home saíram dos mesmos componentes que o time reaproveitou nas outras páginas.

Entregas

Redesenho da home e da estrutura do site
Protótipo navegável, primeiro no celular
Componentes e tokens no design system da marca
Benchmark e análise de dados do site antigo
Pesquisa qualitativa com clientes e não clientes
Testes com usuários e apresentação para as áreas
Handoff documentado para o desenvolvimento

Cores do projeto

#D70B52 · #EEEEEE

Ver no Behance

Telas do projeto original; dados pessoais que apareciam nas telas foram cobertos. Trabalho feito pelo fundador da Apol pra Sem Parar Empresas (Grupo Fleetcor).