Skilleos E-learning

Contexte

Skilleos est une plateforme en ligne dédiée à la formation et l’apprentissage dans divers domaines tels que le développement personnel, les compétences numériques, le business et les loisirs créatifs. Elle propose des cours interactifs accessibles à tous, de manière flexible et à distance, avec un large catalogue de formations. J’ai rejoint Skilleos pour occuper le poste de principal UI Designer et responsable Design System. Ma mission consistait en majorité à structurer et optimiser la livraison des produits numériques design à travers la mise en place d’un Design System. Ce projet visait à harmoniser les différentes interfaces (webapp et app mobile) en raison d’un rebranding et ainsi améliorer l’expérience des utilisateurs sur la plateforme. L’équipe Produit était composée de deux Product Owner, un UX Designer, une CPO. De plus, on comptait une dizaine de développeurs (back, front, mobile) avec une CTO. C’est un environnement de travail assez mature en terme de culture produit, où l’on travaillait en Scrum.

Audit

Afin de qualifier au mieux le besoin il a fallu se pencher sur 3 axes :

Créer un Design System

Comme le délai de déploiement du rebranding était relativement court, il a fallu réfléchir et avancer de la manière la plus efficace possible, afin de pouvoir mettre en place une librairie et d’en parallèle créer les écrans des interfaces avec ces nouveaux éléments. Pour cela il a fallu prioriser chaque étape de la création d’un Design System. On s’est donc rendu à l’évidence que pour pouvoir utiliser les composants le plus rapidement possible il fallait créer un UI Kit avec une documentation qui viendrait dans un second temps. Afin de réaliser au mieux ce UI Kit, nous avons fait plusieurs ateliers avec l’équipe Tech et/ou Produit pour déterminer plusieurs points clés tels que : les nomenclatures (composants et propriétés de ceux-ci), pour avoir une cohérence entre les deux parties (design et tech) le tone of voice, qui a une importance capitale dans la transcription des messages que nous souhaitions porter la liste des composants prioritaires (priority guide) les règles d’accessibilité à mettre en place non existantes à ce moment là

Mise en place du UI Kit

Le UI Kit a été pensé en atomic design pour garantir une structure modulaire et réutilisable, facilitant la cohérence visuelle, la maintenance et l’évolution du projet tout en optimisant le travail collaboratif entre designers et développeurs. Le respect et l’application des règles d’accessibilité pour ces composants était pour nous évident et indispensable en raison de la cible des plateformes ainsi que de l’audit prévu. Avant de créer chaque composant précédemment listés et priorisés, il a fallu créer et documenter les différents design tokens (couleurs, typographies, logos, icônes, breakpoints, shadows ...). Pour les icônes, nous avons choisi Font Awesome, comme solution, qui nous ferait gagner un temps précieux.

Turquoise

La couleur principale est le turquoise qui doit être utilisé pour représenter la marque Skilleos au travers de son logotype, des formes blocs, boutons) ou en aplat. Il représente le renouveau et l’évolution, dans une dimension rafraîchissante et lumineuse.

À éviter : En web, ne pas utiliser cette couleur pour les textes couplés à du blanc ou des couleurs claires. Cette couleur ne doit pas être utilisée pour les textes exigeants une parfaite lisibilité comme sur le site internet. Elle peut-être conservée sur d’autres supports pour des mots courts, en capital et en grande taille où la lisibilité reste bonne.

Gris

Le gris est une couleur d’appui lumineuse à utiliser en fond ou dans des formes de bloc permettant d’apporter du rythme et de la hiérarchie dans les informations en plus du fond blanc utilisé par défaut.

À éviter : Cette couleur ne doit pas être utilisée pour les textes.

Marine

Le marine est une couleur d’appui à utiliser par défaut pour tous les textes afin de garantir une parfaite lisibilité sur fond blanc, sur fond turquoise et sur fond gris, ou sur les couleurs secondaires. Elle pourra plus exceptionnellement être utilisée en fond pour permettre à des visuels d’être plus immersifs ou améliorer la lisibilité des couleurs secondaires dans certains cas jugés nécessaires.

Master Design System (Figma)↗ (nouvel onglet)

Une fois les design tokens en place, nous avons commencé la création des atomes, molécules et organismes afin de pouvoir créer les maquettes pour le rebranding. Pour chaque composant, il a fallu penser à tous les états de ceux-ci (hover, clicked...) et les différentes versions responsives et adaptatives. Tous les composants nécessitant des animations ont été prototypés afin de gagner du temps lors de l’élaboration des maquettes puisque les prototypes de ces éléments n’étaient pas à refaire à chaque fois. Pour chaque page, un encart avec plusieurs mots-clés pouvant correspondre aux composants a été implémenté pour nous permettre de chercher plus facilement les composants dans le fichier. Une fois tout cela fait nous avons travaillé en collaboration avec l’UX Designer, sur la rédaction des spécifications de chaque composant, en expliquant les bonnes pratiques et les interdits par exemple sur Zeroheight.

UI Kit WebApp (Figma)↗ (nouvel onglet)

Design Ops

Par ailleurs, le fonctionnement des fichiers Figma n’était auparavant pas optimal, et devenait très complexe sur la gestion des archives. Nous avons donc fait un atelier afin de définir quelle pouvait être la meilleure manière de découper les fichiers afin de répondre au mieux aux besoins des équipes tech, fonctionnelle et design. En parallèle, nous trouvions pertinent de créer un fichier “sources” qui nous permettait de gérer et maintenir les dernières maquettes à jour de tous les écrans sur un seul et même fichiers. Ce qui engendrait que dès lors qu’une nouvelle US devait être traitée/designée nous pouvions nous baser sur ces maquettes pour ne pas rencontrer de conflits au niveau du versioning de celle-ci.

Conclusion

En définitive, la mise en place de ce Design System en respectant les critères d’accessibilité a découlé d’un résultat de conformité de 100 % lors de l’audit Ara. De plus, le retravail du fonctionnement des fichiers Figma, a permis une meilleure communication entre les différentes parties prenantes, puisque dans un premier temps, le retravail des covers a joué un rôle clé dans la compréhension des informations sur chaque US et dans le regroupement de ces informations. Le rebranding a pu être totalement déployé sur l’ensemble de la web app en seulement 5 mois.