Made in Grand Est

Pour leurs 30 ans, Made in Grand Est nous a confié la refonte de leur site internet en accord avec leur toute nouvelle charte graphique. Un nouveau design coloré et animé, à leur image, qui permet de mettre en avant l’ensemble des 160 adhérents ainsi que leurs travaux. Une grande page d’accueil simple et concise avec des call to action qui renvoient vers les fonctions essentielles du site. Un menu burger pour une navigation en plein écran intuitive qui optimise l’expérience de l’utilisateur dans sa recherche de l’information. Une carte interactive qui permet de localiser et découvrir l’ensemble des adhérents Made in Grand Est. Chacun possède sa page entreprise où il peut mettre à jour ses informations quand il le souhaite et s’inscrire en ligne aux futures actions proposées, un gain de temps pour la structure et pour l’adhérent.

L’intégration de la maquette s’est organisée autour de six grandes parties :

1. La carte interactive et les fiches entreprises (présentation des adhérents)


2. L’agenda d’actions


3. Les pages de contenu


4. L’espace documentation


5. L’espace actualités / blog


6. Le tableau de bord adhérent

 

Toutes les parties du site sont gérées avec WordPress, donnant au client l’autonomie nécessaire pour rajouter, modifier ou effacer du contenu.

 

La carte interactive est intégrée en Javascript avec Mapbox, ce qui nous permet de personnaliser plus facilement l’apparence du fond de carte et des marqueurs grâce à leur outil Mapbox Studio. En faisant travailler PHP et JS main dans la main, nous pouvons filtrer dynamiquement la liste des entreprises et mettre à jour la carte en temps réel.

 

Les cercles de bulles des adhérents sont générés avec une simple animation CSS d’échelle et une boucle Sass permettant d’organiser les éléments en cercle. En décalant le temps et le départ de l’animation suivant le cercle, on obtient cet effet de respiration des bulles.

 

La page “Devenir adhérent” présente à l’utilisateur un formulaire d’inscription interactif. Certains champs sont conditionnels et évoluent selon les choix précédents. Made in Grand Est reçoit ces informations compilées dans un e-mail.

 

En bas de la page d’accueil, nous intégrons le flux Instagram de Made in Grand Est. En utilisant l’API du service Juicer, nous récupérons chaque post et son lien. En organisant les images sous forme de grille et en les plaçant dans un mockup de smartphone, on réplique l’utilisation de l’application Instagram.

 

Le système d’évènements propose aux adhérents de s’inscrire aux actions de Made in Grand Est directement sur le site. Avec un système de dates géré par le plugin ACF, les inscriptions sont clôturées automatiquement à la date indiquée par l’administrateur.