AFPA – Redesign de l’environnement Tethys 

Rôle : UI/UX Design – Design graphique

Tethys est un ensemble d’outils de la chaîne d’éditoriale Scenari qui permet de créer des formations
à destination de la plateforme en ligne Mètis.

Contexte

Dans le cadre de sa transformation numérique, l’AFPA a décidé d’améliorer l’expérience utilisateur de ses parcours de formation et de ses outils de création regroupés sous l’environnement Tethys. Tethys permet la création de parcours de formation, de guides pédagogiques et divers livrets de séquences pour des centaines de titres professionnels.

La solution Tethys de l’AFPA est composée ( entre autres ) de :

• xGuidances : Outil de scénarisation de parcours de formation
• Guidances : Pour concevoir les formations divisées en séquences, séances et en unité d’apprentissage.
• Questionnaires : Conception de questionnaires formatifs.
• Ressources : Création de ressources pédagogiques.

Au sein de l’équipe de designers, mon rôle était d’améliorer le rendu visuel des parcours de formation et des questionnaires afin de faciliter l’utilisation des outils Tethys pour les concepteurs et rendre le contenu de formation plus attractif aux stagiaires.

Processus de création

1 – Comprendre le fonctionnement de la chaîne éditoriale.

A cette occasion j’ai été formée en interne sur l’utilisation de Tethys. J’ai pu apprendre comment les concepteurs créent leurs parcours de formations avec les outils à leur disposition.

2 – Brainstorming.

J’ai réfléchi à la nouvelle interface de l’outil  xGuidances en premier avec les autres designers et les chefs de projet. C’est l’outil de conception le plus utilisé au sein de l’entreprise.  La phase de réflexion a consisté à faire un audit pour déterminer les problèmes à la fois UI et UX et interroger des collègues sur l’utilisation des logiciels.

3 – Création de wireframes.

J’ai débuté la conception de wireframes pour XGuidances pour sa version web et mobile en prenant en compte les contraintes de design imposés par la chaîne éditoriale. J’ai également fait des recherches pour trouver une base d’icônes open sources. 

4 – Conception des maquettes.

Après validation des wireframes, j’ai conçu les maquettes et j’ai aidé le prestataire chargé du développement à l’implémentation.

Illustrations by Ouch.pics

Solution

L’attention de l’utilisateur doit être en priorité tournée vers le contenu de formation. 

Nous avons choisi de donner un coup de légèreté aux interfaces. Les formations étant aussi destinés à un public ayant des difficultés de lecture et/ou des difficultés avec l’informatique, le design devait totalement être au service du contenu de formation. L’objectif était de respecter les règles d’accessibilité renforcées par un design simple, clean et clair. 

Exemple de mes réalisations : 

Ancienne version

Nouvelle version

Identité des outils

Pour accompagner la refonte des interfaces, j’ai été chargée de refaire les icônes des outils de la chaîne Tethys. 

Les ordinateurs à l’afpa sont fournis avec un fond d’écran noir et j’ai remarqué que beaucoup de personnes le gardait de cette façon. En effet, garder un fond d’écran noir permet des économies de batterie et réduire l’exposition à la lumière bleue.

Pour ce faire, j’ai choisi de partir sur des couleurs vives qui marqueront un contraste avec le fond et seront ainsi plus visibles, elles seront plus facilement identifiables comme des outils de l’afpa par rapport aux autres applications présentes sur le bureau.  

J’ai retravaillé une ressource Adobe Stock, les lettres perdent leur pixels pour représenter le côté numérique qui est un symbole de renouveau comparé à la dernière version.  

Icônes de bureau

Splash screen

Hello Liam

Pour dynamiser la plateforme de formation mètis, j’ai été chargée de refaire le Chatbot qui était déjà présent. Le but était de créer un visage amical et rassurant. 

Liam, dont le nom est le résultat d’un grand sondage auprès des collègues est un personnage chaleureux et un peu espiègle. Son design est parti de la feuille qui orne le logo AFPA.