Service Conseil Gerian

Problématique

Comme pour tout nouveau business, tout est à faire, et le délai de 2 semaines laissait peu de marge de manœuvre.

Livrables

• Wireframes
• Landing page Webflow Bilingue +1 page de confidentialité
• Automatisation pour la réception d’un message de confirmation lors de la soumission d’un formulaire
• Bannière de cookies pour la gestions des données personnelles collectées

Ma mission

1. Créer une landing page efficace et fonctionnelle permettant aux visiteurs d'entrer contact avec Gérian.
2. Développement de la maquette retenue dans Webflow.

Déroulement du projet

La première semaine a été consacrée à la contractualisation, à la recherche et au branding principalement par Kalin, afin de définir une identité visuelle cohérente pour Gérian. La deuxième semaine a été entièrement dédiée à la conception et au développement du site.

Nous avons créé une landing page qui présentait de manière concise les informations clés de l'entreprise en utilisant Webflow, un outil no-code permettant de développer rapidement des maquettes validées par le client. Cette approche nous a permis de respecter les délais tout en créant un site web sur-mesure et évolutif.

La phase II du projet consistera à créer un site vitrine plus complet pour Gérian.

Points clés

Wireframes

Avant de commencer la conception de la landing page, nous avons créé des wireframes pour visualiser la structure et l'agencement des éléments du site. Les wireframes nous ont permis de valider les maquettes avec Ian, en nous assurant que nous répondions à ses attentes et à ses besoins spécifiques.

Cela nous a également permis de gagner du temps lors de la phase de conception en ayant une vision claire de la direction à suivre.

Formulaire de contact multi-step

Pour faciliter la soumission d'initiatives et de projets, nous avons mis en place un formulaire de contact multi-step. Cette approche guidée étape par étape permet à l'utilisateur de fournir les informations nécessaires de manière claire et intuitive.

Cela réduit les risques d'erreurs ou d'omissions dans les informations soumises et offre une meilleure expérience utilisateur.

Bilinguisme

‍

La province du Québec est francophone au Canada et la législation en vigueur impose des règles très strictes sur la place du Français et de l’Anglais dans le secteur de la communication [loi 101— Charte de la langue française].

Par conséquent, le site a été développé en français en premier lieu. Mais la cible de Gérian se situant dans le grand Montréal, où l'anglais est également couramment utilisé dans le milieu du travail, il était important de créer une version anglaise du site.

Framework Lumos

L'utilisation d’un Framework permet de garantir la cohérence et la facilité de déploiement d’un site, tout en étant prêt à évoluer à l'avenir.

Étant donné que nous avons travaillé simultanément sur le développement de l'image de marque de Gérian et la création du site web, il était prévisible que des changements surviendraient en cours de route.

La structure du site est donc conçue pour grandir. De fait, beaucoup d'élément sont déjà en place pour permettre un développement plus rapide lors de la phase 2 du projet.

Ici nous avons donc utilisé Lumos de Timothy Ricks afin de réaliser des ajustements et modification en un clin d’œil lors de l’évolution de la stratégie de marque.

Fluid Responsive

Lumos repose sur le système Client-First de Finsweet, qui est connu pour sa prise en charge du fluid responsive design.

Cela signifie que le site web que nous avons créé avec Lumos s'adapte de manière fluide à différents appareils et résolutions d'écran.

Que les visiteurs accèdent au site à partir de leur ordinateur de bureau, de leur tablette ou de leur smartphone, ils bénéficieront d'une expérience utilisateur optimale avec une mise en page et une navigation adaptées à leur appareil.

Le fluid responsive design  est essentiel pour garantir une accessibilité maximale et une satisfaction des utilisateurs sur tous les appareils.

Communication

Lors de ce projet réalisé en seulement deux semaines, il était primordial de favoriser une communication fluide et efficace. Les échanges de longs e-mails étaient hors de question aussi bien pour le client que pour nous, les designers.

Il fallait maintenir un flux de travail efficace et collaboratif avec le client, évitant les retards et les malentendus.

Nous avons donc utilisé des web apps et des outils en ligne pour optimiser notre communication, tels que :

• Figma, le logiciel collaboratif de design de site/applications par excellence. Le client à été en mesure de faire des retours directement sur les wireframes (maquettes) et même commenter en temps réel.
  Cette approche nous a permis d'avancer rapidement en prenant en compte les commentaires du client, et c'était une expérience gratifiante de voir le projet prendre forme en temps réel.
  ‍
• MarkUp.io que j’utilise principalement lorsqu’on passe à la partie développement sur Webflow. Avec cet outil, le client peu tester et déposer des commentaires/modifications sur le site en cours de finalisation. En quelques jours seulement, nous avons pu traiter 125 commentaires sur Markup.io, ce qui a grandement facilité la collaboration et la résolution des problèmes.

Conclusion

En deux semaines, grâce à la réactivité de Ian et Webflow, nous avons pu créer des wireframes et déployer une landing page efficace et en accord avec ses valeurs.

Webflow fut un réel atout, car ils nous permet de créer des sites web sur-mesure et évolutif, rapidement et dans les délais.

Avec Kalin aux commandes du branding et moi à la tête du web design, et grâce à la réactivité d'Ian, notre client, nous avons pu livrer ce projet dans le délais impartis, satisfaisant ainsi les besoins urgents d'Ian et de Gérian.

‍

‍