LNF Formations

Conception du dashboard – Les Nouvelles Formations

Mon rôle

UI/UX Designer

L'équipe

Thomas LE DEVENTEC (Project Manager) – Pierre Allary (Digital Marketing)

Outils

Adobe XD – Trello – Zoom

Date

Octobre 2021

Avis de non-responsabilité : En raison d'accords de non-divulgation avec LNF Formations, je suis limité dans la quantité de travail que je peux montrer.

Le projet

Conception d’une plateforme de formation certifiante à la Préparation Mentale qui est en effet : – La plus suivie en France pour apprendre la Préparation Mentale : plus de 4000 entraineurs et sportifs se sont déjà formés et certifiés auprès de LNF – Elle permet d’obtenir un Certificat en Préparation Mentale reconnu par l’État, valable sans limite de temps et pour tous les sports – Elle est utilisée et recommandée par les Fédérations, Ligues, ou Comités de quasiment tous les sports

Objectif

Mon objectif était de créer une interface utilisateur de recherche, de filtrage, de modification en bloc et de sauvegarde facile à naviguer et n’ajoutant pas trop à l’interface actuelle de LNF.

Challenge

– Simplifier le dashboard malgré la quantité énorme de données à afficher. Surtout dans le cas de l’affichage mobile.

– Chercher les meilleurs solutions pour guider au mieux l’utilisateur à travers de nombreuses et longues étapes de chaque process.

1- Recherche

Pour comprendre comment ces fonctionnalités marchent dans le monde réel, j’ai analysé comment certains leaders dans le design des tableaux ont résolu ce problème. J’ai décidé d’étudier les modèles d’interface utilisateur de Shopify, Notion.so et Facebook Ads Manager.

Ces produits partageaient un problème similaire: Leurs utilisateurs peuvent générer des centaines, voire des milliers de lignes de données, et auraient besoin d’un moyen d’afficher, de modifier et d’enregistrer rapidement des vues pour une utilisation future.

De mes recherches, j’ai retenu quelques éléments pour servir de principes directeurs à mon concept initial.

L’interface pour l’action doit être contenue dans le même espace général
Les actions d’édition en masse doivent être désactivées ou masquées avant que l’action peut être lancé. L’ordre des opérations nécessite que l’utilisateur sélectionne avant de pouvoir modifier

2- Sketching

Avant de passer à Adobe XD, j’ai passé quelques heures à sketcher les différents organismes de mon interface utilisateur. Cela m’aiderait à avoir des retours rapides de la part des parties prenantes du projet et à gagner du temps dans la phase de conception de l’UI.

💡 Au cours de ce projet, je me suis retrouvé à devoir croiser un grand nombre de d’essais avant de me lancer dans Adobe XD. Je voulais m’assurer de bien comprendre mon les enjeux de l’expérience utilisateur avant d’utiliser la bibliothèque de composants et le design system que LNF avait déjà construit.

3- Mockups, itérations, et feedbacks

Après avoir passé presque deux semaines sur la conception des wireframes, optimisation des parcours utilisateurs, et raffiner le user flow global, il est temps d’attaquer les mockups interactifs sur Adobe XD 😊

Résultat

Après de nombreuses rencontres avec mon co-designer, nous avons pu combiner nos designs et trouver un terrain d’entente entre les visions de chacun de nous. C’est à ce moment-là que nous avons programmé plusieurs réunions avec les parties prenantes pour obtenir leurs commentaires.

Les retours des parties prenantes étant plutôt positifs, nous avons réussi à faire le hand-off aux développeurs au bout de 3 jours afin d’entamer le cycle final avant la publication de la V2 de la plateforme..

Envoi Motivation – Etape 3 Etape Notifications

Remplissage Motivation – Etape 2 Questionnaire

Remplissage Motivation – Etape 7 Rapport

Remplissage Routines – Etape 4 Activation

Bien que cela n’était pas problématique en soi, cela m’a cependant demandé beaucoup de discipline pour ne pas essayer de réinventer la roue. Parfois, résoudre les problèmes des utilisateurs est beaucoup plus simple que nous ne le pensons.. 😉