Nos últimos quatro meses, reconstruímos grande parte da loja da Culture Shock Club. O trabalho somou mais de 500.000 linhas alteradas entre adições, remoções e refatorizações. O resultado é um site mais rápido, um percurso de compra mais claro e contas de cliente mais úteis.
Factos essenciais
- Quatro meses de rebuild da storefront: mais de 500,000 linhas alteradas entre adições, remoções e refactors.
- Cada parte entrou no ar assim que esteve pronta e depois continuámos a afinar, não um único relançamento.
- As páginas-chave marcam 95 or higher nos testes Lighthouse em mobile e desktop.
- Focos: primeiro ecrã mais rápido, home mais clara, quick add e pesquisa, páginas de produto, histórico de encomendas pesquisável.
Não guardámos tudo para um único grande relançamento. Lançámos cada parte assim que ficou pronta e continuámos a afiná-la depois.
Um primeiro ecrã mais rápido
A antiga página inicial carregava um carrossel de produtos antes de mostrar a primeira vista completa. Isso obrigava a carregar logo imagens, variantes, preços, disponibilidade e o código do carrossel.
A nova página inicial carrega primeiro a imagem de abertura. As secções de produtos, as recomendações, a análise e as ferramentas de consentimento carregam mais tarde ou só quando são precisas.
Também reduzimos o trabalho inicial com tipos de letra, CSS e scripts. Os recursos ficam melhor em cache e as ações no carrinho já não voltam a carregar dados da página que nada têm a ver.
As páginas principais têm agora 95 ou mais nos nossos testes Lighthouse, em telemóvel e computador. Também ficam utilizáveis mais cedo, mantêm-se mais estáveis durante a navegação e exigem menos processamento nos telemóveis.
Uma página inicial com estrutura mais clara
A antiga página inicial dependia muito de um único feed de produtos. No novo layout, cada secção tem uma função própria.
As novidades podem usar uma galeria compacta e as coleções maiores, grelhas mais densas. Os produtos mostrados no topo não voltam a aparecer nas secções seguintes, por isso há menos repetição ao fazer scroll.
A página inicial pode agora apresentar um lançamento, destacar produtos mais antigos e levar os visitantes a diferentes partes do catálogo sem repetir os mesmos artigos.
Adição rápida e pesquisa sem mudar de página
Escolher uma opção de produto não devia obrigar a sair da página.
A adição rápida abre agora como painel inferior no telemóvel e como painel mais largo no computador. As duas versões têm espaço para imagens, variantes e informação de tamanhos.
A pesquisa preditiva mostra resultados enquanto escreve e guarda as pesquisas recentes. Os cartões de resultados detalhados só carregam quando são precisos, o que reduz o trabalho antes de começar a pesquisar.
Assim pode comparar produtos, escolher uma opção e juntá-la ao carrinho sem perder o fio.
Páginas de produto focadas na decisão de compra
Reorganizámos as páginas de produto em torno da informação necessária para comprar. Os conteúdos do produto, a variante escolhida, o preço e os botões de compra aparecem primeiro. Tamanhos, envio, cuidados e devoluções continuam à mão.
A galeria suporta agora imagens, vídeo, vídeo externo e conteúdos 3D. Ao mudar de cor, a galeria pode passar diretamente para a imagem correspondente.
Os produtos relacionados aparecem numa secção à parte, «More to Explore». Continuam acessíveis sem competir com a informação principal do produto.
Um carrinho que responde de imediato
Antes, o carrinho ficava lento ou inconsistente enquanto processava alterações. Reconstruímos a forma como se atualiza para dar resposta imediata.
Alterações de quantidade, remoções, códigos de desconto e atualizações de preço aparecem enquanto o servidor confirma o resultado final. Depois, o carrinho acerta as quantidades e os totais mostrados com a resposta confirmada.
O progresso das promoções também está mais claro. O carrinho mostra quanto falta para ter envio gratuito ou uma oferta de vários artigos e confirma quando lá chega.
O carrinho completo e o carrinho lateral partilham agora grande parte do mesmo comportamento. Assim, os dois caminhos para o checkout ficam mais coerentes.
Contas de cliente mais úteis
A loja continua útil depois do checkout.
As contas de cliente incluem um histórico de encomendas pesquisável, com miniaturas dos produtos, totais, datas e estado de envio. Cada página de encomenda pode mostrar detalhes de envio, reembolso e devolução.
Nas encomendas elegíveis, pode escolher produtos, quantidades e motivos de devolução antes de enviar o pedido a partir da sua conta.
Também reconstruímos o seletor de país e idioma. Pode pesquisar por nome do país, código do país, moeda ou idioma, com resultados agrupados por região. Ao mudar de mercado, fica na mesma página e o idioma e os preços são atualizados.
Porque lhe chamamos Energy Edition
Cada parte desta versão aposta no ritmo. A página inicial faz menos trabalho antes de aparecer pela primeira vez. Navegar exige menos mudanças de página. O carrinho responde de imediato e as contas de cliente tratam de mais coisas depois do checkout.
Nenhuma funcionalidade define sozinha esta atualização. É o resultado acumulado de reconstruir as partes da loja que mais se usam.
O trabalho continua. Diga-nos quando algo parecer lento, pouco claro ou atrapalhar.
