Welz

2026 – até hoje

A Welz é uma marca de nutrição diária, com Supergreens, Body Peptides e Daily Hydration. As páginas de produto abrem com a galeria do produto, os números de cada porção e a compra por etapas, e seguem com os sinais do dia a dia, o comparativo, o rótulo, o modo de tomar e as referências numeradas.

Website

UX/UI Design

Dev

Suporte / acompanhamento

Ver Projeto

Página do Supergreens no computador: a seção O que vem no sachê, com o sachê e os números do rótulo

Pote do Supergreens da Welz, de frente, com a tampa verde e os sachês à mostra, sobre fundo claro

Página do Daily Hydration no celular: a seção Como tomar, em três passos

O cliente

A Welz Nutrition é uma marca de nutrição diária de Jaraguá do Sul (SC), que se apresenta no próprio site como “Sua nutrição diária, finalmente simples”. A linha da Welz tem três produtos: o Supergreens, suco verde em pó; o Body Peptides, peptídeos de colágeno em lata; e o Daily Hydration, eletrólito em pó.

O desafio

A página do Supergreens partiu de uma cópia fiel da página que a Welz tem no ar. O pedido registrado foi uma estrutura nova, inspirada em referências de mercado, com a identidade e o tom de voz da Welz.

O ponto mais difícil era a compra do Supergreens: a Welz vende kits com desconto por quantidade e uma assinatura com desconto maior, e um seletor de kits copiado das referências criaria duas grades de preço competindo. A página do Supergreens precisava mostrar o preço por sachê em cada quantidade.

Página do Body Peptides no computador: a seção Como tomar, com três fotos das latas

Detalhe da tabela nutricional em HTML na página do Supergreens da Welz

Página do Body Peptides no celular: a etapa 2 da compra, com o sabor de cada fardo

O que fizemos

Nova página do Supergreens

A página de produto do Supergreens foi reestruturada depois de estudos do guia de marca da Welz, de duas páginas de referência e da página antiga, com o plano das seções registrado antes da construção.
Compra em etapas

Na página do Supergreens, a pessoa escolhe primeiro o kit de 1, 2 ou 3 potes e depois a compra única ou a assinatura mensal. O bloco de compra do Supergreens abre na compra única.
Os brindes de cada kit

O bloco de compra da Welz mostra quais brindes o kit escolhido já ganha, pelas regras copiadas do site da marca, e o botão final leva o pedido ao carrinho e ao checkout.
Sabor por fardo ou caixa

As páginas do Body Peptides e do Daily Hydration seguem o molde do Supergreens, com uma etapa a mais: o sabor de cada fardo de latas ou de cada caixa de sachês.
Tabelas nutricionais em HTML

A tabela nutricional do Supergreens, que na página antiga era imagem, virou tabela em HTML, assim como a do Body Peptides e as duas do Daily Hydration, uma por sabor.
Referências numeradas

Cada página de produto da Welz termina numa seção de referências numeradas, com o rótulo, normas da Anvisa e estudos citados. As alegações de saúde de cada produto foram estudadas frente às regras da Anvisa.
Home, carrinho e checkout

Na versão de demonstração, a home, a gaveta do carrinho e a página de checkout da Welz foram redesenhadas na identidade das páginas de produto. Carrinho e pagamento funcionam em simulação, sem criar pedidos.
Guia para a integração

O repositório das páginas da Welz traz treze documentos numerados para o time que vai ligar as telas ao catálogo, ao estoque, à logística, ao pagamento, aos clientes e à assinatura da marca.

Página do Daily Hydration da Welz no computador: a etapa 2 da compra, com um sabor para cada uma das duas caixas

Etapa 2 da compra na página do Supergreens da Welz: o kit com o brinde e a escolha entre compra única e assinatura mensal

Sachês de Jabuticaba e limão e de Melancia sobre arcos nas cores dos sabores, na página do Daily Hydration da Welz

Como foi feito

As páginas da Welz foram feitas em Next.js 16, com React 19, TypeScript e Tailwind CSS 4, e publicadas na Vercel. No código da Welz, o texto fica em arquivos de dados e o desenho nos componentes, e as três páginas de produto usam as mesmas peças de interface.

Preços, descontos e brindes saem do catálogo e das regras de preço copiados do site da Welz, sem valor escrito à mão nos componentes. Os endereços antigos de sabor do Daily Hydration redirecionam para a página nova, para links e itens de carrinho não quebrarem.

Acessibilidade e desempenho

Nas páginas de produto da Welz, a troca de etapa da compra leva o foco ao título da etapa, para quem usa teclado ou leitor de tela, e as animações respeitam a preferência por menos movimento. Nas páginas da Welz, os alvos de toque seguem a medida de 44 px, as fotos saem em WebP em várias larguras e os vídeos dos depoimentos só carregam depois do toque.

Estrutura para a busca

Cada página de produto da Welz tem título, descrição e imagem de compartilhamento próprios, e o HTML já sai do servidor com o texto de todas as seções. A versão de demonstração fica fora dos buscadores, com noindex, para não duplicar o site atual da Welz.

Processo

O trabalho para a Welz começou pelo Supergreens: estudos da marca, de duas páginas de referência, da página antiga e das alegações de saúde, depois plano das seções, textos, sistema visual, construção e revisão independente por capturas. A página do Supergreens passou por quatro rodadas de ajuste e por um documento de alterações de texto da Welz. Body Peptides e Daily Hydration seguiram o molde; a home veio por último.