L'Ecole Supérieure de Technologie de Nador

Filière : DUT - Web Marketing

Matière : Conception des site E-commerce

Rapport de Projet :
Le site web de projet GreenBox

Réalisé par : Encadré par :

EL HAJJAJI Amina [Link] Romayssae

Année universitaire : 2024-2025

 Table des matières

1- Introduction :..................................................................................................................................3
2- Objectif de site web........................................................................................................................3
3- CMS...............................................................................................................................................4
Section 3.01 Qu’est-ce qu’un CMS?...........................................................................................4
Section 3.02 Pourquoi un CMS?..................................................................................................4
Section 3.03 Choix du CMS et explication de ce choix...............................................................4
4- CONCEPTION &REALISATION DU SITE.................................................................................4
Section 4.01 Présentation de Site Web........................................................................................4
Section 4.02 Objectifs du Site Web :...........................................................................................5
Section 4.03 Fonctionnalités Principales:....................................................................................5
5- NAVIGATION...............................................................................................................................6
Section 5.01 Les fonctionnalités et leurs critères :.......................................................................6
6- Installation et configuration de WordPress.....................................................................................7
Section 6.01 Installation de WordPress via un hébergeur gratuit (InfinityFree).........................7
Section 6.02 Le thème choisi « Organic Green BlocksVersion : 3.2 »........................................8
Section 6.03 Pourquoi ce thème ?................................................................................................9
Section 6.04 Caractéristiques principales du thème :...................................................................9
Section 6.05 Actions réalisées :...................................................................................................9
7- Les extensions utilisées..................................................................................................................9
8- Réalisation du site web :...............................................................................................................10
Section 8.01 Page D’accueil......................................................................................................10
Section 8.02 Objectifs de la page d’accueil :.............................................................................11
Section 8.03 Structure de la page :.............................................................................................11
Section 8.04 Pied de page (Footer)..........................................................................................11
Section 8.05 Compatibilité mobile :..........................................................................................11
9- Contenu des autres pages..............................................................................................................15
Section 9.01 Page Produits (Boutique)......................................................................................15
Section 9.02 Page À propos.......................................................................................................16
Section 9.03 Page Contact.........................................................................................................17
10- Processus d'achat......................................................................................................................17
Section 10.01 Navigation et choix des produits...........................................................................17
Section 10.02 Accès au panier.....................................................................................................17
Section 10.03 Passage en caisse (checkout).................................................................................18

2
 Section 10.04 Validation et confirmation....................................................................................18
Section 10.05 Livraison...............................................................................................................18
11- paiement sécurisé......................................................................................................................19
Section 11.01 Paiement à la livraison (COD – Cash on Delivery)...............................................20
Section 11.02 Paiement par carte bancaire (CB / Visa / Mastercard)...........................................20
Section 11.03 Paiement via PayPal..............................................................................................20
12- Conclusion :..............................................................................................................................20

1- Introduction :

Dans un contexte où le commerce en ligne connaît une croissance rapide, la création d’une
plateforme e-commerce performante et bien structurée devient un levier essentiel pour toucher
une clientèle plus large, fidéliser les consommateurs et offrir une expérience d’achat de
qualité.

Ce rapport présente l’ensemble des actions réalisées dans le cadre du développement du site
Staferie, depuis la mise en place du catalogue produits jusqu’à l’intégration de fonctionnalités
avancées telles que les packs personnalisés, les offres promotionnelles et le programme de
fidélité.

Chaque étape a été pensée pour optimiser à la fois la valeur perçue par le client, la
performance commerciale du site, et sa visibilité sur les moteurs de recherche (SEO). Le
tout, dans une logique de professionnalisme, d'efficacité et d’expérience utilisateur fluide.

2- Objectif de site web

Le site web GREENBOX a été conçu avec des objectifs clairs et stratégiques afin de
répondre aux besoins du marché tout en offrant une expérience utilisateur moderne et
efficace. Voici les principaux objectifs :

 Présenter un catalogue de produits frais, locaux et variés (fruits, légumes, produits

naturels) de manière claire et attrayante.
 Faciliter l’achat en ligne via une interface intuitive, rapide et accessible sur mobile.
 Proposer des packs prêts à l’achat (étudiants, familles, hebdomadaires) pour
simplifier les choix des clients.
 Mettre en avant les offres spéciales et fidéliser les clients grâce à un programme de
points, des remises et une politique de parrainage.
 Augmenter la visibilité en ligne de Staferie à travers un bon référencement naturel
(SEO) et des contenus optimisés.
 Offrir un service de livraison rapide et fiable, renforcé par des incitations telles que
la livraison gratuite à partir d’un certain montant.

3
  Développer une communauté fidèle et engagée autour d’une consommation locale,
fraîche et responsable.

3- CMS
Section 3.01 Qu’est-ce qu’un CMS?
Les CMS (Content Management System ou en français SGC Systèmes de Gestion de
Contenu) sont des outils de Conception et de mise à jour de site web dynamique disposant de
fonctionnalités de publication. Ils offrent en Particulier une interface d’administration destinée
à l’administrateur du site pour créer et modifier le contenu et les fonctionnalités du site. Les
CMS sont de plus en plus nombreux qu’ils soient gratuits, Open Source sous licence
GNU/GPL ou payants et offrent de plus en plus de fonctionnalités. Voici quelques-uns des
CMS le plus connus :
• Wordpress • Dot Clear • Mambo • Joomla

Section 3.02 Pourquoi un CMS?

Les CMS apporte tout d’abord une certaine facilité dans l’administration d’un site web. Il
permet aux personnes qui ne connaissent pas les langages PHP, HTML et autres de créer,
modifier et paramétrer facilement un site. Un CMS a l’avantage de séparer forme et contenu.
Toute la partie contenu et fonctionnalités du site est stockée Dans une base de données et est
créée dynamiquement lors de l’exécution du site. Toute la partie mise en page est Gérée par
un Template. Le Template sert à gérer l’aspect graphique du site. Il s’agit de feuilles de style
et de fichiers html dans lequel des emplacements sont prédéfinis. C’est dans ces
emplacements que l’on va insérer notre contenu.

Section 3.03 Choix du CMS et explication de ce choix

Le CMS choisi pour la conception du site a été WordPress version6.7.2 WordPress a été
choisi pour plusieurs raisons : Tout d’abord il répondait aux critères, à savoir la mise en place
de toutes les fonctionnalités désirées. Ensuite, la communauté WordPress étant étendue, il est
facile de trouver de l’aide pour différents problèmes Notamment via les forums. L’interface
d’administration étant traduite en français, il facilitera donc la prise en main. De plus
beaucoup de Développeurs créent de nouvelles extensions qui sont aussi souvent améliorées
via des mises à jour.

4
4- CONCEPTION &REALISATION DU SITE
Section 4.01 Présentation de Site Web

Le site web GreenBox est une plateforme e-commerce spécialisée dans la vente en ligne de
produits alimentaires frais, notamment des fruits, légumes, œufs fermiers, huiles
naturelles et produits du terroir.

Conçu pour offrir une expérience d’achat fluide, rapide et agréable, le site permet aux
utilisateurs de :

 Parcourir un catalogue complet et bien organisé.

 Commander des packs intelligents pensés pour les besoins des étudiants, familles ou
professionnels.
 Bénéficier de promotions hebdomadaires et d’un programme de fidélité attractif.
 Profiter d’un service de livraison locale efficace et abordable.

L’interface a été pensée pour être responsive, c’est-à-dire adaptée aux écrans d’ordinateurs,
tablettes et smartphones, avec un design simple, moderne et fonctionnel.

Le projet vise à promouvoir la consommation locale, tout en simplifiant l’accès à des

produits sains, frais et de qualité, livrés directement à domicile.

Section 4.02 Objectifs du Site Web :

Le site greenbox a été développé avec des objectifs stratégiques précis, visant à offrir une
solution complète et performante dans le secteur de l’alimentaire en ligne :

 Faciliter l’accès à des produits frais pour les consommateurs urbains ou occupés.
 Optimiser l’expérience utilisateur grâce à une navigation intuitive et une interface
claire.
 Proposer des offres groupées (packs) adaptées à différents profils de clients.
 Fidéliser la clientèle via un programme de points, des remises et un système de
parrainage.
 Améliorer la visibilité en ligne à travers une stratégie SEO complète et des contenus
optimisés.
 Offrir un service de livraison efficace avec des incitations commerciales (livraison
gratuite, codes promo, etc.).

Section 4.03 Fonctionnalités Principales:

Le site GreenBox intègre plusieurs fonctionnalités clés conçues pour renforcer l’expérience
client et la performance commerciale :

5
  Catalogue dynamique de produits frais avec fiches détaillées (photos, descriptions,
prix).
 Création et mise en avant de packs personnalisés (Pack Étudiant, Pack
Équilibre…).
 Système de points de fidélité : conversion des achats en réductions.
 Module de parrainage intégré pour encourager le bouche-à-oreille.
 Offres spéciales hebdomadaires mises en avant sur la page d’accueil.
 Gestion des commandes simplifiée avec suivi, facturation, et options de paiement.
 Site responsive accessible sur mobile, tablette et desktop.
 Connexion à Google Search Console + structure SEO-friendly.

5- NAVIGATION

La navigation du site doit être très aisée. L’accent est toujours mis sur le design du site
web qui doit être simple et attractif. Le site web va être composé des pages suivantes :

 Accueil : met en avant les nouveautés, promotions et messages clés (comme la

livraison gratuite).
 Boutique / Produits : accès direct aux catégories de produits (fruits, légumes, packs).
 Contact / À propos : permet d’en savoir plus sur l’entreprise et de communiquer
facilement.

Navigation mobile optimisée :

Le site est responsive, ce qui signifie que la navigation

s’adapte parfaitement aux écrans de téléphones et tablettes.
Les boutons sont bien espacés, le texte lisible, et les pages se
chargent rapidement.

6
Section 5.01 Les fonctionnalités et leurs critères :

Pour pouvoir télécharger et installer les extensions nécessaires à la conception du site, il est
important d’analyser les fonctionnalités que le site possédera et ainsi connaitre les critères de
sélection.

• Le menu du site doit être horizontal et doit se matérialiser par des onglets.

• La rédaction des messages par les membres du site doit être simple. • Le formulaire
d’authentification doit être clair et prendre le minimum de place.

• Une fonctionnalité de recherche rapide doit être disponible sur le site.

6- Installation et configuration de WordPress

Section 6.01 Installation de WordPress via un hébergeur gratuit (InfinityFree)

L’installation du CMS WordPress a été réalisée à l’aide du service d’hébergement gratuit

InfinityFree, une plateforme accessible qui permet de lancer un site sans frais initiaux.

Étapes effectuées :

 Création d’un compte sur InfinityFree

 Ajout d’un nom de domaine gratuit via Freenom ou sous-domaine proposé (ex :
[Link])

7
  Accès au panneau de configuration (cPanel personnalisé)

 Utilisation de Softaculous Apps Installer pour déployer WordPress

automatiquement

 Choix des identifiants d’administration (nom d’utilisateur, mot de passe)

 Connexion réussie à l’interface WordPress (wp-admin)

Sécurisation minimale incluse :

 Activation du SSL via l’outil d’InfinityFree

 Utilisation d’un mot de passe fort pour l’administrateur
 Suppression des extensions inutiles par défaut

Résultat final : Une installation propre de WordPress, accessible via le navigateur, prête à
recevoir un thème, du contenu, et des extensions personnalisées.

8
Section 6.02 Le thème choisi « Organic Green BlocksVersion : 3.2 »

Le thème sélectionné pour le site Greenbox est "Organic Green Blocks – Version 3.2", un
thème spécialement conçu pour les boutiques en ligne à vocation écologique, bio ou
alimentaire.

Section 6.03 Pourquoi ce thème ?

Ce thème a été choisi pour sa simplicité visuelle, son look professionnel et son adaptabilité
aux besoins d’un site e-commerce vendant des fruits, légumes, packs alimentaires et produits
naturels.
Section 6.04 Caractéristiques principales du thème :
Design épuré et orienté nature (couleurs vertes, icônes naturelles, typographie douce).
Intégration fluide avec WooCommerce pour la gestion des produits et commandes.
Compatibilité responsive : affichage optimal sur ordinateur, mobile et tablette. Blocs
personnalisables : mise en avant des produits, des packs, des témoignages ou des offres
spéciales. Chargement rapide et bonne structure SEO-friendly (idéale pour le référencement).

Section 6.05 Actions réalisées :

Installation et activation du thème depuis le tableau de bord WordPress. Personnalisation des
couleurs, polices et logos pour correspondre à l’identité visuelle de Greenbox. Réorganisation
des sections d’accueil : produits en vedette, offres, packs, footer, header.

7- Les extensions utilisées

Afin d’optimiser les performances, la gestion, le marketing et l’expérience utilisateur du site
Greenbox, plusieurs extensions (plugins) essentielles ont été installées et configurées. Voici
un aperçu des extensions utilisées :

9
 WooCommerce Plugin incontournable pour transformer WordPress en boutique en
ligne complète. Fonction : gestion des produits, commandes, paiements, clients,
livraison.
 Rank Math SEO Extension puissante de référencement naturel (SEO). Fonction :
optimisation des titres, méta-descriptions, URLs, structure sitemap, balisage Schéma.
Aide à améliorer la visibilité Google.
 Ovation Elements Outil complémentaire pour enrichir les blocs Gutenberg et
personnaliser la mise en page avec des éléments visuels modernes.
 Ninja Forms Créateur de formulaires de contact faciles à insérer et à personnaliser.
Fonction : permet aux clients de poser des questions, demander un devis, etc.
 MyRewards Extension de programme de fidélité. Fonction : attribuer des points pour
chaque achat, parrainage ou action du client (ex. : avis produit).
 LiteSpeed Cache Outil d’optimisation de performance. Fonction : accélère le site via
la mise en cache, la compression, l’optimisation des images, etc.
 Kliken – Ads + Pixel pour Meta Extension permettant de créer et gérer des
campagnes publicitaires Meta (Facebook & Instagram), avec intégration du pixel
Meta pour le suivi des conversions.
 Klaviyo Plateforme d’automatisation d’emails marketing. Fonction : envoi de
newsletters, relances de paniers abandonnés, campagnes personnalisées.
 Jetpack Extension multifonction : sécurité, sauvegardes, statistiques, CDN, mise en
page. Utilisée ici principalement pour la sécurité et les performances du site.
 Google for WooCommerce Intégration officielle de Google avec WooCommerce.
Fonction : permet d’exporter les produits vers Google Shopping et suivre les
performances via Google Ads et Google Analytics.

10
8- Réalisation du site web :
Cette partie contient le dernier volet de ce rapport, elle a comme but d’exposer mon travail
achevé. Je vais débuter par la présentation de l’interface qui est la page principale et la
première qu’aperçoit l’utilisateur en lançant l’application.
Section 8.01 Page D’accueil

La page d’accueil du site Greenbox a été conçue pour offrir une première impression forte,
claire et engageante. Elle présente immédiatement les valeurs du site : fraîcheur,
accessibilité et simplicité.

Section 8.02 Objectifs de la page d’accueil :

 Mettre en avant les produits clés et les offres du moment.

 Guider l’utilisateur vers les packs ou catégories les plus populaires.
 Instaurer la confiance avec une navigation fluide et un design cohérent.

Section 8.03 Structure de la page :

1. En-tête (Header)
o Logo Greenbox
o Barre de menu : Accueil - Produits - À propos - Contact
o Icône du panier (visible et dynamique)
2. Bannière principale (Hero Section)
o Image attractive avec slogan : Fruits & légumes frais livrés chez vous !
o Bouton d’appel à l’action (CTA) : Commander maintenant
3. Packs en vedette
o Présentation du Pack Étudiant et Pack Équilibre avec images + prix
o Bouton Découvrir le pack
4. Catégories de produits
o Icônes ou images : Fruits | Légumes | Produits naturels …
o Accès rapide à chaque catégorie & produit
5. Offre promotionnelle
o Bandeau ou encart avec : Livraison gratuite dès 199 DH !
o Lien vers la boutique
6. Section Fidélité / Récompenses
o Petit encart informatif sur le système de points
7. Avis clients ou engagement qualité
o Témoignages (optionnel) ou phrases sur la qualité, fraîcheur, circuit court

Section 8.04 Pied de page (Footer)

o Coordonnées, liens utiles, réseaux sociaux, mentions légales

11
Section 8.05 Compatibilité mobile :

 Design responsive 100 % : la page se lit parfaitement sur téléphone et tablette.

 Les boutons sont bien espacés, les images compressées, et le texte lisible.

12
Il arrive que des
personnes se connecte à
l’internet grâce à leur
mobile, c’est pourquoi, il
a fallu que mon site
web soit responsive
qui
s’adapte
parfaitement au format téléphone afin de Garantir aux
utilisateurs
une
expérience

13
de navigation optimisée. La figure suivante illustre la page des destinations en mode
téléphone:

L’image suivante représente le Footer du site qui permet à

l’utilisateur d’avoir une idée globale à propos du site, son menu, et les des lies des réseaux
sociaux du site :

14
9- Contenu des autres pages
Section 9.01 Page Produits (Boutique)

La page boutique affiche l’ensemble du catalogue avec :

 Filtres par catégorie (Fruits, Légumes, Autres).

 Vignettes produits avec : image, nom, prix, bouton "Ajouter au panier".
 Accès à la fiche produit complète contenant :
o Image haute qualité
o Description courte + longue
o Prix
o Stock/disponibilité
o Quantité à sélectionner
 Icône panier dynamique et résumé du total en haut de page.

15
Section 9.02 Page À propos

La page “À propos” présente l’identité de GreenBox en mettant en avant sa mission, sa

vision et ses valeurs fondamentales.

 Mission : Offrir aux consommateurs marocains des fruits et légumes frais, de saison
et accessibles, tout en soutenant les agriculteurs locaux.
 Vision : Créer un lien durable entre les producteurs et les familles marocaines à
travers des circuits courts et une alimentation transparente.
 Valeurs : Fraîcheur, accessibilité, confiance, saisonnalité, et soutien à l’agriculture
marocaine.
 Positionnement : Une alternative éthique et locale face aux grandes surfaces, en
privilégiant un modèle humain et durable

16
Section 9.03 Page Contact

Une page fonctionnelle pour permettre aux visiteurs de contacter l'équipe Greenbox :

 Formulaire de contact intégré (via Ninja Forms) avec :

o Nom
o Adresse e-mail
o Sujet / Message
 Coordonnées : adresse email de contact, téléphone (optionnel).

10- Processus d'achat

Le parcours d’achat sur GreenBox a été pensé pour être simple, rapide et accessible à tous.
Voici les étapes que suit un client pour commander ses produits :

Section 10.01 Navigation et choix des produits

 Le client visite la page "Boutique" ou les "Packs".

 Il parcourt les catégories : Fruits, Légumes, Produits naturels, Packs
hebdomadaires.
 Il clique sur chaque produit pour voir la photo, le prix, et la description.
 Il sélectionne la quantité souhaitée et ajoute au panier.

Section 10.02 Accès au panier

 Une fois ses choix terminés, l’utilisateur clique sur l’icône du panier.
17
  Il peut voir le résumé de sa commande (produits, quantités, sous-total).
 Il a la possibilité de modifier ou supprimer les articles avant de passer à la caisse.

Section 10.03 Passage en caisse (checkout)

 Le client clique sur "Commander".

 Il remplit ses informations :
o Nom
o Adresse de livraison
o Numéro de téléphone
o Email (si nécessaire)
 Il sélectionne le mode de livraison :
o À domicile
o Point relais (si proposé)
 Il choisit le mode de paiement (espèces à la livraison / autre si activé).

Section 10.04 Validation et confirmation

 Le client valide sa commande.

 Un message de confirmation s’affiche.
 Le client reçoit un appel, email ou message WhatsApp (selon configuration) pour
confirmer les détails et organiser la livraison.

Section 10.05 Livraison

 La commande est préparée et envoyée selon la méthode choisie.

 Le client reçoit ses produits frais, bien emballés et à temps.

Objectif : garantir un parcours utilisateur fluide, avec zéro frustration, pour encourager les
achats répétés.

18
11- paiement sécurisé

GreenBox met à disposition plusieurs méthodes de paiement sécurisées pour faciliter et

rassurer ses clients lors de la finalisation de leur commande.

19
Section 11.01 Paiement à la livraison (COD – Cash on Delivery)

 Option simple et très populaire auprès des clients marocains.

 Le client paie en espèces au moment de la réception de la commande.
 Solution idéale pour ceux qui préfèrent ne pas utiliser de cartes en ligne.

Section 11.02 Paiement par carte bancaire (CB / Visa / Mastercard)

 Paiement direct et sécurisé via une passerelle de paiement intégrée.

 Les données bancaires sont cryptées et non enregistrées par GreenBox.
 Confirmation instantanée du paiement, permettant un traitement rapide de la
commande.

Section 11.03 Paiement via PayPal

 Option sécurisée et internationale pour les clients disposant d’un compte PayPal.
 Possibilité de payer par carte via PayPal sans avoir de compte.
 Confirmation automatique et fiable, avec protection des acheteurs.

Sécurité garantie :

 Le site utilise un certificat SSL (https) pour sécuriser toutes les transactions.
 Aucun numéro de carte n’est conservé sur les serveurs de GreenBox.
 Les paiements sont traités via des plateformes reconnues pour leur fiabilité.

12- Conclusion :

Le projet GreenBox représente bien plus qu’une simple boutique en ligne. C’est une initiative
pensée pour valoriser l’agriculture locale, faciliter l’accès à des produits frais et encourager
une consommation responsable et durable au Maroc.

À travers la mise en place d’un site structuré, responsive, et enrichi de fonctionnalités

modernes (packs, programme de fidélité, SEO, outils marketing...), toutes les conditions sont
réunies pour garantir une expérience utilisateur optimale et une croissance progressive de
la plateforme.

Ce rapport retrace les différentes étapes de conception et d’exécution du projet, de

l’installation technique jusqu’aux actions marketing. Il constitue une base solide pour le
développement continu de GreenBox et son positionnement sur le marché national.

Nous restons à disposition pour toute évolution, suivi ou optimisation future du site.

Fait par :

EL HAJJAJI Amina
09/04/2025

20