Cadrage & atelier d'idéation - Structure du site

La première étape consiste à comprendre les objectifs d’Anne-Sophie et Félix pour le futur site web de Graines & Cie.

L’objectif n’est pas de créer un site e-commerce, mais un site vitrine capable de :
‍

• Faire découvrir l’univers de Graines & Cie et ses valeurs aux consommateurs et visiteurs de l’épicerie.
• Présenter l’épicerie et son offre locale et durable, sans nécessairement proposer de vente en ligne.
• Mettre en lumière les producteurs partenaires, leurs produits, leurs histoires et leurs savoir-faire.
• Créer davantage de lien entre producteurs et consommateurs, en donnant un visage et une histoire aux produits proposés.
• Faciliter la découverte de l’offre grâce à une expérience de navigation claire et intuitive.
• Construire une structure de contenu évolutive, capable d’accompagner le développement de Graines & Cie dans le temps.

Arborescence et parcours utilisateur

À partir de ces objectifs, je les accompagne dans la définition de la structure et l'arborescence du futur site à travers un atelier d’idéation. Ensemble, nous organisons et hiérarchisons les contenus afin de construire un sitemap clair et cohérent, structuré par sections et par pages, tout en gardant une attention particulière portée aux besoins des futurs utilisateurs.

Atelier de structure du contenu afin d'élaborer l'arborescence du site.

Wireframes

À la suite de l’atelier d’idéation, je passe à l’étape du wireframing. En m’appuyant sur le benchmark des sites d’épiceries locales et sur les contenus définis par Laura, je construis le squelette des différentes pages du site.

L’objectif est de se rapprocher au maximum du résultat final afin de valider la pertinence de la structure, la hiérarchie des informations et l’emplacement des contenus avant de passer à la conception UI.

Wireframe du site vitrine Graine & CIe.

Maquettes

Une fois que les wireframes ont bien été définis avec Félix et Anne-Sophie, je passe par l'étape finale tant attendu en design : le maquettage. Ainsi je met en forme et en couleurs les wireframes, avec un design UI qui respecte les contraintes en accessibilité. Au fur et à mesure de l'avancé, nous voyons ensemble pour statuer sur des petits sujets en design, tout en m'assurant de la faisabilité avec Camille (Intégratrice Webflow) qui se chargera du développement du site sur Webflow.

Maquettes finales prêtes à être intégrer sur Webflow.

Alignement design to dev

Il est essentiel d’impliquer le développeur le plus tôt possible dans un projet de design. Je travaille donc en étroite collaboration avec Camille pour valider la faisabilité des maquettes et leur intégration dans Webflow.

J’annote également les spécificités liées aux animations et aux différents états des composants (hover, actif, pressed, etc.). Des visios sont organisées si nécessaire afin de maintenir un bon alignement entre le design et son intégration dans Webflow.