Linde White Martins

E-commerce B2B de soldagem e gases, desenvolvido sobre um template proprietário e personalizado para a operação da marca, com diferentes jornadas para usuários deslogados, cadastrados e logados.

Cliente

Linde White Martins

Segmento

Gases e soldagem

meu papel

UI Designer

SOLUÇÃO

E-commerce B2B

ano

2026

Quem é a White Martins

A White Martins, uma empresa Linde, é a maior empresa de gases industriais da América do Sul. No e-commerce, vende para empresas: arames, máquinas de solda, reguladores, oxicombustíveis, corte e plasma e acessórios.

O desafio

O desafio era modernizar a experiência de compra B2B, tornando a plataforma mais clara, atual e intuitiva, sem perder as particularidades de uma operação voltada a empresas.

O cliente precisava permitir que usuários não logados consultassem produtos e preços livremente, mas restringir a compra apenas para clientes cadastrados via CNPJ. Isso exigia uma experiência capaz de diferenciar claramente os níveis de acesso e orientar o usuário ao longo da jornada, desde a descoberta dos produtos até o cadastro e a compra.

Minha atuação

Atuei na adaptação e customização da interface do e-commerce B2B, traduzindo a identidade e as necessidades do cliente para dentro da estrutura do template proprietário.
Fui responsável pelo design das principais telas e pela definição dos diferentes estados da experiência, desde a navegação deslogada e consulta de preços até o cadastro via CNPJ, análise e a jornada do usuário logado, garantindo consistência visual e clareza ao longo de todo o fluxo.

Quatro estados, uma só loja

Em vez de esconder o catálogo atrás do login, a loja fica aberta para todos, e a interface muda conforme o estado de acesso de quem navega. Cada tela mostra só o próximo passo possível: entrar, se cadastrar, aguardar a aprovação ou comprar.

O mesmo card, três estados

O produto e o preço nunca somem. O que muda é a ação: ela sempre diz em que ponto da jornada a empresa está.

Deslogado

Vê produto e preço. “Faça login para comprar” leva direto
ao login.

Em análise

O botão vira status, redireciona para a análise do cadastro e evita a frustração de um carrinho bloqueado.

Cadastro aprovado

Aparecem a seleção de variação do produto e o botão de adicionar ao carrinho.

Design system

Customização do Design System existente, ajustando tipografia, cores, variáveis e microcomponentes para traduzir a identidade do cliente de forma consistente na interface.

66

cores primitivas

32

tokens de cor

28

estilos de texto

104

componentes

766

variantes

Secundária

HEX #005591

Token

Brand/Secondary/Medium

Sistema

Neutral, danger, alert, success

Token

System/Neutral/Lightest

Product Card

O card de produto concentra a lógica B2B: a mesma estrutura troca só a área de ação conforme o estado de acesso e variações do produto.

Biblioteca

Base

252

variantes

Botão

Campo de texto

Dropdown

Checkbox

Radio

Switch

Tabs

Link

Alerta

Tooltip

Toast

Badge

Tags

Divisor

Navegação e vitrine

234

variantes

Header

Navegação

Banners

Coleções

Card de produto

Categorias

Marcas

Newsletter

Footer

Compra e conta B2B

279

variantes

Página de produto

Carrinho

Checkout

Minha Conta

Organizações

Cadastro

Chat

Avaliações

Assistências técnicas

Página de produto

Especificações, imagens e preço são iguais para todos. Só a área de compra se adapta: login, status do cadastro, compra completa com “Comprar junto”, ou “Avise-me” quando o produto está indisponível.

Cadastro em quatro etapas

O cadastro B2B pede dados e documentos da empresa. Para não virar um formulário interminável, ele foi dividido em etapas curtas, com o progresso sempre à vista e a opção de voltar sem perder o que já foi preenchido.

Depois do envio

“Cadastro enviado com sucesso”: a empresa volta para a loja no estado Em análise e recebe o resultado da aprovação por e-mail.

Minha Conta

Depois da aprovação, a conta vira uma central de compras da empresa: organizações e centros de custo, cotações, histórico de pedidos e os documentos que o comprador industrial precisa ter à mão.

Minha organização

Pedido fácil

Minha lista

Meus cartões

Meus pedidos

2ª via de boleto

Minhas solicitações

Certificados de qualidade

Ficha de dados de segurança

Minha organização / Minhas cotações / Meus pedidos

Versão em mobile

Os quatro estados de acesso e as áreas de conta também existem no mobile, com as variantes mobile dos mesmos componentes: 125 telas no total.

Uma loja, do visitante ao comprador recorrente

O projeto cobre a jornada B2B completa. Tudo sobre um design system único, em desktop e mobile.

Estados de acesso

Deslogado, sem cadastro, em análise e aprovado

Fluxos

Loja, login, cadastro, carrinho, checkout e Minha Conta

Telas

120 desktop e 125 mobile, contando estados

TECNOLOGIA

VTEX

desenvolvido por

b8one

EQUIPE

UX Design, UI Design, Desenvolvimento, Gestão de Projeto

Próximo projeto

UI Design & Customização

Site institucional desenvolvido a partir de um template proprietário, com personalização de componentes e uma identidade visual alinhada ao posicionamento da marca.

UI Design

Página de produto

Customização

→

Mary Kay, capa do projeto

Linde White Martins

E-commerce B2B de soldagem e gases, desenvolvido sobre um template proprietário e personalizado para a operação da marca, com diferentes jornadas para usuários deslogados, cadastrados e logados.

Cliente

Linde White Martins

Segmento

Gases e soldagem

meu papel

UI Designer

SOLUÇÃO

E-commerce B2B

ano

2026

Quem é a White Martins

A White Martins, uma empresa Linde, é a maior empresa de gases industriais da América do Sul. No e-commerce, vende para empresas: arames, máquinas de solda, reguladores, oxicombustíveis, corte e plasma e acessórios.

O desafio

O desafio era modernizar a experiência de compra B2B, tornando a plataforma mais clara, atual e intuitiva, sem perder as particularidades de uma operação voltada a empresas.

O cliente precisava permitir que usuários não logados consultassem produtos e preços livremente, mas restringir a compra apenas para clientes cadastrados via CNPJ. Isso exigia uma experiência capaz de diferenciar claramente os níveis de acesso e orientar o usuário ao longo da jornada, desde a descoberta dos produtos até o cadastro e a compra.

Minha atuação

Atuei na adaptação e customização da interface do e-commerce B2B, traduzindo a identidade e as necessidades do cliente para dentro da estrutura do template proprietário.
Fui responsável pelo design das principais telas e pela definição dos diferentes estados da experiência, desde a navegação deslogada e consulta de preços até o cadastro via CNPJ, análise e a jornada do usuário logado, garantindo consistência visual e clareza ao longo de todo o fluxo.

Quatro estados, uma só loja

Em vez de esconder o catálogo atrás do login, a loja fica aberta para todos, e a interface muda conforme o estado de acesso de quem navega. Cada tela mostra só o próximo passo possível: entrar, se cadastrar, aguardar a aprovação ou comprar.

Empresa já cadastrada

Deslogado

Visitante

Navega pelo catálogo com preço. O botão de compra leva ao login.

↓

Acesso

Login

E-mail e senha, ou código de acesso enviado por e-mail, sem precisar de senha.

↓

Multi-CNPJ

Escolhe a organização

Um usuário pode comprar por mais de uma empresa e centro de custo.

↓

Cadastro aprovado

Compra liberada

Variações, quantidade e Adicionar, além de pedido fácil, cotações e 2ª via de boleto.

Empresa sem cadastro, a partir do login

Sem cadastro

E-mail sem cadastro

O login identifica que a empresa ainda não é cliente e oferece o cadastro.

↓

4 etapas

Cadastro da empresa

Dados básicos, documentos, contato e validação por código.

↓

Em análise

Cadastro em análise

Navega normalmente; o botão de compra mostra o status do cadastro.

↓ aprovado pela White Martins:
compra liberada

Televendas

Perfil de televendas: o vendedor usa “Entrar como cliente” e compra em nome da empresa, com a mesma interface do cliente aprovado.

O mesmo card, três estados

O produto e o preço nunca somem. O que muda é a ação: ela sempre diz em que ponto da jornada a empresa está.

Deslogado

Vê produto e preço. “Faça login para comprar” leva direto ao login.

Em análise

O botão vira status, redireciona para a análise do cadastro e evita a frustração de um carrinho bloqueado.

Cadastro aprovado

Aparecem a seleção de variação do produto e o botão de adicionar ao carrinho.

Design system

Customização do Design System existente, ajustando tipografia, cores, variáveis e microcomponentes para traduzir a identidade do cliente de forma consistente na interface.

66

cores primitivas

32

tokens de cor

28

estilos de texto

104

componentes

766

variantes

Card - tipografia

Secundária

HEX #005591

Token

Brand/Secondary/Medium

Sistema

Neutral, danger, alert, success

Token

System/Neutral/Lightest

Primitiva → token → onde aparece

Primary/700

#005D21

↓

Brand/Primary/Medium

↓

Variação selecionada, Adicionar e links

chip de variação selecionado

Primary/800

#003E13

↓

Brand/Primary/Dark

↓

Texto em hover do menu do header

Primary/900

#002408

↓

Brand/Primary/Darkest

↓

Rodapé

Secondary/500

#005591

↓

Brand/Secondary/Medium

↓

Selo “Mais vendido”

Selo Mais vendido

Product Card

O card de produto concentra a lógica B2B: a mesma estrutura troca só a área de ação conforme o estado de acesso e variações do produto.

Anatomia do card de produto (cadastro aprovado)

01

Selo de desconto

02

Favoritar

03

Imagem do produto

04

Nome do produto

05

Variações

06

Preço “a partir de”

07

Adicionar ao carrinho

Nos estados deslogado e em análise, as variações somem e o botão vira “Faça login para comprar” ou “Cadastro em análise”. O resto do card não muda, então a vitrine é a mesma para todos.

Biblioteca

Base

252

variantes

Botão

Campo de texto

Dropdown

Checkbox

Radio

Switch

Tabs

Link

Alerta

Tooltip

Toast

Badge

Tags

Divisor

Navegação e vitrine

234

variantes

Header

Navegação

Banners

Coleções

Card de produto

Categorias

Marcas

Newsletter

Footer

Compra e conta B2B

279

variantes

Página de produto

Carrinho

Checkout

Minha Conta

Organizações

Cadastro

Chat

Avaliações

Assistências técnicas

Página de produto

Especificações, imagens e preço são iguais para todos. Só a área de compra se adapta: login, status do cadastro, compra completa com “Comprar junto”, ou “Avise-me” quando o produto está indisponível.

Deslogado

Em análise

Cadastro aprovado

Indisponível

Cadastro em quatro etapas

O cadastro B2B pede dados e documentos da empresa. Para não virar um formulário interminável, ele foi dividido em etapas curtas, com o progresso sempre à vista e a opção de voltar sem perder o que já foi preenchido.

1

Dados básicos

2

Documentos da empresa

3

Contato e senha

4

Validação por código

Depois do envio

“Cadastro enviado com sucesso”: a empresa volta para a loja no estado Em análise e recebe o resultado da aprovação por e-mail.

Minha Conta

Depois da aprovação, a conta vira uma central de compras da empresa: organizações e centros de custo, cotações, histórico de pedidos e os documentos que o comprador industrial precisa ter à mão.

Minha organização

Pedido fácil

Minha lista

Meus cartões

Meus pedidos

2ª via de boleto

Minhas solicitações

Certificados de qualidade

Ficha de dados de segurança

Minha organização / Minhas cotações / Meus pedidos

Versão em mobile

Os quatro estados de acesso e as áreas de conta também existem no mobile, com as variantes mobile dos mesmos componentes: 125 telas no total.

Uma loja, do visitante ao comprador recorrente

O projeto cobre a jornada B2B completa. Tudo sobre um design system único, em desktop e mobile.

Estados de acesso

Deslogado, sem cadastro, em análise e aprovado

Fluxos

Loja, login, cadastro, carrinho, checkout e Minha Conta

Telas

120 desktop e 125 mobile, contando estados

TECNOLOGIA

VTEX

desenvolvido por

b8one

EQUIPE

UX Design, UI Design, Desenvolvimento, Gestão de Projeto

Próximo projeto

UI Design & Customização

Site institucional desenvolvido a partir de um template proprietário, com personalização de componentes e uma identidade visual alinhada ao posicionamento da marca.

UI Design

Página de produto

Customização

→

Mary Kay, capa do projeto