Travaux › E-learning Content Manager
Role
Timeline
Lead Designer
2016
Contexte
Une client lourd vieillissant
Lorsque je suis arrivé chez e-doceo en 2013, il n'existait aucun pôle UI ou UX. Le développeurs étaient livrés à eux-même pour tous les choix de design et faisaient parfois appel aux graphistes d'un autre service pour produire les éléments visuels dont ils avaient besoins dans les interfaces des logiciels.
En 2016, j'ai rejoint la R&D de la Business Unit "Learning" en tant que premier UI/UX tandis que le modèle économique de l'entreprise évoluait de la vente de logiciels physiques vers du SaaS. Il fallu donc repenser l'usage des produits pour les adapter aux contraintes du web.
↑ Ci-dessus : Le client historique (à gauche) présentait une interface chargée et complexe nécessitant de former les utilisateurs par le biais de vidéo ou de formations en présentiel. Le même module (à droite) repensé pour le web en 2016 avec des fonctionnalités identiques tout en facilitant la compréhension de l'écran et l'apprentissage autonome.
Réinventer l'interface et l'expérience utilisateur
Simplifier le produit en conservant toutes ses fonctionnalités
Le défi principal de cette mission était de transposer les nombreuses fonctionnalités qui existaient sur le client lourd dans une page web, avec une interface aussi légère que possible en surface, tout proposant des options pour conserver l'accès aux fonctionnalités les plus avancées utilisées uniquement par les utilisateurs les plus experts.
L'outil d'origine étant composé de 7 onglets distincts dans lesquels étaient réparties les différentes fonctionnalités, il était impensable de simplement le reproduire à l'identique. Par ailleurs, certains onglets ne nécessitaient pas d'y consacrer un écran dédié et pouvaient ainsi s'intégrer dans une vue globale.
Mes recherches se sont donc axées autour de l'idée d'une page unique avec un systèmes de « tiroirs » permettant de ranger les options les plus spécifiques dans des sections pouvant être affichées ou masquées à volonté, tout en conservant les fonctionnalités les plus courantes accessibles en un clic.
↑ Ci-dessus : Les « Toggle Boxes » permettent d'accéder à des options facultatives mais indispensables pour les clients souhaitant pousser la conception de leurs contenus de formation. Elles peuvent être cumulées, et même être ouvertes par défaut grâce à un "mode Expert" actionnable dans les options de l'outil, en haut à droite.
Tout au même endroit
L'idéation de nouvelles ergonomies intuitives
Outre la redistribution des fonctionnalités dans l'écran, la démarche de faciliter la prise en main de l'outil a nécessité des recherches pour créer de nouvelles façons d'interagir avec l'interface. C'est ainsi que nous avons développé les actions flottantes situées sur le coté droit des sections. L'utilisateur dispose ainsi toujours des actions lui permettant d'insérer de nouvelles sections à l'endroit de son choix. En effet, la barre latérale se repositionne dynamiquement de telle façon à toujours se focaliser sur l'élément le plus en vue dans l'écran.
↑ Ci-dessus : Les actions pour insérer des sections se positionnent en début, fin ou entre d'autres sections, tandis que les actions pour interagir avec une section déjà présente se déplacent de bloc en bloc au gré de la navigation ou du focus de l'utilisateur.