Loja online de moda esportiva

Dez telas com paridade total entre desktop e mobile no funil de compra.

Design de loja online para uma marca de moda esportivaDesign de loja online para uma marca de moda esportiva

Uma loja de marca e experiência de compra para um rótulo de moda esportiva, estruturada em torno de fotografia atlética, coleções e um funil de compra completo no mobile. Desenhei dez telas responsivas com paridade entre desktop e mobile do início ao fim — início, produtos, produto, carrinho, pagamento e checkout mobile — além dos componentes de banner promocional e dos toggles de lista de desejos. Designer de UI único do site; identidade e build em WooCommerce são de outras pessoas.

Função
Sole website UI designer
Período
ago. de 2023 – ago. 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 Bertelli Sportwear, marca de moda fitness e vestuário esportivo. Desenvolvi 10 pranchetas de e-commerce na página principal de Design abrangendo desktop e mobile (Homepage, Produtos, Compra, Carrinho, Pagamento, Checkout - Mobile e versões mobile), com suporte de um Style Guide com 12 nós especificando banners promocionais (Banner Destaque, Product Banner), botões de lista de desejos (favoritos), componentes de botão e tipografia esportiva no Figma (arquivo lYBgdCb9uGl9jzr4DPq7RL).

Atuação como funcionário na agência Sagitta de 16 de agosto de 2023 a 24 de agosto 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 da Bertelli Sportwear, Juan desenhou a loja virtual completa e o funil de checkout no Figma, e um desenvolvedor no-code implementou e publicou a loja no WordPress com WooCommerce e Elementor. Escopo alinhado por Ramon.

UX para e-commerce D2C de moda fitness: dinamismo e conversão

10
pranchetas de compras na página principal de Design
12
tokens e componentes promocionais no Style Guide
244 KB
de build histórico em WooCommerce/Elementor no Wayback
8 dias
do início do layout à entrega para implementação

A moda fitness é um setor fortemente visual e motivacional. O consumidor de roupas esportivas busca caimento, conforto térmico e identificação com um estilo de vida ativo. Converter visitantes em compradores exige fotografias editoriais de alto impacto, navegação intuitiva por tamanhos e cores, e um fluxo de finalização de compra sem atritos em celulares.

Jornada de compra completa em 10 pranchetas responsivas

Na prancheta principal de Design (nó 1:15), estruturei todas as etapas do funil de e-commerce:

  • Página Inicial da Marca (Homepage e Homepage - Mobile) — Banners full-bleed de impacto visual (Banner Destaque), vitrines de lançamentos sazonais, carrosséis de produtos e selos de segurança e garantia.
  • Catálogo e Coleções (Produtos e Produtos - Mobile) — Grade de produtos com filtros por categoria (leggings, tops, agasalhos), ícone interativo de favoritos (coração) e visualização rápida.
  • Página de Produto (Compra e Compra - Mobile) — Layout destacando texturas do tecido em alta resolução, seletores de tamanho, paleta de cores e botão 'Comprar Agora' em evidência.
  • Sacola e Checkout (Carrinho, Pagamento e Checkout - Mobile) — Gaveta lateral de sacola com controle de quantidade, cálculo de frete e checkout mobile simplificado para reduzir abandono de carrinho.
A entrega em produção está comprovada: o snapshot de 01/09/2024 no Wayback Machine (244.251 B em Elementor / Hello Elementor) atesta o site publicado com as mesmas seções do Figma. 'Publicado' comprova que o design foi programado e foi ao ar — não que Juan desenvolveu o código de back-end ou desenhou o logotipo.

Banners promocionais e componentes interativos

A página de Style Guide com 12 nós (nó 1:16) padronizou os ativos da marca concebidos por Kelvin Bezerra: paleta de alto contraste, tipografia atlética de forte legibilidade, banners para produtos em destaque (Product Banner), estados de botões e micro-interações de lista de desejos.

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

  • Não é criação de marca ou logotipo. Kelvin Bezerra concebeu a identidade visual e o logotipo da Bertelli Sportwear.
  • Não é implementação em WordPress ou WooCommerce. A programação do site foi realizada por um desenvolvedor no-code.
  • Não é confecção ou logística têxtil. Projetei a experiência digital de compra, não a produção de roupas ou estoque.
  • Não está ativo no ar hoje. A marca encerrou atividades e o site está offline; a entrega é comprovada pelo registro histórico no Wayback Machine.
  • Não possui métricas de faturamento. Nenhum dado de receita ou taxa de conversão foi retido no registro do portfólio.

O impacto de um e-commerce de moda focado em mobile

A Bertelli Sportwear demonstra como marcas esportivas D2C conectam-se com seus clientes através de apelo visual e navegação ágil. Ao combinar fotografia editorial com cards de produto diretos e checkout mobile enxuto, o projeto entregou uma plataforma de vendas funcional e moderna.

Evidência

A loja virtual foi implementada e publicada em produção. Posteriormente, a empresa encerrou suas atividades comerciais e o domínio bertellisportwear.com.br encontra-se inativo (curl 000 verificado). A entrega histórica é comprovada via snapshot do Wayback Machine (01/09/2024, 244 KB em Elementor 3.23.4 / Hello Elementor com 388 referências e título 'Bertelli Sportwear - Seu corpo em movimento'), coincidente com as pranchetas do Figma auditado. Não existem métricas de vendas ou pedidos. Este estudo de caso documenta o design de e-commerce D2C de moda fitness e checkout mobile.