OCAS

Le site des assurances sociales genevoises, repensé pour des usagers qui savent ce qu’il leur faut, mais pas comment ça s’appelle.

Client
OCAS
Réalisé chez
Virtua/Smile
Type de travail
Design web
Année
2019-2020
La page d’accueil de l’OCAS sur un moniteur, parmi des plantes, sur un bureau en bois.
Le problème
Un site vieux de dix ans, organisé par régime d’assurance, avec plus de mille formulaires dans une seule liste alphabétique.
Ce que j’ai fait
Une refonte autour d’une entrée guidée par situation, et d’un seul système éditable pour tous les formulaires.
Résultat
÷2 formulaires après regroupement
Rendu final
Page d’accueil de l’OCAS sur ordinateur et sur mobile, avec le bloc « Assistant OCAS » à droite.
Pages « Assurance vieillesse et survivants » et « Des questions concernant l’AVS ? ».
Formulaire en ligne : identité, pièces jointes et remarques, avec une infobulle sur le numéro AVS.
Liste des actualités de l’OCAS et page d’un article.
Page « Calculateurs en ligne » et page d’erreur 404.

Le point de départ

Un site vieux de dix ans

L’ancien site de l’OCAS : page d’accueil, version mobile, liste de formulaires et page « Calculs en ligne ».
Le site tel qu’il était : dix ans d’âge, organisé par régime d’assurance.

Besoins des usagers

L’OCAS voulait réduire les appels et les courriers pour que ses équipes puissent aider directement les gens, avec un contenu compréhensible sans connaître le vocabulaire des assurances.

Recherche

Ce qui bloquait vraiment, on l’a compris grâce à un prototype de navigation basse fidélité, testé avec une personne par profil : une dizaine de sessions, menées directement avec le chef de projet, qui gérait la partie technique. Une seule personne par profil, c’est peu, mais il s’agissait de couvrir tous les profils, pas d’approfondir chacun.

Schéma : un profil d’usager par participant, tous reliés à la maquette du site testée.
Une personne par profil, une dizaine de sessions.

Contraintes

Drupal était imposé dès le départ. Le contenu aussi : des textes à valeur légale à migrer tels quels, sans droit de réécriture. Le budget et le calendrier ne permettaient ni une phase de recherche en amont, ni un suivi après la mise en ligne.

Arriver à la bonne page

La plupart des gens qui arrivaient sur le site savaient déjà de quel régime ils relevaient. Ce qu’ils ne savaient pas, c’est comment s’appelait le document, la démarche ou le formulaire dont ils avaient besoin — et les formulaires étaient classés par ordre alphabétique, précisément sous ces noms-là.

Il fallait donc plusieurs portes d’entrée : un assistant qui part de la situation de la personne, sans lui demander de nommer ce qu’elle cherche ; une recherche ; un menu par assurance, toujours là pour ceux qui connaissent déjà leur régime. J’ai construit les quatre ou cinq questions de l’assistant directement à partir de la façon dont les gens décrivaient leur situation pendant les tests. Chaque parcours aboutit à un formulaire prérempli ou à la page concernée.

L’assistant résout le problème de l’accès, mais le reste du site suppose toujours un lecteur qui maîtrise le vocabulaire de l’institution.

Schéma : un usager choisit son régime (AVS, AI, APG, AF) puis arrive sur une longue liste de documents.
Sur l’ancien site, les gens trouvaient leur régime, puis butaient sur la liste.
Schéma : quatre questions successives mènent l’usager à un formulaire.
Les étapes de l’assistant : construites à partir de la façon dont les gens décrivaient leur situation pendant les tests.

En dehors de l’assistant, la terminologie n’a pas changé. Des infobulles étaient prévues pour les termes difficiles, mais il y en avait trop pour les maintenir : le site renvoie vers le glossaire fédéral à la place.

Page « Glossaire » : champ de recherche, index par lettre et définitions dépliables.
Pour les termes qui ne passent pas par l’assistant : le glossaire fédéral.

Mille formulaires, un seul système

En parallèle du point d’entrée, on a passé en revue tout le catalogue. Certains formulaires apparaissaient deux fois dans la même liste, une fois en lien, une fois en PDF. On a regroupé ce qui se recoupait, supprimé ce qui était obsolète, et rassemblé le reste dans un système unique que l’OCAS pouvait éditer sans passer par l’agence. Le nombre de formulaires a été divisé par deux environ.

Les développeurs, avec le chef de projet, ont transformé les PDF en formulaires en ligne ; j’ai conçu les composants qui ont servi à les construire : une mise en page qui fonctionne sur mobile, des états de focus, des champs accessibles, des messages d’erreur qui expliquent le problème. Le regroupement a réduit le nombre de formulaires sans changer leurs noms : hors de l’assistant, on les trouve toujours par leur nom officiel.

Les formulaires sont plus faciles à maintenir qu’à parcourir sans aide, et c’est précisément ce que l’assistant vient compenser.

À gauche, l’ancienne liste de formulaires et de PDF ; à droite, la page « Trouvez vos documents rapidement » avec quatre sélecteurs.
Formulaires regroupés dans un seul système éditable.
Le routage dynamique des formulaires en action

Un langage visuel pensé pour durer

La typographie est la D-DIN, une police libre dérivée de la DIN, celle de l’identité imprimée de l’OCAS : on a actualisé l’existant plutôt que de le remplacer. Le système de couleurs suit la même logique. On a ajouté une couche d’accessibilité (UserWay) par-dessus les composants reconstruits.

Le système reste prudent : les tailles de texte varient peu et le site n’a aucune animation.

Chiffres

÷2

Formulaires après regroupement. Compté sur le catalogue, non mesuré.

4 étapes → 2

Pour envoyer un formulaire : télécharger, imprimer, remplir, poster devient remplir, envoyer. Compté sur les deux parcours.

L’OCAS a repris l’édition et la maintenance du système de formulaires elle-même après la livraison, sans intervention de l’agence.

Conclusion

Statut actuel du site

Le site est en ligne depuis juin 2020, et l’OCAS le fait tourner et le maintient depuis, sur la même structure.

Ce que je ferais autrement

La partie que je referais, c’est le système visuel — des tailles de texte plus contrastées, un peu de mouvement, un parti pris moins prudent. Côté méthode, je pousserais pour une phase de recherche avant le travail d’architecture, et un suivi statistique simple après la mise en ligne.

Ce que je défends toujours

Donner aux gens plusieurs façons de démarrer, à partir de ce qu’ils savent réellement, plutôt qu’un seul chemin construit autour de l’organisation interne de l’institution.