Projeto Dloren WFit

Visão Geral

CLIENTE

DLOREN WFIT
Setúbal - Portugal

DURAÇÃO

5 semanas

MEU PAPEL

UX/UI Designer - Web Designer

Tecnologias/Ferramentas

Figma - WordPress -CSS - API

Desafio

A DLOREN WFIT precisava de um novo e-commerce que fosse além do catálogo, com o desafio de capturar a atenção e construir autoridade de marca num mercado saturado de moda fitness.

Objetivo

Desenvolver um e-commerce utilizando o WordPress que não só criasse uma experiência de compra capaz de refletir o lifestyle da marca, mas que também garantisse a robustez técnica necessária para as vendas, incluindo a integração com API de Gateway de Pagamento para um checkout rápido e seguro, e a sincronização de stock em tempo real.

Processo de Design

Descoberta

A fase inicial concentrou-se em compreender o público-alvo (moda fitness) e a identidade da DLOREN WFIT. Foi realizada uma análise da concorrência e das tendências de UX em e-commerce de vestuário para definir a estética premium e as funcionalidades obrigatórias. O objetivo foi alinhar os requisitos técnicos (sincronização de stock) com a necessidade de uma experiência de marca envolvente.

Arquitetura da Informação

A AI foi desenhada para otimizar o fluxo de compra, priorizando a facilidade de encontrar as diferentes coleções (Terra, Shine, Candy, Beach Tennis) e categorias (Leggings, Tops, Calções). O Foco estava na simplicidade da estruturação da Página de Produto para gerir múltiplas imagens e variações de preços de forma limpa, garantindo que o utilizador tomasse a decisão de compra rapidamente.

Wireframes

A criação dos wireframes (low-fidelity) estabeleceu a estrutura esquelética das páginas essenciais, incluindo a Home Page (com destaque para os Últimos Lançamentos), o Catálogo e o Checkout. O foco residiu em validar a hierarquia visual e o posicionamento dos CTAs de Compra, assegurando que o layout suportaria o volume de conteúdo e a informação de stock sem comprometer a usabilidade e a simplicidade do checkout (incluindo a gestão das opções de Envio Gratuito).

Mockups

Utilizando o Figma, as telas finais forem criadas, garantindo que cada elemento de UI estivesse perfeitamente integrado e responsivo (essencial para a DLOREN WFIT, dada a navegação móvel). O foco nesta fase foi refinar a hierarquia visual para dar destaque aos produtos, garantir a leitura clara das variações de produto e maximizar o impacto das imagens de lifestyle da marca, preparando o design para a fase de desenvolvimento.

Processo de Desenvolvimento

Escolha da Tecnologia

O WordPress como CMS foi uma escolha estratégica para garantir que a DLOREN WFIT pudesse gerir e atualizar facilmente o catálogo de produtos e as categorias. O e-commerce foi construído para assegurar a responsividade mobile-first e a integridade visual do design em todos os dispositivos.

Desafios Técnicos

Os desafios técnicos focaram-se primariamente em garantir a alta performance do website, implementando otimizações avançadas de caching e lazy-load para lidar com o volume de imagens. Adicionalmente, foi assegurada a segurança das transações através da integração com a API do Gateway de Pagamento, e mantida a integridade visual e funcionalidade, priorizando uma abordagem Mobile-First rigorosa.

Personalização do CMS

Para ir além do padrão do WordPress e satisfazer o design da DLOREN WFIT, foi criado um Tema Filho (Child Theme). Esta abordagem permitiu aplicar estilos CSS totalmente customizados — incluindo efeitos e disposição de elementos — sem comprometer as atualizações do core do sistema. O resultado foi uma tradução fiel e eficiente do design exclusivo, garantindo simultaneamente que a estrutura responsiva fosse mantida em todos os dispositivos.

Resultado Final

O Detalhe que faz a diferença

Para maximizar a conversão, o detalhe de design mais impactante foi a otimização dos elementos de Call to Action (CTA) e a clareza visual dos produtos. Isto inclui a apresentação de cards de produto na homepage que mostram claramente a variação de preços e artigos em promoção, incentivando a ação imediata.

Lições Aprendidas

Não basta ter um design visualmente apelativo. A velocidade do site (otimização de imagens, caching) é um fator decisivo de UX e conversão. Em e-commerce de moda, o tempo de carregamento da Página de Produto impacta diretamente na taxa de abandono do carrinho.