UrbanMood

J’ai conçu une boutique en ligne, nommé UrbanMood. Le projet avait pour but de construire, un site e-commerce sur WordPress, avec Woo-commerce, dans le cadre de mes premiers partiels de ma 1ère année de Bachelor « Cycle Web et Multimédia », à MyDigitalSchool de Vannes. Ce projet a été limité à 4 jours, nous avions des consignes précises de mise en situation client et des équipes de trois imposées dans laquelle nous devions nous répartir les rôles entre développeur, designer et marketeur. Ma tâche était donc de développer un site e-commerce rapidement mais ayant toutes les fonctionnalités.

Compétences

Développement d’un site e-commerce

Recherche d’une bonne expérience utilisateur

Logiciels

Utilisation du CMS WordPress

Utilisation du langage CSS

Développement du projet

Mise en commun des idées avec mon équipe, afin de définir les bases de la marque fictive "UrbanMood", une marque de vêtements streetwear, ce que les consignes nous évoquaient.
Le designer de notre groupe, Julien Leroy, a ensuite réalisé une charte graphique, comprenant le logo et la palette de couleurs en noir et blanc, puis des mockups destinés à représenter les vêtements.
Tout d’abord, j’ai installé sur mon nom de domaine, le CMS WordPress, afin d’accéder au tableau de bord et de créer le site web e-commerce. Sur ce site WordPress, j’ai utilisé le thème Kadence qui offre une grande liberté de personnalisation.
Pour réaliser ce site, j’ai opté pour plusieurs extensions :

- WooCommerce qui permet de créer la base d’un site e-commerce sous WordPress.

- ShopEngine vient compléter les fonctionnalités de WooCommerce, pour une meilleure personnalisation et une gestion efficace des variations.

- Variation Swatches for WooCommerce complète à son tour, ShopEngine pour les variations de couleurs et de tailles, limitées dans sa version gratuite.

- Elementor m’a permis de créer les pages utilisées par ShopEngine, comme les pages produits ou commande.
- WooCommerce Stripe Gateway permet de gérer le module de paiement et d’utiliser une carte test pour simuler une commande dans son intégralité.

- LiteSpeed Cache contribue aussi à l’optimisation du site, grâce à la mise en cache pour accélérer le chargement des pages.

- Kadence Blocks facilite la création des pages avec des blocs prédéfinis, qui s’ajoutent directement à Gutenberg, le constructeur de page par défaut de WordPress.
- Spectra permet également l’ajout d’animations et rend le site dynamique.

- WPForms Lite est un constructeur de formulaires, utilisé pour le formulaire de contact.

- Advanced Google reCAPTCHA vérifie que l’utilisateur n’est pas un robot, afin de limiter les spams ou les tentatives de cyberattaque par force brute et donc de sécuriser une partie du site.

- Complianz permet de gérer le consentement des cookies sur le site.
Le site est découpé en différentes zones spécifiques. Dans le Header, un message précisant que le site est fictif est mise en évidence, afin d'avertir le visiteur qu'il ne pourra pas passer de commande réellement. En dessous, à gauche, se trouve l’image de marque avec le logo réduit et le nom de la marque. À droite, nous trouvons le menu principal avec les pages du site, le panier ainsi qu'un champ de recherche, permettant de rechercher un article par son nom.
Dans le Footer, nous retrouvons d’abord les réseaux sociaux où la marque a le plus de pertinence à être présente, puis le menu secondaire des pages légales, un rappel de l’image de marque avec le grand logo et enfin le copyright.
Par la suite, j’ai construit les différentes pages du site :

- La page "Accueil" est formée en trois parties. La première est la zone nommée Hero qui attire le client, vers la boutique, grâce à un titre accrocheur, un bouton CTA, menant à la boutique et un design attractif. La seconde partie présente les trois dernières nouveautés sorties, depuis maximum trois mois. La dernière montre les deux catégories "Vêtement" et "Accessoire" et permet de filtrer directement les produits sur la page Boutique.
- Puis, la page "Boutique" est composée d’un filtre permettant de choisir la catégorie et/ou une fourchette de prix. Ensuite, nous trouvons les différents produits avec leur nom, leur prix et une image. Sur la version ordinateur, lorsque la souris passe sur l’image, une animation affiche la seconde variation.

- Ensuite, la page de fiche produit est constituée d’images avec un carrousel, du nom du produit, du prix, d’une courte description, des variations qui modifient l’image selon la couleur, de l’ajout au panier, d’une longue description et d’informations complémentaires.
- Lors de la commande, il est possible d’aller sur la page Panier, pour voir les articles ajoutés puis sur la page Commander pour finaliser l’achat, en rappelant que le site est fictif.

- Quant à elles, les pages "Newsletter" et "Contact" contiennent un formulaire de contact, spécifique selon les besoins.

- Enfin, les pages "Conditions générales d’utilisation"," Conditions générales de vente", "Mentions légales" et "Politique de cookies" sont les pages légales obligatoires d’un site web e-commerce.
Ce projet m’a permis d'apprendre à concevoir un site e-commerce structuré et attractif, en utilisant l'extension WooCommerce et à gérer un projet en équipe dans un court laps de temps.

Recherche

Mise en commun des idées avec mon équipe, afin de définir les bases de la marque fictive « UrbanMood », une marque de vêtements streetwear, ce que les consignes nous évoquaient.

Identité visuelle

Le designer de notre groupe, Julien Leroy, a ensuite réalisé une charte graphique, comprenant le logo et la palette de couleurs en noir et blanc, puis des mockups destinés à représenter les vêtements.

Développement

Thème du site

Tout d’abord, j’ai installé sur mon nom de domaine, le CMS WordPress, afin d’accéder au tableau de bord et de créer le site web e-commerce. Sur ce site WordPress, j’ai utilisé le thème Kadence qui offre une grande liberté de personnalisation.

Extensions

Pour réaliser ce site, j’ai opté pour plusieurs extensions :

WooCommerce qui permet de créer la base d’un site e-commerce sous WordPress.

ShopEngine vient compléter les fonctionnalités de WooCommerce, pour une meilleure personnalisation et une gestion efficace des variations.

Variation Swatches for WooCommerce complète à son tour, ShopEngine pour les variations de couleurs et de tailles, limitées dans sa version gratuite.

Elementor m’a permis de créer les pages utilisées par ShopEngine, comme les pages produits ou commande.

Product Filter by WBW m’a permis de filtrer les produits, sur la page Boutique.

WooCommerce Stripe Gateway permet de gérer le module de paiement et d’utiliser une carte test pour simuler une commande dans son intégralité.

LiteSpeed Cache contribue aussi à l’optimisation du site, grâce à la mise en cache pour accélérer le chargement des pages.

Kadence Blocks facilite la création des pages avec des blocs prédéfinis, qui s’ajoutent directement à Gutenberg, le constructeur de page par défaut de WordPress.

Spectra permet également l’ajout d’animations et rend le site dynamique.

WPForms Lite est un constructeur de formulaires, utilisé pour le formulaire de contact.

Advanced Google reCAPTCHA vérifie que l’utilisateur n’est pas un robot, afin de limiter les spams ou les tentatives de cyberattaque par force brute et donc de sécuriser une partie du site.

Complianz permet de gérer le consentement des cookies sur le site.

Zoning

Le site est découpé en différentes zones spécifiques. Dans le Header, un message précisant que le site est fictif est mise en évidence, afin d’avertir le visiteur qu’il ne pourra pas passer de commande réellement. En dessous, à gauche, se trouve l’image de marque avec le logo réduit et le nom de la marque. À droite, nous trouvons le menu principal avec les pages du site, le panier ainsi qu’un champ de recherche, permettant de rechercher un article par son nom.
Dans le Footer, nous retrouvons d’abord les réseaux sociaux où la marque a le plus de pertinence à être présente, puis le menu secondaire des pages légales, un rappel de l’image de marque avec le grand logo et enfin le copyright.

Pages

Par la suite, j’ai construit les différentes pages du site :

La page « Accueil » est formée en trois parties. La première est la zone nommée Hero qui attire le client, vers la boutique, grâce à un titre accrocheur, un bouton CTA, menant à la boutique et un design attractif. La seconde partie présente les trois dernières nouveautés sorties, depuis maximum trois mois. La dernière montre les deux catégories « Vêtement » et « Accessoire » et permet de filtrer directement les produits sur la page Boutique.

Puis, la page « Boutique » est composée d’un filtre permettant de choisir la catégorie et/ou une fourchette de prix. Ensuite, nous trouvons les différents produits avec leur nom, leur prix et une image. Sur la version ordinateur, lorsque la souris passe sur l’image, une animation affiche la seconde variation.

Ensuite, la page de fiche produit est constituée d’images avec un carrousel, du nom du produit, du prix, d’une courte description, des variations qui modifient l’image selon la couleur, de l’ajout au panier, d’une longue description et d’informations complémentaires.

Lors de la commande, il est possible d’aller sur la page Panier, pour voir les articles ajoutés puis sur la page Commander pour finaliser l’achat, en rappelant que le site est fictif.

Quant à elles, les pages « Newsletter » et « Contact » contiennent un formulaire de contact, spécifique selon les besoins.

Enfin, les pages « Conditions générales d’utilisation », » Conditions générales de vente », « Mentions légales » et « Politique de cookies » sont les pages légales obligatoires d’un site web e-commerce.

Conclusion

Ce projet m’a permis d’apprendre à concevoir un site e-commerce structuré et attractif, en utilisant l’extension WooCommerce et à gérer un projet en équipe dans un court laps de temps.

Quelques visuels

Liens

Vous pouvez visualiser le site avec le bouton ci-dessous :

Site UrbanMood