page-header

Ameli App

Project Description

Voici un défi intéressant qu’on m’a donné : 48h pour choisir une application de mon choix et la redessiner en me basant sur une analyse heuristique pour améliorer son utilité. Ayant récemment utilisé cette application et m’étant posé beaucoup de questions à son sujet, j’ai choisi l’application de l’Assurance Maladie, Ameli.

Contexte

Ameli est le service en ligne sécurisé de l’Assurance Maladie française, qui permet aux utilisateurs de gérer toutes leurs démarches avec la Sécurité Sociale. Tous les citoyens de plus de 16 ans, ainsi que les résidents étrangers assurés à la Sécurité Sociale en France, peuvent créer leur compte personnel Ameli en ligne.

Depuis 2019, 7 millions de nouveaux comptes ont été créés, portant le nombre d’utilisateurs d’Ameli à plus de 40 millions en 2021, sur un total de 45 millions de personnes assurées de plus de 18 ans qui sont éligibles à l’utiliser.

La crise sanitaire a accéléré cette croissance, avec la nécessité de réduire les déplacements physiques, d’accélérer les démarches, et l’augmentation des arrêts de travail. De plus, l’option de télécharger un certificat de vaccination contre la Covid-19 a contribué à la forte augmentation des créations de comptes. Les assurés ont ainsi découvert les services pratiques et rapides qu’Ameli propose.

Avec un compte personnel sécurisé sur ameli.fr, accessible via Internet ou une application mobile, les utilisateurs peuvent :

  • Suivre leurs remboursements, démarches, paiements d’indemnités journalières, etc. ;
  • Demander une nouvelle carte Vitale (en cas de perte ou de vol), demander une carte européenne d’assurance maladie, ou même télécharger un certificat de droits ;
  • Mettre à jour leurs informations personnelles, déclarer un déménagement, une naissance, etc. ;
  • Poser des questions via le chatbot ou le système de messagerie, et accéder à des conseils et informations sur la santé.

Ameli propose une quarantaine de services, souvent plus simples et plus rapides que les méthodes traditionnelles comme le courrier postal ou les appels téléphoniques. L’application mobile devient également de plus en plus populaire, avec 45 % des connexions réalisées via la version mobile aujourd’hui, contre 28 % en 2015.

Alors, à quoi ressemble cet outil essentiel dans la vie des citoyens français ? Faisons un petit tour, voulez-vous ?

 

écrans principaux Améli app

écrans principaux Améli app

Si la première chose qui me dérange dans cette application est sa structure globale, nous commencerons tout de même par identifier tous les points de friction possibles à travers une analyse heuristique.

10 points analyse heuristique

10 points analyse heuristique

Analyse heuristique : Qu’est-ce que c’est ?

En design de l’expérience utilisateur (UX), les évaluateurs professionnels utilisent l’évaluation heuristique pour évaluer de manière systématique la convivialité d’un design ou d’un produit. En tant qu’experts, ils passent en revue une liste de 10 critères pour identifier les défauts que les équipes de conception peuvent négliger.

Les heuristiques de Nielsen-Molich stipulent qu’un système doit :

  1. Informer les utilisateurs de son statut de manière appropriée et rapide.
  2. Présenter les informations de manière compréhensible, en fonction du fonctionnement du monde réel et dans leur langage.
  3. Offrir aux utilisateurs un contrôle et leur permettre de corriger facilement leurs erreurs.
  4. Être cohérent pour que les utilisateurs ne soient pas confus par des termes, des icônes, etc. différents.
  5. Prévenir les erreurs : un système devrait soit éviter les conditions où des erreurs pourraient se produire, soit avertir les utilisateurs avant qu’ils ne prennent des actions risquées (par exemple, des messages « Êtes-vous sûr de vouloir faire cela ? »).
  6. Présenter les informations et les instructions de manière visible, permettant aux utilisateurs de reconnaître les options et actions plutôt que de compter sur leur mémoire.
  7. Être flexible afin que les utilisateurs expérimentés puissent trouver des moyens plus rapides pour atteindre leurs objectifs.
  8. Éviter l’encombrement en ne contenant que les informations pertinentes pour les tâches à accomplir.
  9. Fournir une aide simple concernant les erreurs et leurs solutions.
  10. Proposer des étapes concises dans une documentation claire et recherchable pour résoudre les problèmes.

 

Voici la liste des critères heuristiques qui ne sont pas respectés sur les écrans principaux de l’application :

Page de connexion : Il est impossible de se déconnecter depuis l’interface de connexion. De plus, l’icône du menu suggère qu’il y a des catégories principales, mais ce n’est pas le cas. C’est déroutant. Le tutoriel n’est pas mis en avant mais est caché dans la liste des éléments du menu, et rien n’indique cela, bien que ce soit à ce moment-là qu’il serait le plus utile.

  • Heuristique 2 : Informations structurellement incompréhensibles.
  • Heuristique 3 : Manque de contrôle pour naviguer à travers les différentes features
  • Heuristique 4 : Manque de cohérence concernant l’icône du menu.

Page d’accueil : Les sections sont organisées dans une structure linéaire sans menu en bas, ce qui rend impossible la navigation entre les sections sans revenir constamment à la page principale.

  • Heuristique 3 : Manque de contrôle.
  • Heuristique 7 : Manque de flexibilité.

Page de paiement : Il est impossible de filtrer une recherche.

  • Heuristique 7 : Manque de flexibilité.
  • Heuristique 8 : Encombrement inutile dû à l’absence de filtrage des informations.
  • Heuristique 2 : Compréhensibilité. Les utilisateurs savent-ils ce que signifie « paiement à un tiers » ?

Page des procédures : Bien que la page ait une mise en page simple, elle inclut trop d’éléments dans la liste et manque de hiérarchie claire.

  • Heuristique 8 : Encombrement d’informations inutiles.

Page d’informations : Il est dommage que l’application ne permette pas aux utilisateurs de changer leur médecin traitant ici.

  • Heuristique 3 : Manque de contrôle.

Page des rendez-vous : Cette page est mal organisée car elle est complètement vide, bien que la prise de rendez-vous soit une série d’écrans inutiles.

  • Heuristique 1 : Manque d’optimisation.

Page du répertoire de santé : Cette page est tout simplement incompatible avec les appareils mobiles car elle n’est pas responsive. De plus, l’application propose 3 modes de recherche (par nom, activités ou actes) dans 3 champs différents, ce qui pourrait être simplifié en un seul.

  • Heuristique 6 : Informations et instructions présentées de manière illisible.
  • Heuristique 8 : Encombrement d’informations.

Menu Burger : Après une comparaison minutieuse, il semble offrir exactement les mêmes actions que la page d’accueil, accédant à chaque action possible référencée dans chaque catégorie. Pour moi, cela est illogique et prouve la redondance de la structure actuelle de l’application. Le menu n’est qu’une répétition de la liste interminable et non structurée des actions. Seuls les paramètres, cachés à la fin du menu, ne sont pas trouvés ailleurs.

  • Heuristique 8 : Encombrement d’informations.

Page de la boîte mail : La formulation UX utilisée dans les e-mails ne permet pas aux utilisateurs de comprendre le contenu d’un simple coup d’œil ni de filtrer efficacement les informations.

  • Critères heuristiques 3, 7 et 8 sont les plus fréquemment mentionnés comme des lacunes sur les écrans analysés :
    • Offrir aux utilisateurs un contrôle et leur permettre de corriger facilement leurs erreurs.
    • Heuristique 7 : Être flexible afin que les utilisateurs expérimentés puissent trouver des moyens plus rapides pour atteindre leurs objectifs.
    • Éviter l’encombrement et ne comprendre que les informations pertinentes pour les tâches actuelles.

Avec ces points spécifiques en tête, nous allons commencer la refonte de l’application. Après cette recherche initiale, il est nécessaire pour moi de revenir sur ce que je considère comme le principal problème de l’application : sa structure.

 

Sitmap
Sitemap actuelle d'ameli app

Sitemap actuelle

En bleu, vous pouvez voir la structure actuelle de l’application. En rose, ma proposition, centrée autour d’une barre de navigation qui est actuellement absente.

Proposition d'amélioration de la sitemap

Proposition d’amélioration de la sitemap

Étant donné que l’application est utilisée par des millions d’utilisateurs, je ne souhaite pas perturber les habitudes existantes ni déstabiliser les utilisateurs moins à l’aise avec les outils numériques. Par conséquent, je me concentre sur l’essentiel et évite des changements majeurs de style. Je reste concentrée sur la fonctionnalité.

 

Refonte
Mid-fi

En abordant les problèmes de l’application originale, je me suis concentrée sur l’amélioration de la hiérarchie et de la structure de l’application.


Redesign mid-fi ameli app

Redesign mid-fi ameli app

Connexion : Amélioration de l’accessibilité au tutoriel directement depuis la première page.
Profil : Cela devient la page principale sur laquelle les utilisateurs arrivent après avoir entré leurs identifiants. Elle permet d’accéder à plusieurs éléments qui ne sont actuellement pas disponibles dans l’application : leur carte d’assurance maladie, la Carte Européenne d’Assurance Maladie (CEAM) et leur carte de mutuelle. Les utilisateurs peuvent également mettre à jour les informations concernant leur médecin traitant.
Paiements : La page est mieux structurée avec des tags pour filtrer l’information et l’option de visualiser et sauvegarder chaque relevé mensuel en PDF.
Mes procédures : La page actuelle liste de nombreuses options. Je les ai regroupées et structurées par thème pour améliorer la visibilité.
Mes rendez-vous : La page actuelle était complètement vide sans rendez-vous et semblait redondante. J’ai simplifié le nombre de pages nécessaires pour prendre des rendez-vous afin d’optimiser cette page au maximum.
Répertoire de santé : Je l’ai repensé pour qu’il soit compatible avec les appareils mobiles. Bien que les trois sections puissent potentiellement être fusionnées en une seule, j’ai considéré cela comme un problème de base de données et j’ai laissé les trois champs de recherche.

Le design global présente une barre de navigation plus pratique et efficace, améliorant l’accès aux différentes pages.

 

Style tile

Pour le style graphique, j’ai choisi de ne pas apporter de changements drastiques. L’utilisation de dégradés me permet d’ajouter de la nuance et de la douceur avec des textures réalistes.

Redesign ameli app - style tile

Redesign ameli app – style tile


Ameli - figma components

Ameli – figma components

Prototype animé

Voici la version finale de ma refonte

     

Client fictif: La Sécurité Sociale

Skills: Design Thinking, UX/UI design, Figma

Release Date: 2024