Le projet
Dans le cadre de ma formation en UI design, j’ai conçu un design system pour une application mobile dédiée aux cours de musique. L’objectif de cette application est de mettre en relation des apprenants et des mentors passionnés, en plaçant l’humain au cœur de l’expérience autour de la musique et des rencontres. Je souhaitais, à travers cette application, promouvoir des valeurs d’authenticité, d’inclusivité, d’empathie et de positivité.
Objectifs du design system
Garantir la cohérence visuelle et fonctionnelle à travers l’ensemble de l’application.
Accélérer le processus de conception et de développement en fournissant une bibliothèque centralisée d’éléments réutilisables.
Faciliter la communication entre designers et développeurs grâce à une documentation claire et structurée.
Définir précisément les usages et les limites de chaque composant via des exemples de bonnes et mauvaises pratiques (Do’s et Don’t’s).
Processus et réalisation
Le projet s’est articulé autour de la création de composants et de maquettes graphiques détaillées pour le parcours d’inscription, depuis l’écran d’accueil jusqu’au message de confirmation. Chaque étape du parcours utilisateur a été explicitée grâce à des indications sur les différents états possibles des boutons et champs de formulaire, afin de rendre l’expérience la plus intuitive et compréhensible possible.
En parallèle, j’ai développé un Kit UI regroupant tous les éléments de l’identité graphique, incluant :
Les palettes de couleurs : choisies pour refléter la chaleur et l’harmonie associées à la musique.
Les typographies : définies pour assurer une lisibilité optimale et renforcer le ton de communication.
Les boutons et champs de formulaire : avec leurs variantes d’états (normal, survol, actif, désactivé) pour couvrir tous les scénarios d’interaction.
Les icônes et la barre de progression : conçues pour guider l’utilisateur tout au long de son inscription.
La documentation du design system a été élaborée en deux espaces distincts mais interconnectés : une section destinée aux designers, détaillant l’usage et les variations de chaque élément, et une section pour les développeurs, incluant le code correspondant. Cette documentation inclut également des exemples illustrant les bonnes et mauvaises utilisations afin de bien cadrer les possibilités et les limites de chaque composant.
Éléments clés traités
Le Tone of Voice : définition du ton de la communication pour renforcer l’expérience humaine et chaleureuse de l’application.
Les palettes de couleurs et typographies : pour assurer une identité visuelle cohérente et attrayante.
Les boutons, icônes, barre de progression et champs de formulaire : chaque composant a été détaillé en termes de fonctions, propriétés, variantes et utilisations.
Ce design system, centré sur le parcours d’inscription, a permis de créer une base solide pour une application mobile intuitive et engageante, en harmonisant l’expérience utilisateur avec une identité graphique forte et en facilitant la collaboration entre les équipes de conception et de développement.
