UrbanMood

Rôle

Intégratrice Web

Cours

1ère partiel en 1ère année de Bachelor Cycle Web et Multimédia

Outils

WordPress, CSS

Contexte et Recherche

UrbanMood est une boutique en ligne fictive de vêtements streetwear, conçue dans le cadre des premiers partiels de 1ère année en Bachelor Web & Multimédia à MyDigitalSchool Vannes. Le projet consistait à créer un site e‑commerce complet, sous WordPress en seulement quatre jours, avec une répartition des rôles entre développeur, designer et marketeur.

L’équipe a défini l’univers de la marque UrbanMood : une identité streetwear moderne, minimaliste et monochrome. Le designer a produit une charte graphique en noir et blanc, un logo et des mockups produits. Cette base visuelle a guidé la construction du site, pensée pour être simple, efficace et cohérente avec l’esprit de la marque.

Difficultés

Développer un site e‑commerce complet, dans un délai très court, tout en respectant les contraintes du client fictif. Trouver une organisation efficace entre les différents rôles de chacun, pour assurer une cohérence entre design, marketing et développement.

Compétences transversales

Gestion de projet en équipe, coordination et communication, pour avancer rapidement et efficacement. Analyse des besoins e‑commerce et adaptation des outils WordPress, afin de créer une boutique fonctionnelle et structurée.

Identité visuelle

TYPOGRAPHIE

Helvetica

Sobre et moderne

La typographie utilisée est Helvetica, choisie pour son style sobre et moderne, parfaitement adapté à une identité streetwear minimaliste.

PALETTE DE COULEURS

La palette de couleurs repose sur un duo noir et blanc, offrant un esthétisme épuré, contrasté et adapté à l’univers urbain de la marque.

Développement

Le site a été construit sous WordPress, avec le thème Kadence, offrant une grande liberté de personnalisation. L’extension WooCommerce a servi de base pour la boutique, complétée par d’autres extensions, dans le but de gérer les variations, les pages produits, le paiement, la sécurité, les formulaires et les animations. La structure du site comprend un header informatif, une boutique filtrable, des fiches produits complètes, des pages de commande, un formulaire de contact, une newsletter et les pages légales obligatoires.

.shopengine_swatches span {
 background-color: black !important;
}
.shopengine_swatches span:hover {
  background-color: #f1f1f1 !important;
  color: black !important;
}

.shopengine-add-to-cart span {
  background-color: var(–swatch-color) !important;
}

Intégration WooCommerce maîtrisée

Mise en place d’une boutique complète avec variations, filtres, pages produits et gestion du panier.

Personnalisation avancée via ShopEngine et Elementor

Création de pages dynamiques, carrousels, variations visuelles et animations, pour enrichir l’expérience utilisateur.

Fonctionnalités et interactions

Mise en cache, gestion des cookies, reCAPTCHA, formulaires sécurisés et modules de paiement test, pour simuler une commande.

Conclusion et résultat final

UrbanMood a permis de concevoir une boutique e‑commerce complète, structurée et cohérente, tout en maîtrisant le module WooCommerce, les extensions essentielles et la personnalisation avancée sous WordPress. Ce projet a été une expérience formatrice, combinant développement rapide, travail d’équipe et mise en pratique des fondamentaux du e‑commerce.