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.
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.
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.
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.
Personnas
Conception
User flow
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.
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.
É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.
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.
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.
Pour les API on utilise Java
Pour le front Angular
Pour le générateur de PDF : PHP, HTML5 et wkhtmltopdf