Loja D2C de beleza e cosméticos

Onze telas para tirar um vendedor de marketplace e levá-lo à marca própria.

Design de loja direta ao consumidor de beleza e cosméticosDesign de loja direta ao consumidor de beleza e cosméticos

Uma loja direta ao consumidor feita para tirar um vendedor de cosméticos de alto volume do marketplace e levá-lo à marca própria, com benchmark contra uma das maiores varejistas de cosméticos do Brasil. Desenhei onze telas responsivas entre desktop e mobile — início, produtos, produto, carrinho, pagamento e checkout mobile — com a camada utilitária de e-commerce: navbar, busca, banner superior, sacola, lista de desejos e um ponto de entrada de ajuda e chat. Designer de UI único do site; identidade e build em WooCommerce são de outras pessoas.

Função
Sole website UI designer
Período
set. de 2023 – set. de 2023
Stack
Figma
Evidência
  • Arquivo de design

Abrir o arquivo de designSnapshot arquivado do site publicado

Designer único de UI do site para a Click da Beleza, loja virtual de cosméticos, perfumaria e cuidados pessoais em transição de operações de marketplace (marco de mais de 2.500 vendas mensais) para uma marca própria Direct-to-Consumer (D2C). Desenvolvi 11 pranchetas responsivas na página principal de Design abrangendo desktop e mobile (Página Inicial, Produtos, Compra, Carrinho, Pagamento, Checkout - Mobile e versões mobile), com suporte de um Style Guide com 27 nós estruturando componentes utilitários de e-commerce (NavBar, SearchBox, TopBanner, Sacola, Favoritos, Ajuda) no Figma (arquivo tQvGNS1f5VAefdMxHHKtZe).

Atuação como funcionário na agência Sagitta de 13 de setembro de 2023 a 26 de setembro de 2023. Juan atuou como designer único de UI do site na equipe da agência: Kelvin Bezerra criou a identidade visual e o logotipo, Juan desenhou a loja virtual D2C e o funil de compra no Figma, e um desenvolvedor no-code implementou e publicou o site no WordPress com WooCommerce e Elementor. Escopo conduzido por Ramon.

Transição de marketplace para canal próprio D2C: construindo autoridade de marca

11
pranchetas de e-commerce na página principal de Design
27
componentes utilitários de varejo no Style Guide
175 KB
de build histórico em Elementor comprovado no Wayback
13 dias
do início do layout à entrega para implementação

Lojistas que dependem exclusivamente de marketplaces (Mercado Livre, Shopee, Amazon) sofrem com taxas de comissão elevadas e ausência de retenção de clientes. A Click da Beleza já possuía expressivo volume de vendas — mais de 2.500 pedidos mensais nas plataformas — e buscava consolidar sua marca em uma loja própria. O desafio era desenhar um e-commerce que transmitisse a mesma segurança, clareza no frete e suporte ágil que o consumidor encontra nos grandes marketplaces.

Catálogo de beleza e funil de compra em 11 pranchetas

Na prancheta de Design (nó 1:15), estruturei a jornada de compra tomando como referência grandes e-commerces de cosméticos do mercado, como a Beleza na Web:

  • Página Inicial Comercial (Página Inicial) — Barra de avisos promocionais (TopBanner), vitrine de promoções relâmpago ('Ofertas do Dia'), navegação por categorias (cabelos, skincare, perfumes, maquiagem) e selos de confiança.
  • Navegação do Catálogo (Produtos e Produtos - Mobile) — Listagem de produtos com filtros por marca, faixa de preço, tipo de cabelo/pele e botão de favoritos em formato de coração.
  • Página de Produto (Compra e Compra - Mobile) — Detalhamento da volumetria, modo de uso, avaliações de clientes e simulação de prazo de entrega por CEP.
  • Sacola e Checkout (Carrinho, Pagamento e Checkout - Mobile) — Gaveta lateral de sacola, opções de pagamento claras (Pix e cartão parcelado) e finalização de compra em poucas etapas.
  • Barra de Navegação Utilitária — Cabeçalho com caixa de busca inteligente (SearchBox), acesso à conta, contador de favoritos e canal de suporte (Ajuda).
O volume de mais de 2.500 vendas mensais era a métrica prévia do cliente em marketplaces registrada no moodboard: nunca apresente esse número como resultado deste design. E nunca chame os prints da Beleza na Web de pesquisa de usuário: eram apenas referências visuais mantidas no moodboard.

Tokens do Style Guide e micro-interações de varejo

A página de Style Guide com 27 nós (nó 1:16) padronizou os ativos da marca concebidos por Kelvin Bezerra: tons suaves de rosa e dourado, estados da barra de busca, tipografia promocional, marcadores de quantidade na sacola e atalhos de atendimento.

O que este projeto é e o que não é

  • Não é criação de marca ou logotipo. Kelvin Bezerra criou o logotipo e a identidade da Click da Beleza.
  • Não é programação em WordPress ou WooCommerce. A implementação foi feita por um desenvolvedor no-code.
  • Não é o site atual no ar. O domínio clickdabeleza.com.br foi reconstruído do zero por outra empresa; a entrega original é comprovada pelo snapshot histórico de 2024.
  • Não é responsável pelo volume de 2.500 vendas mensais. Esse era o marco prévio do cliente em marketplaces antes da contratação da agência.
  • Não possui métricas de faturamento D2C. Nenhum dado de receita ou pedidos diretos foi retido no registro do portfólio.

O valor da consolidação de marcas no comércio digital

A Click da Beleza evidencia como o design de interface estrutura a transição de vendedores de marketplace para lojas próprias. Ao priorizar credibilidade institucional, busca destacada e checkout ágil, o projeto estabeleceu um canal D2C sólido para a expansão da marca.

Evidência

A loja virtual foi implementada e publicada em produção. O site que atende ao domínio clickdabeleza.com.br hoje foi posteriormente redesenhado e construído do zero por outra empresa, restando apenas elementos dispersos do trabalho original. A publicação histórica é confirmada via snapshot do Wayback Machine (29/09/2024, 175 KB em Hello Elementor com 311 referências e a seção 'Ofertas do Dia'), cuja ordem das páginas corresponde ao Figma auditado. Não existem métricas de conversão. Este estudo de caso documenta a transição de marketplace para D2C, busca de produtos e mecânica promocional.