E.changes (Stabulo)
L'unité de recherche de l'Université de Lorraine « Adaptation, mesure et évaluation en santé. Approches interdisciplinaires » accompagnée de trois autres partenaires mène le programme de recherche É.Changes qui vise à proposer une intervention de computer tailoring, utilisant les principes de l’entretien de motivation et les modèles théoriques du changement en santé.
Demande client
Dans le cadre d'une initiative visant à accompagner les étudiants universitaires dans leur démarche de sevrage tabagique et à effectuer un suivi statistique, nous avons développé une application innovante assurant un soutien personnalisé aux étudiants en utilisant un algorithme basé sur leurs réponses à des questionnaires.
Technologies utilisées
TypeScript
Vue2 et Vue3
Nuxt.js
Docker
Collaboration et design
Vite
Gitlab
Figma
Miro
L'application mobile
Il a été choisi de développer une application web sous forme de Progressive Web App pour la rendre consultable sur tous les appareils sans avoir besoin de l'installer, mais aussi pour faciliter les mises à jour régulières, le développement avec des outils modernes, et le fonctionnement par liens pour faciliter l'inclusion et la motivation des étudiant(e)s.
Les objectifs
- Réalisation d’une application web avec authentification
- Back-office intuitif reposant sur des formats simples à manipuler (JSON) et une base de données SQL
- Création d’une charte graphique complète avec logo
- Définition et développement d’un parcours utilisateur interactif par séquences, avec conversation structurée autour de personas
Infrastructure et fonctionnalités
Dans le développement de cette application, nous avons utilisé Nuxt et Vue pour le front-end pour concevoir une interface réactive et dynamique, tandis que Directus a été choisi comme système de gestion de contenu (CMS) headless pour faciliter l’administration des données et utilisateurs, ainsi que l'analyse des données.
La transformation de l'application en Progressive Web App (PWA) l'a rendue universelle, accessible sur tous les appareils sans avoir à développer plusieurs versions spécifiques pour chaque plateforme.
Un algorithme adaptatif a été mis en place pour personnaliser les réponses et questions suivantes selon des retours des utilisateurs, garantissant un accompagnement sur mesure par un arbre conversationnel, c’est-à-dire une personnalisation des interactions par une discussion avec un avatar simulé par l’application.
Design system
Le design system a été conçu pour garantir la cohérence et l'harmonie visuelle de l'application. Il comprend des composants réutilisables, des styles et des guidelines permettant de maintenir une cohérence visuelle et fonctionnelle tout au long du développement.
Ce design system a été élaboré en étroite collaboration avec le prototypage et les personnes impliquées dans le projet pour garantir que chaque élément graphique était attendu et réponde au besoin : développer une conversation interactive fluide avec un agent conversationnel, comme sur une application de messagerie instantanée traditionnelle.
Les atouts d’un prototypage design
Le prototypage a offert une vision anticipée de l’application finale, intégrant toutes les composantes essentielles du design et de l'interactivité. En matérialisant les choix graphiques, le logo et le parcours utilisateur, nous avons pu visualiser concrètement l’apparence et le parcours avant sa mise en développement puis en production.
Ce travail a également permis de valider l’ergonomie des parcours utilisateur. Comme il existe plusieurs parcours en fonction des questions / réponses des étudiants, le prototypage a servi à identifier et anticiper chaque scénario possible, garantissant ainsi une expérience fluide et personnalisée pour tous les types d’utilisateurs.
Grâce à cette phase de prototypage, il a été possible d’évaluer et d'ajuster les éléments visuels et fonctionnels de l’application, assurant ainsi que chaque utilisateur dispose d’une navigation intuitive et sans encombre, quel que soit son profil ou son stade dans le parcours.
Une innovation réussie
Nous avons su mobiliser des solutions techniques de pointe, intégrant les frameworks réactifs récents en front-end, et des outils performants en back-end tout en misant sur des technologies open-source et des formats ouverts, facilitant la maintenance et l'évolution.
L'application de sevrage tabagique est devenue intuitive et performante grâce à un prototypage rigoureux : nous avons pu anticiper chaque parcours utilisateur et besoin technique, structurer les conversations attendues et les schémas de navigation, garantissant une expérience fluide et personnalisée.
