Pensé pour un usage en interne, Expert facilite la création des Notes de Renseignement d’Urbanisme (NRU) et répond aux besoins concrets des utilisateurs présents sur site.

Certains éléments de ce projet sont confidentiels. Si vous avez un accès, connectez-vous pour découvrir les visuels. Sinon, je serais ravi d’en discuter avec vous lors d’un échange privé.

Contexte

Preventimmo propose à ses client·e·s des documents d’urbanisme accessibles en ligne.

Son produit phare, la note de renseignement d’urbanisme (NRU), est un document essentiel lors de la vente d’un bien immobilier.

La note de renseignement d’urbanisme (NRU), produite en interne, était initialement rédigée via Microsoft Word.

Problématiques

Chaque jour, un·e rédacteur·ice produit en moyenne une dizaine de notes d’urbanisme.

Mais au fil du temps, un volume important de demandes en attente s’est accumulé, mettant à mal la promesse de livrer les documents en moins de 72 heures.

Face à cette situation, le recrutement de nouveaux profils, bien que régulier, ne permettait plus de répondre efficacement à la charge de travail ni de résoudre durablement la problématique.

Connectez-vous pour voir cette image

Interview

Suite aux entretiens menés avec la product owner et les rédacteur·ices, nous avons identifié plusieurs points de friction dans leur quotidien sur Word.

Lors de la rédaction des notes, près de 50 % du temps était consacré à la mise en page, et environ 25 % à des tâches répétitives de « remplissage » : copier-coller, gestion de macros, insertion de formules, etc.

Pour compléter ces échanges, nous avons également réalisé des observations sur le terrain, afin de mieux comprendre les pratiques réelles et les adaptations mises en place par les équipes.

Connectez-vous pour voir cette image

Solution

Il est rapidement apparu essentiel de supprimer les contraintes liées à la mise en page et de réduire au maximum les tâches répétitives, comme le copier-coller ou la gestion manuelle des macros.

Pour moderniser ce fonctionnement et répondre aux besoins concrets des équipes, Preventimmo a lancé Expert, un outil 100 % en ligne pensé main dans la main avec les personnes en charge de la rédaction.

Nous avons ainsi conçu une interface qui :

  • Génère automatiquement un PDF, en intégrant la mise en page, la pagination et les éléments de forme ;
  • Préremplit un maximum d’informations à partir des données existantes ;
  • Simplifie la rédaction via un formulaire ciblé, qui n’affiche que les parties réellement éditables du texte, celles sur lesquelles les rédacteur·ices peuvent mobiliser pleinement leur expertise.
Connectez-vous pour voir cette image

Expert fait partie d’un ensemble d’outils conçus pour accompagner cette transformation.

D’autres interfaces sont développées en parallèle, notamment autour de la gestion des données et de la production documentaire.

Dans ce cadre, j’ai également conçu un design system commun pour garantir cohérence, accessibilité et efficacité à l’échelle de l’écosystème produit.

Voir le design system

Personnas

Connectez-vous pour voir cette image
Connectez-vous pour voir cette image
Connectez-vous pour voir cette image
Connectez-vous pour voir cette image

Conception

User flow

Connectez-vous pour voir cette image

Fonctionnalités admin / composition de règles

Structure du document

La structure définit les sections principales du document, qui serviront de cadre à l’organisation du contenu.

Ce modèle reprend l’architecture utilisée historiquement dans Word, tout en la rendant modulaire et éditable dans l’outil. Les sections sont ensuite complétées par des groupements de règles, eux-mêmes composés de règles éditoriales.

Groupements de règles

Les groupements permettent d’organiser les règles par thématique et de les afficher ensemble dans l’interface, mais aussi dans le PDF final.

Ce fonctionnement assure une continuité de présentation avec les documents précédents, mais aussi pensé pour faciliter la lecture côté client.

Clés

Les clés sont des variables insérées dans les textes afin de créer des modèles dynamiques (ou textes à trou).

Elles permettent de limiter la ressaisie, de réduire les erreurs et de standardiser la formulation, tout en conservant une marge d’adaptation.

Règles

Dans ce contexte, une règle est un élément de formulaire présenté au rédacteur. Elle peut prendre plusieurs formes :

  • champs à choix unique ou multiple,
  • zones de texte,
  • texte à trou utilisant des clés (voir ci-dessous), etc.

Un éditeur WYSIWYG a été mis à disposition pour faciliter la création et la gestion de ces règles.

Nous avons également prévu leur réutilisation dans d’autres types de documents, pour encourager la cohérence et la scalabilité du système.

Chaque règle peut être associée à des options d’apparition conditionnelles (type de commande, type de produit, zone géographique…), permettant d’adapter dynamiquement l’interface aux besoins métier.

Connectez-vous pour voir cette image
Élément à sélection unique
Connectez-vous pour voir cette image
Élément à sélection multiple — permet d’ajouter plusieurs occurrences du même type dans une règle.
Connectez-vous pour voir cette image
Les éléments texte (sans clé) ne s’afficheront même pas pour le rédacteur, car aucune action n’est requise de sa part.
Connectez-vous pour voir cette image
Cas d’erreur lié à un élément de synthèse

Pré-Remplir

Le système permet de pré-remplir automatiquement certaines règles, selon une logique d’applicabilité territoriale (nationale, départementale, communale).
Cela peut inclure :

  • le pré-cochage de réponses,
  • le remplissage de champs (notamment dans les textes à trou),
  • ou encore des suggestions personnalisées en fonction du contexte.

Ce mécanisme de pré-remplissage s’appuie à la fois sur des données internes et sur des outils métier complémentaires, développés en parallèle.

Ces outils alimentent directement l’interface de rédaction, permettant ainsi aux équipes de gagner en efficacité, de limiter les erreurs et de réduire la charge de travail manuelle.

Affichage rédacteur·ices

Côté rédacteur·ice, l’interface ne présente que les règles nécessitant leur expertise spécifique.

Pour optimiser leur efficacité, nous leur mettons à disposition un ensemble d’outils intégrés, facilitant la visibilité des informations clés et l’accès rapide à des ressources complémentaires, comme une cartographie interactive.

Cette approche vise à simplifier le parcours de rédaction, en limitant les distractions et en offrant des aides contextuelles pertinentes.

Connectez-vous pour voir cette image
Élément à sélection unique, coté rédacteur·ice
Connectez-vous pour voir cette image
Élément à sélection multiple, coté rédacteur·ice
Connectez-vous pour voir cette image
Éléments imbriqués, contenant des blocs texte avec des clés

Éléments libres

Certaines commandes demandent simplement une adaptation plus spécifique de la part des rédacteur·ices.

Pour y répondre, nous avons intégré des éléments libres, qui leur permettent d’ajouter du contenu personnalisé en fonction du contexte ou des particularités du dossier.

Ces champs offrent une souplesse d’usage, tout en restant intégrés à la structure globale du document.

Connectez-vous pour voir cette image
Champ texte avec recherche pré-remplissage existant
Connectez-vous pour voir cette image
Zone de dépôts d’image, utilisé pour importer des cartes
Connectez-vous pour voir cette image
Clonage d’élément

UI Design

Couleurs

L’idée principale était d’avoir une couleur non-utilisé par une des marques du groupe. Une des couleurs non utiliser était le mauve / violet

  • Mardi Gras

    #290C27

  • Royal Purple

    #654B9C

  • Royal Blue

    #5862E8

  • Taupe Grey

    #948893

  • Magnolia

    #F3F1F7

Typographie

Nous avons porté une attention particulière au confort de lecture, notamment pour les contenus longs.

La Roboto est utilisée pour les titres, pour sa clarté et sa neutralité, tandis que sa variante Slab est privilégiée pour les textes courants.

Avec ses empattements, la Roboto Slab offre un bon rythme de lecture et une meilleure stabilité visuelle, particulièrement utile dans des blocs de texte denses.

Connectez-vous pour voir cette image

Iconographie

Illustrations

Pour illustrer les grandes thématiques du projet, j’ai créé une iconographie épurée, alliant simplicité iconographique et traitement graphique travaillé.

Ces images, à la fois essentielles et expressives, renforcent l’identité visuelle tout en facilitant la communication des idées principales.

  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image

Icones

J’ai dessiné toutes les icônes dans un style au trait homogène, assurant une cohérence visuelle sur l’ensemble du projet.

Chaque icône est ensuite mise en valeur avec un fond coloré, constitué de formes simples — cercles, carrés, etc. — pour renforcer leur visibilité et faciliter leur identification rapide dans l’interface.

Cette simplicité des formes de fond contribue à une lecture claire et immédiate, améliorant ainsi l’expérience utilisateur en rendant la navigation plus intuitive.

Pour optimiser la gestion et l’intégration de ces icônes dans le produit, j’ai utilisé IcoMoon, un outil performant qui permet de créer une bibliothèque d’icônes personnalisée, légère et facile à maintenir.

  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image
  • Connectez-vous pour voir cette image

Petit point technique

Pour garantir la faisabilité technique du projet Expert, il nous a paru essentiel d’impliquer dès le début les équipes de développement.

Leur expertise a été précieuse, notamment dans les moments de doute, en apportant des conseils avisés et en orientant nos choix vers des solutions réalistes et efficaces.

Connectez-vous pour voir cette image

Pour les API on utilise Java

Pour le front Angular

Pour le générateur de PDF : PHP, HTML5 et wkhtmltopdf