Aller au contenu principal
Porte 7
Références

Formee

Une plateforme de formation pour trois publics. On l'a repensée en ateliers, dessinée écran par écran, puis intégrée.

  • Web application
L'écran de connexion de Formee maquetté par Porte 7, sur un ordinateur portable : une formation mise en avant à gauche, le formulaire e-mail et mot de passe à droite.

Trois publics, une seule plateforme, et des gens qui doivent avoir envie d'y revenir.

Le défi

Formee réunit organismes de formation, entreprises et collaborateurs, en présentiel, en ligne ou en blended. L'interface devait servir les trois sans que chacun se perde dans les outils des autres, et donner envie d'aller au bout d'une formation.

Notre parti pris

Deux espaces bien séparés, un seul langage visuel, tiré de l'identité de Formee. Et un jeu discret : des crédits pour s'inscrire, des points pour chaque quiz, un classement pour ceux qui s'accrochent.

Ce que nous avons livré

  • Ateliers de co-conception
  • Architecture fonctionnelle
  • Cahier des charges technique
  • Refonte complète de l'UX/UI
  • Composants UI
  • Intégration front

Avant le premier écran, trois livrables.

Les maquettes arrivent en quatrième. Ce qui les précède décide de ce qu'elles contiennent.

  1. Écouter

    Ateliers de co-conception

    Avec l'équipe Formee, autour de la table : qui sont les trois publics, ce que chacun vient faire, ce qui le ferait revenir.

    Les parcours de chaque public

  2. Ranger

    Architecture fonctionnelle

    Deux espaces, un menu chacun, et la liste des écrans qu'il faut vraiment. Tout ce qui n'a pas trouvé sa place a attendu.

    L'arborescence des deux espaces

  3. Écrire

    Cahier des charges technique

    Co-rédigé avec Formee, écran par écran. C'est lui qui fait foi entre le design, le front et l'équipe back.

    Le cahier des charges

  4. Dessiner

    Maquettes et composants UI

    Chaque écran des deux espaces, et les composants qui les fabriquent : carte formation, pastilles de modalité, jauge de difficulté.

    Les maquettes et la bibliothèque de composants

  5. Construire

    Intégration front

    Les écrans maquettés, développés côté front. Les mêmes composants, cette fois dans le navigateur.

    Le front de la plateforme

Deux espaces, deux menus.

L'architecture sortie des ateliers, telle qu'elle a été maquettée. Changez d'espace, puis d'écran.

Catalogue des formations : filtres par catégorie en pastilles, raccourcis « En cours » et « Ma liste », une formation mise en avant à -50 %, puis la rangée « Les plus suivies du moment ».
  • Les catégories de la vitrine deviennent des filtres en pastilles, en haut, sans menu déroulant.
  • « En cours » et « Ma liste » restent à un clic, avec leur compteur : on reprend là où on s'est arrêté.
  • Le solde de crédits est affiché en haut de chaque écran, à côté du profil.

Une carte, cinq décisions.

La carte formation est le composant qui revient partout. Reconstruite ici en code, telle qu'on l'a définie.

PrésentielAssurance

Assure comme un pro

20 crédits

Organisme de formation 5.0 ★

Formation DDA, certifiante

  • 10 étapes 20 h 1620

Un barème qui tient en une ligne.

La gamification demandée par Formee, on l'a voulue lisible avant d'être ludique. Participer rapporte autant qu'une bonne réponse : ouvrir un quiz ne coûte jamais rien.

Le trajet des points sur trois écrans : quiz du jour à gauche, wall of fame du dashboard au centre, profils avec leurs points dans la CV-thèque à droite.

  1. Quiz

    Le quiz du jour affiche son barème à côté du bouton « Démarrer ». Pas de règle cachée.

  2. Dashboard

    Les points s'additionnent et placent l'apprenant dans le wall of fame, entre collègues.

  3. CV-thèque

    Les points suivent le profil jusque dans la CV-thèque, où les entreprises cherchent leurs recrues.

De la vitrine à la connexion, le même dessin.

Maquette de l'accueil public de Formee : le titre « We are online courses » en violet, les cinq catégories numérotées (assurance, banque, finance, immobilier, comptabilité), puis les dernières formations en cartes.

La vitrine publique présente le catalogue avec les mêmes catégories, les mêmes pictogrammes et les mêmes cartes que la plateforme. Celui qui s'inscrit retrouve dedans ce qu'il a vu dehors.

L'écran de connexion, en tête de page, suit la même idée : il met déjà une formation en avant. On n'attend pas d'être connecté pour donner envie.