Ressourcerie La Charpentière
Refonte de site : gestion de projet, maquettage, intégration statique, développement WordPress
Dans le cadre de ma formation de Web designer au CEFIM, j’ai eu l’occasion de travailler sur un projet client concret de A à Z. L’objectif était de réaliser la refonte du site internet de la ressourcerie La Charpentière en passant par toutes les étapes de conception en mettant en application les méthodes de design thinking.
La phase d’exploration et de recherches, en groupe de 3 étudiants, nous a permis de comprendre et de cibler les besoins du client. Nous avons étudié la notoriété et les performances de l’ancien site de notre client et analysé la concurrence via un benchmark. Ces éléments nous ont permis d’identifier les points à améliorer.
Lors de la phase d’idéation et de prototypage, nous nous sommes placés du côté de l’utilisateur, grâce à des personas et nous avons ainsi pu déterminer plus précisément la cible du site et définir un parcours utilisateur optimisé. Nous avons pour cela effectué un travail important sur l’arborescence qui nous a permis de définir 4 portes d’entrée différentes exprimées par des verbes d’action, en fonction de l’objectif du visiteur : donner, acheter, réparer et partager.
C’est à cette étape que le travail collectif a pris une tournure individuelle. Après des croquis de wireframes à la main sur papier, un premier prototype en basse définition a émergé.
La maquette en basse définition navigable, réalisée sous XD, a été présentée à un panel d’utilisateurs test qui ont pu la prendre en main puis répondre à un questionnaire. Leurs réponses nous ont permis d’affiner le parcours utilisateur et d’améliorer l’expérience de navigation.
J’ai notamment fait le choix, à cette étape, d’intégrer un menu fixe (à gauche version bureau, en bas version mobile) reprenant les 4 verbes emblématiques afin de garder ces portes d’entrée accessibles à tout moment.
Après une phase de recherche avec la création d’un Moodboard, l’identité visuelle s’est construite autour de typographies, de couleurs et d’éléments graphiques sélectionnés avec soin.
Le choix des couleurs met en exergue le lien au végétal, l’authenticité et le dynamisme chers à l’association.
J’ai fait le choix d’une structure globale organisée et rigoureuse avec des sections clairement identifiables (fonds de couleur alternant entre papier et crème et ajout de séparateurs de section). Cette rigueur vise à conférer à l’association de la crédibilité et à mettre le visiteur en confiance.
Cette rigueur est contrebalancée par une police de titre manuscrite et des éléments graphiques qui donnent l’impression d’être dessinés à la main (forme des boutons, coups de pinceaux, séparateurs à pointillés irréguliers, pictos crayonnés..). Ces éléments mettent l’accent sur l’humain, le « fait-main » et l’importance du travail des matières au sein de la Charpentière.
Le papier déchiré qu’on retrouve en en-tête et en pied de page, met en lumière l’esprit du recyclage.
Après validation du client, la maquette basse définition a pu prendre des couleurs. Cette version haute définition a elle aussi été réalisée sur XD, en version bureau et mobile.
L’intégration a été réalisée sur Visual Studio Code en HTML et CSS via le préprocesseur SASS.
L’ajout de scripts JAVASCRIPT a permis l’intégration de fonctionnalités spécifiques telles que le menu responsive, l’affichage des images dans une lightbox, un carrousel responsive pour les actualités, une animation de défilement de chiffres…
Le site a ensuite été développé dans le CMS WordPress afin de faciliter la mise à jour par la client. J’ai aménagé un back-office intuitif grâce à l’extension ACF.
