De tous les projets que nous avons réalisés à ce jour, il y en a un en particulier dont nous souhaitons vous parler aujourd’hui : la conception d’un site institutionnel pour une PME romande.

Qu’est-ce qui rend ce projet particulier ? La fluidité avec laquelle nous l’avons réalisé. De sa conception jusqu’à sa livraison, il aura suffi 5 jours pour satisfaire le client !

Est-ce qu’un délai si court est synonyme de travail bâclé ? Loin s’en faut ! C’est là le résultat d’un alignement entre technologie, méthodologie, et réactivité du client !

De quoi s’agit-il ?

Suite à une recherche préalable en termes d’identité graphique et de contenu, cette PME vaudoise, Kleis Technology, nous a mandaté pour réaliser une refonte de son site web avec ses éléments de marque.

L’objectif était de réaliser un nouveau site respectant la charte graphique fournie, incorporant les pages & contenu demandés, tout en restant aisément maintenable chez eux.

Le livrable attendu était le code source du site internet, afin que l’équipe technique soit autonome pour l’hébergement et la maintenance évolutive.

Une méthodologie basée sur l’échange

Seul le client sait ce qu’il veut, aussi faut-il échanger avec lui pour s’assurer que la trajectoire empruntée est la bonne.

C’est dans cette optique que les 2 premiers jours de ce mandat ont été consacrés à la conception de la solution cible :

• Quelles sont les pages désirées ?
• Quel est le contenu attendu ?
• Quelle serait la cinématique de navigation ?
• Quelle technologie utiliser ?
• Etc.

Autant de questions qui ont mené à la réalisation de wireframes (maquettes ciblées sur l’utilisation et non pas les détails visuels).

Servant de base de discussion, ces wireframes ont facilité la récolte de feedbacks, ceci menant à identifier ce que le client désirait réellement pour réaliser le prototype des maquettes graphiques.

Ce projet a été réalisé en petit comité :

• 1 designer (socraft)
• 1 développeur (socraft)
• 1 Product Owner (Kleis Technology)

L’avantage de ce dispositif est la facilité à s’assurer que toutes les parties soient informées et puissent valider les décisions prises.

De cette manière, au-delà des aspects visuels, une validation en amont du développeur pouvait être faite pour confirmer la faisabilité des propositions avec les technologies envisagées.

À la fin de ces 2 jours, nous avions :

• Confirmé la cible attendue;
• Confirmé la faisabilité technique de la solution identifiée;
• Construit le Design System représentant les différents composants de la solution à implémenter.

Et techniquement, qu’est-ce que ça donne ?

Pour être efficace, il faut employer des outils et technologies que l’on maîtrise.

C’est d’ailleurs pour cela que nous avons été mandatés : Kleis Technology souhaitait que nous mettions à contribution l’expertise adoptée sur notre site web pour le leur (un site institutionnel basé sur une architecture JAMStack pour un site léger et performant).

Considérant le besoin, il était donc tout naturel de s’appuyer sur le même socle technique, à une petite différence près : étant donné que le contenu du site web demandé n’allait pas évoluer régulièrement, il n’était pas nécessaire d’aller aussi loin que nous en utilisant un CMS headless.

Pour ces raisons, voici les outils et technologies qui nous ont permis d’aller vite :

• Gatsby (React) avec du markdown comme source de données
• Emotion JS (css-in-js) & Tailwind, pour la simplicité à créer des composants graphiques
• Vercel, pour la rapidité à laquelle des environnements peuvent être configurés et exposés
• GitLab, pour historiser le code et automatiser le déploiement de chaque changement

Pour un site statique dont le contenu évolue rarement tout en ayant un design personnalisé, ces choix représentaient la meilleure solution possible dans ce contexte.

Dans le cas où le site avait eu un design plus classique, ou qu’il avait vocation à être édité régulièrement par des non développeurs, WordPress ou tout autre CMS classique aurait permis d’aller encore plus vite.

Si ce socle technique vous intrigue, Aktar vous explique tout sur celui de socraft.ch dans cet article : Nous avons utilisé Jamstack pour le développement de notre site

L’outillage au service du partage

Un développeur ne se limite pas au code, il recherche l’apport de valeur. Au-delà du code réalisé, il faut s’assurer qu’il réponde correctement aux attentes du client.

Pour concrétiser cela, le premier jour de développement était consacré à mettre en place le projet technique sur GitLab. Automatiser le déploiement de l’application sur un environnement de qualification en est une étape cruciale.

En effet, de cette manière, le client avait accès aux derniers changements très vite, de sorte à raccourcir autant que possible la boucle de feedback.

A partir de là, sur les 3 jours de développement, une approche itérative était de mise. Le client était informé au fil de l’eau des avancées réalisées pour confirmer la trajectoire.

Les imprévus font partie de la vie de tous les projets, y compris les plus simples. Ceux-ci ont néanmoins été indolores, étant donné que tout était en place pour faciliter l’échange.

Le mot de la fin

À la fin de ces 5 jours, le client avait à disposition un Design System ainsi que le code source de son nouveau site web, prêt à être déployé sur son environnement de production.

Si c’est un résultat dont nous sommes fiers, il y a un point essentiel sur lequel nous devons insister : tout ceci était possible parce que le client était disponible et réactif !

Il est aisé de perdre des heures voire des jours entiers pour parvenir à réunir les parties prenantes d’un projet et prendre des décisions. La disponibilité ne devrait jamais être sous-estimée.

La fluidité des échanges ainsi que la modernité des technologies employées en font un projet dont la réalisation nous a apporté beaucoup de satisfaction !

Merci à Alvaro Costa pour la récolte des propos et la rédaction de l’article.