Varejo de material de construção — site de e-commerce

Onze telas da descoberta de produto até o checkout.

Um site de e-commerce para um fornecedor local de material de construção, construído em torno de descoberta de produtos, avaliações de clientes, banners promocionais, criação de conta e um fluxo de carrinho até checkout. Desenhei onze telas responsivas entre desktop e mobile — início, produtos, todos os produtos, carrinho, checkout, criar conta, login, sobre e um overlay de menu mobile — com a camada de componentes de varejo: busca, selo de carrinho e padrões de avaliação. Designer de UI único do site; identidade e build em WooCommerce são de outras pessoas.

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

Abrir o arquivo de design Snapshot arquivado do site publicado

Designer único de UI do site para a JK Construfaz (posteriormente renomeada para Casa Construfaz), loja varejista regional de materiais de construção, ferramentas e acabamentos ('Produtos de A a Z'). Desenvolvi 11 pranchetas responsivas de e-commerce na página principal de Design cobrindo busca de produtos, departamentos, avaliações, carrinho de compras, cadastro e checkout (Início, Produtos, Todos os Produtos, Carrinho, Checkout, Criar Conta, Login, Sobre nós, Mobile, MenuOverlay), com suporte de um Style Guide com 31 nós no Figma (arquivo 8rWAKIOTfPylYY6aRi4WaZ).

Atuação como funcionário na agência Sagitta em julho 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 completa e o funil de compra no Figma, e um desenvolvedor no-code implementou e publicou a loja virtual. CORREÇÃO DE PLATAFORMA: A loja virtual publicada na época rodava na plataforma TRAY (e-commerce hospedado brasileiro), e NÃO em WordPress/WooCommerce.

UX para e-commerce de varejo: materiais de construção de A a Z

11: pranchetas de e-commerce na página principal de Design
31: tokens e componentes de varejo no Style Guide
Tray: plataforma de e-commerce do build publicado na época
100%: do funil de compra desenhado (Busca → Carrinho → Checkout)

Lojas de materiais de construção atendem a inventários extensos e heterogêneos — de cimento e tubos de PVC a ferramentas elétricas de precisão e itens de iluminação. Desenvolver uma boa experiência de e-commerce para esse segmento exige rápida localização de produtos: um mestre de obras ou instalador que precisa de uma conexão hidráulica específica não tolera categorias confusas ou barras de busca ineficientes.

Funil de compra completo em 11 pranchetas responsivas

Na prancheta principal de Design (nó 1:15), estruturei toda a jornada de compra do consumidor:

Página Inicial da Loja (Início) — Banner promocional superior (TopBanner), vitrines por departamento, pilares de confiança (entrega rápida na região, parcelamento sem juros) e produtos mais vendidos.
Navegação e Filtros (Produtos e Todos os Produtos) — Listagem de departamentos com filtros laterais (marca, faixa de preço, disponibilidade) e notas de avaliação por estrelas (Avaliações).
Busca e Menu Mobile (MenuOverlay e Search Box) — Caixa de pesquisa em posição de destaque e gaveta de menu mobile em tela cheia para navegação confortável com uma mão.
Carrinho e Checkout (Carrinho e Checkout) — Resumo de pedido com controle de quantidade, cálculo de frete por CEP e finalização de compra simplificada.
Área do Cliente (Criar Conta e Login) — Telas diretas para criação de conta e acompanhamento de pedidos anteriores.

Nunca diga que este projeto foi feito em WordPress. A loja arquivada da época (14/07/2024) rodava em Tray sem nenhuma menção ao Elementor. O histórico de 'desenvolvedor no-code em WordPress' é verdadeiro para outros projetos deste período, mas incorreto para este registro. A precisão técnica sobre a plataforma é fundamental.

Tokens de Style Guide para comércio eletrônico

A página de Style Guide com 31 nós (nó 1:16) padronizou elementos essenciais para o varejo: banners de oferta, badges de quantidade no carrinho, componentes de avaliação por estrelas, ícones de bandeiras de pagamento e hierarquia tipográfica focada na legibilidade de preços em telas de smartphone.

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

Não é um build em WordPress ou WooCommerce. A loja histórica foi implementada na Tray, plataforma brasileira de e-commerce.
Não é criação de marca ou logotipo. Kelvin Bezerra desenhou o logotipo e a identidade visual da JK Construfaz.
Não é o site atual no ar. O cliente mudou de nome para Casa Construfaz e reconstruiu o site com outra empresa; a entrega original é atestada pelo snapshot de 2024.
Não é gestão de estoque ou logística. Projetei a interface de usuário, não a integração de ERP ou a expedição de mercadorias.
Não possui dados de faturamento. Nenhuma métrica de vendas ou volume transacionado foi retida no registro do portfólio.

O valor de um e-commerce estruturado para o varejo

A JK Construfaz demonstra como um design de interface funcional organiza catálogos complexos de materiais de construção no ambiente digital. Ao priorizar busca ágil, vitrines segmentadas e checkout descomplicado, o projeto entregou uma estrutura de vendas sólida para o comércio regional.

Evidência

A loja virtual foi implementada e publicada em produção. Posteriormente, a empresa passou por um rebranding de JK Construfaz para Casa Construfaz e reconstruiu sua loja com terceiros. A publicação histórica é confirmada via snapshot do Wayback Machine (14/07/2024, 351 KB rodando na Tray com zero marcadores de Elementor), comprovando a estrutura de varejo. Não existem métricas de vendas ou pedidos. Este estudo de caso documenta a UX para e-commerce de varejo, navegação por catálogo e fluxo de checkout.