Lézards Créationlz

e-Commerce pour l’association Éco-Campus 🥬

Publié le 6 mars 2017

Le projet de e-Commerce de l’association Éco-Campus fait l’objet du projet collectif réalisé avec Élodie Roosz, Grégoire Poignand et Lara Locoge durant le semestre 3 et 4 du DUT MMI à Montbéliard. Je me suis occupé de la réalisation des éléments graphiques, des maquettes et j’ai aider à intégrer le site web avec WordPress et le plugin Woocommerce.

🥗
🧺

L'association

Éco-Campus est une association gérée par des étudiants de carrières sociales de l'IUT de Belfort. Elle a pour but de créer une cohésion sociale entre étudiants et promouvoir des projets en lien avec le développement durable.

Logo de l'association Éco-Campus

Depuis 2016, l'association s'est lancée dans la vente de paniers garnis frais & locaux à moindre coûts pour les étudiants du campus de l'IUT de Belfort. Le but est de proposer aux étudiants la possibilité de cuisiner équilibré sans se ruiner.

L'association a donc fait appel aux étudiants de MMI Montbéliard pour créer un e-Commerce. Le but est de vendre en ligne les paniers garnis afin d'éviter le traffic d'argent sur le campus, gérer des stocks et les paniers ( éviter le gâchis alimentaire ), gérer les réservation, les adhérents de l'association, des tarifs préférentiels suivants les membres ainsi que pour communiquer sur le contenu des paniers.

Recherches graphiques

Comme pour tout projet web, nous avons commencé à faire des recherches graphiques pour être parfaitement dans le thème et le sujet du projet. Nous avons retenus cette harmonie colorée. Ces couleurs vont donc être utilisés sur les éléments graphiques de tout le projet.

[harmonie_coloree]

Après quelques essais de logo nous avons retenus cette mascotte grenouille nommée Guillaume. Il représente l'association dans leur communication.

Logo du site de paniers garnis de Éco-Campus

Recherche typographique

Typographies utilisées pour le e-Commerce Éco-Campus

Nous avons sélectionné les typographies Alegreya Sans SC pour les titres en raison de son élégance et Lato pour le texte courant en raison de sa bonne lisibilité. L'idée est de casser les codes du milieu agricole et de renvoyer une image de qualité qui peut être raffinée.

Maquettes graphiques

Zoning préalable du site web Éco-Campus les paniers garnis
Maquette web du e-Commerce de Éco-Campus

Call to action

Call-to-action pour Éco-Campus

Nous avons utiliser 3 call to action sur la page d'accueil. Le but est d'inciter l'utilisateur à visiter la boutique et à en apprendre plus sur le projet. Il se compose en 3 phases : Commande, envoi des produits et retrait de la commande.

Boutique WooCommerce

Un aperçu de la boutique générée par le plugin Wordpress WooCommerce

Voici un aperçu de la boutique présentant tous les paniers garnis de l'association. Le plugin WooCommerce génère ces pages automatiquement, ce qui est très pratique pour maintenir l'application au fil du temps. C'est aussi un gain de temps important pour les gérants de l'association, ceux-ci n'ont plus qu'a ajouter des produits dans la partie administration de Wordpress pour les voir s'ajouter au site.

Content marketing

Pour développer l'activité de l'association, nous avons intégré une page "Recettes". Les commanditaires pourront rédiger des recettes pour donner des idées repas simples et rapides aux étudiants achetant leur paniers. Cette une stratégie de content marketing visant à offrir du contenu aux clients pour développer les ventes du site. De plus cela répond à la problématique : "Que faire à manger avec le panier que je viens d'acheter ?".

La page recette du site marchand de Eco-Campus

Mises en situation

Mise en situation du site Éco-Campus sur différents supports
Une mise en situation du site mobile d'Eco-campus

Le site est destiné aux étudiants et doit donc pouvoir être visité sur mobile. L'experience utilisateur ne doit pas pâtir du support sur lequel le site est affiché. Ceci est particulièrement important dans notre cas puisque l'utilisateur va dépasser de l'argent sur le site. Il doit donc avoir confiance, celle-ci passe aussi par l'apparence du site : il ne doit renvoyer une image de qualité et de confiance.

Vous pouvez consulter le site final en ligne à l'adresse : http://www.paniers-garnis.ecocampus-asso.fr/

Autre recherche graphique

Logo Le Campanier

"Le Campanier" était une de nos autres recherches graphiques pour ce projet. Bien que cette piste nous plaisait particulièrement bien, nous n'avons pas pu la faire aboutir. Le nom est déjà réservé et utilisé sur Internet.

Tous mes projets