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
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..
No Images Found!
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.. 😉
Autres projets
- Non classé
Game Passport Refonte de la plateforme web de jeux “Games Passport” Mon rôle UX Designer L’équipe Virginie Favella (Customer experience…