Optimiser la conception WordPress avec Johannes

L’arrivée de Gutenberg en 2018 a marqué un tournant chez Be API. Le dernier éditeur de contenu WordPress, plus souple et “user-friendly” que ses prédécesseurs, s’est rapidement imposé comme la solution optimale pour mener des projets ambitieux en parfaite co-création avec nos clients. Convaincus que la réussite et la pérennité d’un site dépendent en grande partie de son caractère pratique et intuitif pour les contributeurs finaux, nous avons totalement adapté notre méthodologie autour de cet éditeur.

Et cela implique bien entendu la phase de conception ! C’est pourquoi notre équipe a créé Johannes, un kit UX « Gutenberg ready » qui permet de concevoir simplement et rapidement des wireframes sur WordPress.

Disponible en open source sur Figma, l’outil fait aujourd’hui partie intégrante de notre méthodologie à l’agence. Dans cet article, nous revenons sur l’origine du projet et sur l’intégration de Johannes dans notre processus de production.

La genèse: penser Gutenberg dès la phase de conception

Été 2021. Les Team Leaders de Be API se réunissent lors d’un séminaire pour réfléchir à la problématique suivante: comment intégrer Gutenberg dans toutes les étapes de production d’un site WordPress, pour exploiter pleinement le potentiel de l’outil? On pense alors directement à la façon de réorganiser la partie technique, le suivi avec nos clients et à former l’ensemble des équipes sur l’éditeur de contenu.

Se pose aussi la question de l’intégration de Gutenberg dès la phase de design.

En pratique, les équipes de conception conçoivent déjà des wireframes pour des projets Gutenberg depuis quelques temps. Cette étape est essentielle car la qualification des blocs a une incidence considérable sur la suite du projet.

Naît alors l’idée de créer un kit UX intégrant tous les blocs natifs Gutenberg, ainsi que des extensions et les packs de blocs les plus utilisés, déjà calibrés pour l’éditeur. L’équipe de conception s’attèle à la création de ces templates, et la première version de Johannes voit le jour.

Pourquoi ce type d’outil fait sens ? Parce que l’arrivée de Gutenberg et son principe d’atomic design ont complètement transformé la manière de concevoir les sites sur WordPress. Nous sommes passés des gabarits fixes, entièrement personnalisables, à la possibilité de créer des modèles (patterns), d’utiliser des blocs natifs présents dans l’éditeur et de créer des blocs sur-mesure. En amont de chaque phase de design, nous créons un document appelé « design system », qui regroupe tous les types de blocs qui seront présents et déclinés dans l’ensemble du site.

C’est un peu ce qu’est Johannes: un document de référence ultra complet, que l’on peut dérouler et adapter à chaque projet. Il permet de créer rapidement et facilement des wireframes propres, déjà compatibles avec l’éditeur.

Un outil au service de notre méthodologie

Chez Be API, concevoir des sites WordPress avec l’éditeur Gutenberg est notre quotidien. De ce fait, la mise en place d’outils tels que Johannes apportent une véritable valeur ajoutée au sein de notre chaîne de production, en nous permettant notamment:

• d’optimiser nos phases de design – la base des wireframes existe déjà, prête à être adaptée à chaque projet
• de nous concentrer sur l’essentiel – à savoir l’UI, le storytelling et le parcours utilisateur

En standardisant la conception, nous pouvons guider la direction artistique et créer des maquettes fidèles au rendu final tout en respectant les prérequis techniques. En outre, les projets sont déjà calibrés pour Gutenberg, ce qui nous permet aussi de gagner du temps lors de la phase de développement.

À l’agence, nous accompagnons nos clients sur des projets d’envergure. Ainsi nous accordons une grande importance à la mise en place et au déroulement d’une méthodologie bien rodée. Une bonne méthodologie repose sur son organisation détaillée – menée d’une main de maître par l’équipe projet – mais aussi sur l’utilisation d’outils adaptés. C’est pourquoi la mise en place de Johannes est particulièrement appropriée à notre organisation.

Nous nous appuyons sur notre expérience pour améliorer constamment nos process, tout en prenant soin de garder le principe de co-création au centre de notre méthodologie. Le but est d’intégrer l’ensemble des parties prenantes du projet et s’assurer que nous travaillons tous dans la même direction.

Embarquer toute l’équipe dans le même bateau

Et pour cause ! Collaborer étroitement reste un élément clé de réussite pour tout projet. En intégrant le principe de blocs et d’atomic design dès la phase de maquettes, nous travaillons avec Gutenberg en conception, mais aussi avec nos clients, dès le commencement du projet.

Les wireframes « Gutenberg ready » que nous présentons nous permettent d’intégrer l’interface WordPress dès la phase d’UX. Cela nous aide à expliquer le fonctionnement du CMS aux contributeurs finaux et à clarifier les blocs natifs que nous utiliserons, ainsi que les besoins en développement supplémentaires pour créer des blocs sur-mesure.

Et je pense que tout le monde s’accorde à dire qu’un projet est bien plus agréable et fluide lorsque toutes les parties prenantes parlent la même langue – et rassurez-vous, pas besoin d’être webmaster pour comprendre la langue de Johannes.

L’utilisation de ces gabarits nous permet de produire une conception plus détaillée et plus compréhensible par tous les acteurs du projet. Côté clients, il y a une vraie valeur ajoutée au niveau de la projection dans la contribution avec Gutenberg et la préparation des contenus dès la phase de maquette.

Elisabeth, Chef de projet digital

En travaillant sur ce kit, nous avons conservé l’ambition de départ qui nous motive chez Be API: créer des projets pratiques et utiles pour les utilisateurs finaux et les contributeurs. C’est en combinant nos expertises métiers et la puissance de vos contenus que nous créons des expériences digitales pertinentes et durables.

Nous sommes également heureux de partager cette ressource avec la communauté WordPress, dans un esprit de « giving back ». Vous retrouverez le kit UX disponible en open source sur Figma ici.

Vous êtes designer ou freelance? N’hésitez pas à vous le procurer, à l’utiliser et à nous faire part de vos feedback !