Réseau de Périnatalité de Normandie : fusion et refonte

La refonte du site a été également l’occasion d’une mise à jour autant graphique que fonctionnelle.

Afin d’avoir une nouvelle identité correspondant aux deux associations, un nouveau logo avait été designé. Le premier besoin était donc graphique, à savoir proposer un thème et une charte graphique se basant sur ce nouveau logo. Le site devant comporter un espace grand public et un espace professionnel connecté, cette nouvelle charte devait également pouvoir s’adapter à ces deux environnements.

D’un point de vue technique, le site devait répondre à ces enjeux :

• utiliser le CMS WordPress,
• conserver et améliorer les outils spécifiques des deux précédents sites (gestogramme, tableaux de bord, …),
• avoir un outil d’adhésion en ligne avec un formulaire complet pour faciliter le travail des administrateurs,
• perfectionner et moderniser l’annuaire public déjà présent dans les précédents sites, avec une carte interactive plus moderne, des fiches d’établissements et de professionnels retravaillées et un moteur de recherche plus performant.

La conception de la charte graphique passe par une réunion entre la personne chargée du design et le client : le brief graphique.

Ce brief graphique sert à approfondir le besoin du client et faire ressortir des axes de design. Nous nous intéressons donc :

• aux contraintes techniques (support de lecture principal du site par exemple),
• à l’historique de la charte graphique et les éléments actuellement existants et utilisés,
• aux autres supports utilisant cette charte ou qui devront utiliser la nouvelle.

Nous devons donc également estimer à quel point nous avons la liberté de nous écarter de la charte si des contraintes nous l’imposent (dans le cas de couleurs ne passant pas les ratios nécessaires à l’accessibilité par exemple).

Pour le nouveau site du RPN, nous avons donc reçu le nouveau logo, une frise graphique, ainsi qu’une palette de couleurs.

Par ailleurs, au-delà de ces aspects purement visuels, des questions plus abstraites sont également posées afin d’orienter le style général du futur site :

Quels sont les utilisateurs ciblés ?

• Réponse :
  • administrateurs du Réseau, les adhérents (via l’espace professionnel),
  • jeunes parents (en moindre quantité).
• Orientation graphique :
  • Confirme les orientations graphiques déterminées précédemment, nous conservons une cohérence

La conception du nouveau design se fait en plusieurs étapes.

Pour commencer, nous préparons un « Kit UI », une sorte de Design System qui va regrouper toutes les informations de base du design :

• grilles à respecter,
• couleurs,
• polices d’écriture (ou font) en fonction des divers niveaux de texte (titres, sous-titres, textes, textes importants … ),
• la bibliothèque d’icônes à utiliser,
• les illustrations et logos spécifiques au site.

Nous y ajoutons les composants qui seront répétés, comme :

• les boutons,
• les champs de formulaire,
• les éléments de menu.

Enfin les patterns tels que le header, le footer et les cards sont ajoutés.

Le principal défi graphique concernant ce site était de séparer visuellement les deux espaces, tout en maintenant une cohérence visuelle pour que l’utilisateur ait toujours l’impression d’être sur le même site.

Pour ce faire, 2 choses ont été mises en place :

• utiliser des couleurs principales différentes,
• utiliser 2 dispositions de menus distinctes.

La charte graphique comportant comme couleurs du rose, du vert et du bleu, le choix des couleurs principales s’est effectué comme suit :

• le rose a été conservé pour la partie publique, étant une couleur souvent utilisée dans le domaine de la périnatalité, en utilisant un camaïeu doux,
• le bleu a été sélectionné pour la partie professionnelle, étant une couleur souvent liée à la connaissance et au professionnalisme.

Concernant l’espace professionnel, il a été pensé comme une application : une fois l’utilisateur connecté au site, il se retrouve sur un espace ayant un menu latéral, avec un accès rapide aux informations professionnelles dont il a besoin.

La page d’accueil avait également besoin d’être retravaillée pour faciliter l’expérience utilisateur et la navigation sur le site.

La demande initiale comportait un bandeau défilant sur les dernières actualités (mélangeant articles, événements, protocoles, etc). Nous déconseillons l’utilisation de carrousels automatiques lorsqu’il s’agit de données informatives : l’utilisateur ne prend pas le temps de lire, étant habitué à de l’affichage publicitaire dans ce genre de composant.

Afin de satisfaire à la demande de façon plus efficace pour l’orientation choisie du site, nous avons pris la décision de mettre en avant les dernières actualités via des cartes, triées par types.

Les deux pages d’accueil (publique et professionnelle) ont donc les mêmes informations génériques d’affichées, mais comportent des différences notamment dans les liens en accès rapides.

Le premier défi sur cette fusion de deux sites a été la reprise de données. C’est un passage quasi obligatoire lors d’une fusion ou refonte, mais c’est loin d’être la partie la plus simple. Chaque cas est unique et l’automatisation de ce processus n’est pas toujours possible ou que partiellement.

Dans tous les cas, il s’agit dans un premier temps :

• d’analyser la structure des données de chacune des bases existantes,
• de discuter avec le client afin de s’assurer des éléments à reprendre (il est très rare de tout devoir conserver et il est dommage de passer du temps sur des éléments qui ne sont pas nécessaires),
• dans le cas d’une fusion, de mettre en place une stratégie d’homogénéisation avec le client pour décider comment unifier les pages principales.

Après ces échanges nous estimons le temps que prendrait l’automatisation et la saisie manuelle et nous les confrontons. Il en découle généralement trois scénarios possibles :

• le scénario idéal : reprise automatique totale (totale = 95%, il y aura toujours besoin d’un minimum d’adaptation),
• le scénario hybride : reprise automatique de 50-75% et adaptation manuelle du reste,
• le pire scénario : reprise manuelle totale car automatisation impossible (économiquement ou techniquement).

En général quand nous sommes dans le pire scénario, nous avons déjà mis en garde le client bien en amont. Cela arrive quand les données de départ sont « groupées » et que nous avons besoin de les segmenter dans le nouveau système.

Voici un exemple parlant d’un cas problématique à automatiser :

Nous devons donc segmenter un champ unique (nom complet) en trois champs (titre, prénom et nom). Le contenu d’avant n’était pas normé et est donc anarchique. C’est typiquement le genre de cas qu’on ne pourra pas, ou difficilement, reprendre de façon automatique.

Dans le cas de cette fusion nous avons réussi à rester dans un scénario hybride, mais la reprise manuelle a tout de même été conséquente et la reprise automatique complexe.
Cette complexité a été apportée par notre décision de prendre la solution de long terme et de bien re-catégoriser et normer les différents contenus qui étaient à la fois nombreux mais aussi très interdépendants. C’est un exercice crucial, car la façon dont les données vont être stockées déterminera si vos fonctionnalités de demain pourront être mises en œuvre ou non.

Chez Imagile, nous prenons soin de bien expliquer et travailler cette partie car c’est le cerveau de votre application.

Sur les WordPress que nous créons, nous avons mis en place un outil sur-mesure pour la conception des formulaires. De cette façon, nous pouvons gérer de A à Z les champs, le design, la façon dont les mails envoyés sont traités, et ce sans aucune dépendance à un plugin supplémentaire.

Grâce à cela, nous avons pu développer le processus d’adhésion entièrement sur-mesure pour améliorer l’expérience utilisateur. Par exemple, pour l’adhérent ne souhaitant pas figurer dans l’annuaire public des professionnels, l’intégralité de cette partie reste masquée.

Ce formulaire détaillé se relie à la nouvelle base de données et permet une préinscription au site et à ses annuaires. L’équipe du réseau peut ensuite vérifier les informations, au besoin de les compléter et prendre contact, avant de valider l’adhésion et transformer cette préinscription en compte adhérent. Ce n’est qu’après cette validation que l’adhérent pourra être visible sur l’annuaire si c’était son souhait, mais aussi accéder aux ressources qui lui sont réservées.

La médiathèque native de WordPress est l’outil permettant de gérer et organiser les fichiers du site, tels que des images, des vidéos, ou des documents. Cependant, dans le cadre d’un site destiné à des professionnels, elle présente des limitations importantes lorsqu’il s’agit de protéger des fichiers sensibles. Par défaut, WordPress stocke les fichiers de la médiathèque dans des répertoires accessibles publiquement sur le serveur (via des URLs directes), ce qui signifie que toute personne disposant du lien peut y accéder, même sans être authentifiée. Cela constitue un risque majeur pour la confidentialité et la sécurité des données.

Le Réseau de Périnatalité Normandie avait comme besoin la mise à disposition de fichiers uniquement réservés aux professionnels ayant un compte sur le site. Pour répondre à ce besoin, il a donc été nécessaire de développer une médiathèque sécurisée.

Cette médiathèque repose sur un système de gestion des permissions qui restreint l’accès aux fichiers en fonction du rôle ou des droits de l’utilisateur connecté. Ces fichiers sont également stockés dans des répertoires qui ne sont pas accessibles publiquement.

L’annuaire du Réseau est conséquent. Plusieurs milliers d’entrées y sont présentes, de l’établissement de santé avec maternité, au professionnel de santé (médecin, sage-femme, infirmier…), en passant par les pharmacies et associations. Il était donc plus que nécessaire de proposer un système de filtres / recherche complet pour faciliter la recherche aux utilisateurs.

La gestion des droits fine est un besoin récurrent quand une même ressource doit être partiellement visible pour certains types d’utilisateurs. C’est souvent pour des raisons de confidentialité, mais ça peut aussi être pour améliorer la pertinence en affichant moins d’éléments.
Dans le cadre de ce projet, les deux cas étaient présents : il ne fallait pas polluer les recherches par des résultats non pertinents pour le grand public, mais aussi respecter le choix de certains professionnels de santé de ne pas être publiquement visibles.

Avant toute chose, il faut discuter et échanger : nous le faisons en général par le biais d’un ou plusieurs ateliers de travail en fonction de la complexité. Ces ateliers nous permettent d’appréhender le besoin métier du client et de le transformer en solution technique. En général, ces ateliers permettent de mettre le doigt sur des cas spécifiques non anticipés. Cela évite d’ajouter des “pansements” à la solution initiale pour gérer des spécificités et de les intégrer directement.

Une fois le besoin bien cadré et l’éventuel compromis technique trouvé : nous passons à l’implémentation. Il peut arriver que pendant cette phase de nouveaux cas non anticipés soient détectés. C’est l’occasion d’un nouvel échange pour re-déterminer comment les gérer. Le cas s’est présenté lors de ce projet, car la gestion devait être très fine, en fonction de plusieurs critères et contextes, et nous ne pouvons malheureusement que très rarement penser à tout du premier coup, que ça soit du côté métier ou technique.

C’est la raison pour laquelle, pour des sujets complexes de ce type, nous passons par des petites itérations sur des périmètres réduits et que nous communiquons le plus possible afin de ne jamais arriver à un état ou le redressement n’est plus possible.

Le gestogramme est l’outil de calendrier de grossesse, disponible aux particuliers et professionnels sur le site. Il permet, en renseignant la date de début de grossesse ou la date des dernières règles, d’obtenir un calendrier complet sur les rendez-vous à prendre durant la grossesse et après, ainsi que certaines informations clefs.

Cet outil, déjà disponible sur les sites d’origine, a été repris en embarquant la logique métier déjà présente, et amélioré en ajoutant de nouvelles gestions de données.

Il a également été amélioré graphiquement sur le site et sur le PDF généré pour faciliter sa lecture et son utilisation.

La refonte du site du Réseau de Périnatalité de Normandie a permis de répondre au besoin d’unifier deux identités, tout en modernisant les outils et l’expérience utilisateur. Grâce à une charte graphique adaptée et des fonctionnalités techniques plus avancées, ce nouveau site contribue à renforcer la mission du réseau : offrir un accès commun et équitable à tous, professionnels ou particuliers.

Elle illustre également parfaitement l’adaptabilité de WordPress à des besoins métiers : tout en restant un site à la maintenance facilement accessible pour ses administrateurs, il est tout à fait possible d’ajouter des spécificités plus techniques, sans pour autant alourdir la charge en plugins tiers.