Création d’un extranet en Progressive web app pour Unicil

Unicil - Entreprise Sociale pour l’Habitat - filiale immobilière du groupe Action Logement avait comme objectif de refondre son extranet locataires. Le but était notamment d’enrichir l’expérience utilisateur en y intégrant de nouvelles fonctionnalités à forte valeur ajoutée. Ensemble, nous avons créé un extranet en progressive web app pour que l’outil soit adapté aux besoins du bailleur et de ses locataires.

  • Compétences
  • Développement web
  • UX / UI Design
  • Développement mobile
  • Ateliers de co-conception

Brief et contexte

Unicil est un bailleur social appartenant au groupe Action Logement. Il mettait à disposition de ses locataires un extranet proposant simplement la consultation des informations personnelles des utilisateurs.

Cet extranet était d’ailleurs essentiellement disponible sur ordinateur, aucune version adaptée au mobile n’ayant été développée.

L’objectif a donc été de moderniser l’extranet, de lui ajouter des fonctionnalités et de créer une version mobile optimale grâce à la progressive web app.

Principaux objectifs

  • Transformer l’extranet en un outil central de communication avec les locataires
  • Leur permettre un accès simple à leurs documents, aux actualités de leur résidence...
  • Rendre autonome sur la réalisation d’actes simples précédemment réalisés par Unicil (ex : formaliser une demande…)
  • Permettre de payer son loyer en ligne, de retrouver ses avis d’échéance et quittances
  • Rendre l’application performante sur mobile grâce à une technologie adaptée
  • Permettre aux équipes internes d’avoir accès à l'outil avec gestion des droits
unicil-01-5ff88391b23ea327972221

Ateliers de co-conception et Proofs of Concept

Atelier UX/UI design

Un atelier UX/UI design a permis de définir les profils types d’utilisateurs, leurs habitudes et les fonctionnalités utilisées par chacun d’entre eux afin de prévoir une navigation adaptée à tous.

Atelier et POC technique

L'ensemble des flux d’échange de données entre le SI d’Unicil et l’application a été défini. Un POC technique a permis de valider le bon fonctionnement de la solution d’échange retenue.

Proof Of Concept graphique

Des maquettes interactives et cliquables ont été réalisées dans le but de faire tester l’interface par des utilisateurs. Les retours nous ont permis d’ajuster la solution avant son lancement.

unicil-02-5ff88391d70cf296973459

Modernisation de l’extranet avec Symfony

La première étape a consisté à refondre l’extranet locataire existant dans sa version desktop. Ce développement a été réalisé avec le framework PHP Symfony muni du bundle Easyadmin pour le back-office. Objectifs :

  • réintégrer les fonctionnalités existantes en les rendant plus performantes et ergonomiques (ex : retrouver ses contrats, formaliser une demande, télécharger un avis d’échéance, infos pratiques sur sa résidence...)
  • ajouter des fonctionnalités essentielles encore indisponibles telles que le paiement en ligne, télécharger une quittance...
  • mettre en place une bibliothèque de documents génériques (ex : modèles de courriers) pour accompagner le locataire dans ses démarches
unicil-03-5ff88392040f1125717647

Interfacage de l’extranet avec l’ERP du bailleur

L’enjeu a également été d’interfacer l’extranet avec Sagha, un ERP complet maintenu par le bailleur social lui-même. Cette connexion est nécessaire pour effectuer une synchronisation régulière des données entre les deux outils, et d’y retrouver ainsi des informations à jour. C’est par exemple le cas des avis d’échéance et des quittances mises à disposition par Unicil.

Chaque fois, la donnée maître se trouve dans SAGHA. Les statuts de paiement dans l’interface locataire s’affichent après synchronisation et vérification du module de comptabilité d’Unicil. A l’inverse, un système a été mis en place afin d’envoyer des informations depuis l’extranet vers l’ERP. C’est par exemple le cas de la création d’un compte locataire en ligne.

unicil-04-5ff8839223648719615097

Conception de la progressive web app

Le second enjeu de taille a été de rendre l’extranet accessible facilement depuis un smartphone ou une tablette. Pour cette nouvelle version mobile, nous avons choisi de partir sur une progressive web app.
La progressive web app permet de réaliser un extranet 100 % responsive tout en lui attribuant certaines fonctionnalités d’application native. Ici par exemple, les utilisateurs peuvent :

  • installer l’application directement sur leur smartphone
  • mettre l'icône sur leur écran d’accueil
  • accéder à leurs notifications depuis l’application
  • recevoir des notifications push (directement sur l’écran) sur Android

Un code unique pour les deux versions de l’extranet

Le développement de cette PWA se base sur le code source de l’extranet desktop. Ainsi, les mises à jour de la PWA se font automatiquement sans que l’utilisateur n’ait à le faire manuellement.

Le bailleur, quant à lui, ne doit prévoir qu’une seule maintenance et les évolutions sont réalisées automatiquement sur les deux outils en une seule intervention technique.

unicil-05-5ff88392416aa725590019

Gestion de l’extranet et de la PWA simplifiée

Une interface d’administration a été conçue pour gérer le contenu de l’application en tenant compte des rôles de chacun. Ce back-office permet de :

  • créer/ modifier des actualités
  • administrer des documents types d’aide pour les locataires
  • créer / gérer des comptes administrateurs/contributeurs avec gestion des droits spécifiques à chacun
  • consulter le statut des paiements
unicil-06-desktop-5ff883925ff88325162510

Des tutos pour aider à installer l’application

L’installation de la PWA n’est pas encore une pratique connue de tous les internautes. Une page à donc été dédiée à l’explication de la méthode d’installation grâce à des GIFs personnalisés.

Lorsqu’ils se rendent sur le site Unicil, les locataires peuvent donc être guidés dans leur installation en fonction du système d’exploitation de leur smartphone (Android ou iOS).

unicil-testimonial-5ff83315df21c381619341

La refonte de notre extranet locataire est une pièce maîtresse de la digitalisation de notre relation avec nos locataires. Nous pensions au départ mettre en place une application smartphone native. Novaway nous a présenté la PWA, qui est le meilleur compromis : un service dans la poche de nos locataires, identique sur tous les devices et une maintenance simplifiée. Les équipes Novaway ont su nous écouter et nous accompagner dans la mise en place de ce projet qui continuera à évoluer vers une véritable plateforme de services pour nos locataires.

Pierre-Yves L’Hénaff
Responsable digital chez Unicil

Découvrez d'autres projets Novaway

Toutes nos réalisations