Portfólio · E-commerce
Farmave: um novo jeito de encontrar o cuidado certo
Redesign de e-commerce para uma farmácia de manipulação. Da organização do catálogo à experiência no celular, uma loja que conecta produtos, informação e atendimento.
Cliente
Farmave Farmácia de Manipulação
Segmento
Saúde, beleza e cuidados veterinários
Projeto
Redesign de loja virtual
Plataforma
WordPress, Elementor e WooCommerce
O ponto de partida
Uma farmácia, diferentes jornadas de compra.
A Farmave, de Cosmópolis, no interior de São Paulo, reúne suplementos, produtos de beleza, cuidados pessoais e manipulação veterinária. O site precisava apresentar esse universo sem tratar todas as necessidades como se fossem a mesma compra.
O desafio do redesign foi dar uma direção mais clara a quem chega. Algumas pessoas procuram um produto específico. Outras querem explorar uma categoria. Há também quem precise enviar uma receita para solicitar um orçamento. A experiência foi organizada para acolher esses caminhos em uma identidade visual consistente.
O trabalho apresentado neste case é a reformulação do e-commerce. As comparações mostram como cabeçalho, vitrines, filtros e versão mobile evoluíram em relação às telas anteriores.
Direção do projeto
Design que ajuda a entender para onde ir.
O redesenho não se resume a trocar cores e banners. Cada área da interface tem uma função no caminho entre descobrir um produto e escolher o próximo passo.
01
Encontrar antes de comprar
Um catálogo diverso precisa permitir mais de uma forma de descoberta. O novo cabeçalho aproxima busca, categorias, conta e carrinho. A home apresenta coleções e produtos, enquanto a loja oferece filtros para quem já sabe o que procura.
02
Separar compra e orçamento
Produtos de catálogo e fórmulas sob prescrição pedem caminhos diferentes. A vitrine conduz à página do produto; a navegação também oferece um acesso específico para enviar a receita e conversar com a farmácia.
03
Adaptar a experiência ao celular
A mesma hierarquia precisa funcionar em uma tela menor. Menu, busca, ícones e banners ganham uma composição própria no mobile, com o acesso ao catálogo preservado e uma leitura mais direta da proposta da marca.
01 · Página inicial
A primeira impressão passou a organizar a jornada.
A abertura anterior concentrava a apresentação institucional da farmácia. A nova home combina a identidade da marca com entradas para o catálogo, campanhas e envio de receita.
Antes
Depois
No novo cabeçalho, a busca acompanha atalhos para conta, pedidos e carrinho. Logo abaixo, o menu apresenta famílias de produtos e serviços. A primeira dobra também diferencia entrega local, retirada na farmácia e envio para outras regiões, com orientações próprias para cada modalidade.
O que observar na home: compare três intenções. Quem sabe o nome do produto encontra a busca; quem ainda explora opções encontra categorias; quem precisa de orçamento tem acesso ao envio de receita. A avaliação do layout deve percorrer essas entradas separadamente. Uma abertura com muitos atalhos só ajuda quando os rótulos permitem reconhecer o destino. O aprendizado para outro e-commerce é mapear esses assuntos antes de decidir o tamanho do banner ou a quantidade de vitrines.
Os banners ganharam uma composição mais limpa, com uma mensagem principal e um caminho de ação. Ao avançar pela home, o visitante encontra categorias, seleções de produtos e áreas dedicadas à Farmave Vet e aos cuidados com a pele. A intenção é permitir tanto a descoberta quanto o acesso direto ao que a pessoa já conhece.
02 · Catálogo
Mais maneiras de encontrar um produto.
A nova loja combina vitrines mais leves com filtros que ajudam a reduzir a lista de opções. A navegação deixa de depender apenas da leitura de uma árvore de categorias.
Antes
Depois
No layout anterior, a lateral exibia uma lista extensa de categorias e subcategorias. No novo catálogo, os filtros são separados em grupos, incluindo categoria, apresentação e faixa de preço. Isso permite procurar, por exemplo, um formato de produto sem precisar percorrer toda a vitrine.
Como ler a tela do catálogo: escolha um produto da amostra e confira quais informações ajudam a diferenciá-lo. Depois observe se os filtros correspondem a características cadastradas e se o card mantém uma ordem previsível entre imagem, nome, apresentação e preço. A interface depende dessa consistência no cadastro. Ao planejar sua loja, defina quem mantém os atributos e como os novos itens seguirão a mesma organização. O filtro desenhado sem dados bem preparados não resolve a comparação.
Os cards mantêm imagem, nome, apresentação e preço em uma sequência previsível. O objetivo visual é facilitar a comparação entre opções e reduzir a disputa por atenção dentro de cada item. Um caminho de ajuda por WhatsApp acompanha a navegação para quem precisa de orientação antes de seguir.
03 · Experiência mobile
A loja também precisava caber na rotina.
No celular, não basta reduzir a versão desktop. A nova composição reorganiza os acessos do cabeçalho e adapta a apresentação da campanha para uma tela vertical.
Antes
Depois
A busca passa a ocupar uma linha própria, logo abaixo da marca e dos atalhos de conta e carrinho. O banner mobile tem uma mensagem curta e um botão visível. As informações de entrega e retirada aparecem em blocos que se reorganizam para a largura disponível.
O que conferir no celular: encontre a busca, reconheça a categoria e localize o caminho de compra ou atendimento. A leitura dessas tarefas permite avaliar o cabeçalho e a primeira tela sem concluir uma compra ou enviar informações. A comparação mostra como os elementos se reorganizam; não é uma medição de conversão. Para levar esses critérios à escolha da ferramenta e do fornecedor, veja o comparativo entre WooCommerce e Shopify.
As telas acima permitem comparar a hierarquia: o que aparece primeiro, o espaço destinado à navegação e a relação entre texto e imagem. Produtos e campanhas podem mudar com a operação da loja; o que o projeto estabelece é a estrutura para apresentar esse conteúdo de forma consistente.
Estrutura de e-commerce
Catálogo e atendimento, cada um com seu caminho.
A loja reúne a navegação de produtos e os pontos de contato da farmácia em uma mesma experiência, preservando as particularidades de cada necessidade.
Compra de catálogo
O visitante pode explorar vitrines, usar a busca e abrir as páginas dos produtos. Conta, acompanhamento de pedidos e carrinho ficam acessíveis no cabeçalho e no rodapé, sem depender de voltar à página inicial.
Receita e manipulação
O acesso “Enviar receita” conduz ao atendimento da farmácia. Esse caminho evita apresentar uma fórmula sob prescrição como se fosse apenas mais um item da prateleira e dá visibilidade ao contato necessário para o orçamento.
Informação e suporte
A área institucional reúne unidade, atendimento, perguntas frequentes e políticas da loja. São pontos de consulta para quem quer conhecer a empresa ou esclarecer uma dúvida sobre entrega, troca e uso do site.
O que mudou
Uma experiência mais organizada para a próxima etapa.
O resultado do projeto pode ser observado nas telas: uma nova hierarquia visual, mais entradas para o catálogo e uma apresentação pensada para desktop e celular.
Identidade e clareza
A identidade verde da Farmave foi preservada em uma composição com mais respiro, tipografia de destaque nas campanhas e superfícies suaves para organizar as informações. O catálogo continua sendo o centro da loja, com imagens que ajudam a reconhecer os produtos.
A estrutura em WordPress e WooCommerce permite manter produtos, categorias e conteúdo dentro da operação do e-commerce. No front-end, essa organização se traduz em páginas com funções distintas: apresentar, explorar, detalhar e orientar o contato.
O que vale acompanhar
A evolução comercial deve ser acompanhada depois da publicação: uso da busca, chegada às páginas de produto, avanço pelo carrinho e solicitações de orçamento. Esses dados ajudam a identificar onde o visitante encontra dificuldade e quais ajustes merecem prioridade.
A base publicada permite continuar evoluindo o catálogo e a comunicação das campanhas. O acompanhamento da navegação ajuda a priorizar melhorias conforme o comportamento dos visitantes e as necessidades de atendimento da farmácia.
Uma loja precisa ajudar a pessoa a escolher o próximo passo. Na Farmave, isso significa dar espaço para explorar produtos sem esconder o atendimento de quem precisa de uma fórmula sob medida.
Gui Pinheiro · Direção do projeto na Axis
Seu e-commerce precisa de um próximo passo?
A gente analisa catálogo, navegação e jornada de compra para definir o que faz sentido para a sua operação. Conheça nosso trabalho com lojas virtuais ou converse sobre o seu projeto.