Contexte
Lors de ma prise de poste chez Yescapa, il n'y avait pas de Design System. D'autre part, tout était fait sur Sketch. J'ai donc réalisé le Design System (Web, iOs, Android) sur Figma. Une première passe avait été fait au premier semestre 2022. Lors de la refonte de l'identité visuelle, il a fallu reprendre les fondations du design system (couleurs, typographies, logos et déclinaisons), ainsi que les composants, vous trouverez ici un extrait, non-exhaustif du travail qui a été effectué et continue à être mis à jour au jour le jour.
Rôle
J’ai été la designer principale de la création du Design system chez Yescapa.
Objectifs
La création du Design system, avait et a pour vocation de répondre à plusieurs objectifs :
- Migration de sketch à Figma
- Facilité le design de nouvelles features
- Factoriser les composants et éviter une variabilité trop importante
- Facilité le design de nouvelles features
- Factoriser les composants et éviter une variabilité trop importante
Implémenter les éléments de design en assurant une cohérence à travers les différents outils graphiques
Phase 1
La première étape s’est déroulée au premier trimestre 2022.
Comme je l’ai dit plus haut, à ma prise de poste le lead designer travaillait sur sketch. Cela faisait plusieurs années que je travaillais sur Figma. Ca semblait donc cohérent d’effectuer la migration à mon arrivée.
La mission de débuter le Design System arrivait à point nommée, cela allait me permettre de me familiariser avec le produit. Le choix de débuter ce gros projet sur Figma faisait également sens, comme de nombreux designer, force était de constater que Figma était un outil bien plus adapté que sketch pour cela.
Dans cette première phase ont été réalisés :
- La mise à plat du system typographique afin de le normaliser
- La définition de palettes de couleurs basé sur Tailwind
- La création des composants basiques (input, search, toge, alerts etc.)
- La définition de palettes de couleurs basé sur Tailwind
- La création des composants basiques (input, search, toge, alerts etc.)
Phase 2
A partir du Deuxième trimestre 2022, la refonte du logo de Yescapa avait abouti. Il était alors temps d’adapter les composants existants et surtout travailler sur la typographie et les couleurs.
Sur le travail effectué par l’agence, nous avons pour de nombreuses raisons décidé de ne garder que le rose, le bleu et le logo.
Pour le choix de la typographie nous sommes partis sur la Sofia Pro, son dessin géométrique et son élégance nous ont convaincus. En effet, elle permettait d’apporter un côté ludique tout en ayant une certaine assise pour assoir la marque et rassurer nos users.
Après avoir longuement travailler, les tailles de typographies, l’interlettrage, l’interlignage. Nous nous sommes aperçus de glitch visuel lorsque la typographie était intégré à l’app web. Suite à une mûre réflexion, nous avons décidé d’abandonner la Sofia Pro au profit de la Lexend. Cela permettait d’assurer un affichage constant et uniforme qui ne nécessiterait pas de surcharger le front.
Bien que ce fut un choix que nous ne regrettons pas aujourd’hui, il nous a nécessité de refaire le travail une deuxième fois.
Leçon tirée : faire tester les typographies par les développeurs en début de projet !
Les typographies apps sont les typographies system, pour un soucis de simplicité et d’uniformisation lors de l’utilisation de composant natifs.
Pour les couleurs, nous avons du retravailler le rose et le bleu afin d’en faire des palettes, pour pouvoir utiliser les couleurs de marque dans le travail d’interface.
Pour les couleurs, nous avons du retravailler le rose et le bleu afin d’en faire des palettes, pour pouvoir utiliser les couleurs de marque dans le travail d’interface.
Phase 3
Après avoir utilisé le design system pendant un an, nous avons pu en tester les limites et également se rendre compte de nos besoins réels.
Chez Yescapa, la vérité se trouve souvent du côté de la prod, la majorité des composants qui avait été fait ne sont pas utilisés. En ce début d’année 2024, nous reprenons les composants existants pour les élaguer et créer des composants plus macro afin d’être au plus proche de nos usages.
to be continued ...
to be continued ...
