Headspace crée son design system en toute sérénité

Dans un monde où le stress est omniprésent, Headspace offre une parenthèse nécessaire à ses utilisateurs. Grâce à son application star, la méditation et ses bienfaits sur la santé mentale, le sommeil et le bien-être sont à portée de main.

Headspace met à disposition la plateforme de santé mentale la plus complète au monde. L’entreprise opère dans le secteur millénaire du bien-être, qui a connu une croissance explosive ces dernières années. De 2012 à 2017, le nombre de personnes qui méditent aux États-Unis a triplé, tandis que la valorisation du secteur devrait être multipliée par six au cours des dix prochaines années.

Fini le temps où la méditation était réservée aux fans du film Eat, Pray, Love ayant jeté leur smartphone aux orties pour passer cinq ans à méditer dans un coin perdu. Avec Headspace, la méditation et la santé mentale deviennent accessibles à tous. La demande ne cesse d’augmenter, tout comme l’activité de Headspace. Figma aide l’entreprise à ne pas se laisser déborder par cette croissance avec un design system conçu pour être mis à l’échelle.

Construire un design system pérenne

Via de solides partenariats avec des marques comme Starbucks, Netflix, Nike et Star Wars, ainsi que des produits disponibles via l’application, le prêt-à-porter connecté, et plus récemment la VR, Headspace a créé la meilleure gamme d’outils de méditation, prisée par plus de 100 millions de membres à travers le monde. Et avec autant de points de contact, le design system de Headspace est essentiel pour définir et conserver son image de marque, sur écran et ailleurs. Cependant, cette croissance rapide a mis en lumière un manque d’efficience du design system. Créé manuellement, fortement dépendant de plugins et non optimisé pour la mise à l’échelle, il empêchait les équipes design et développement d’avoir une unique source de vérité à laquelle se fier.

Bien qu’il ait été créé dans Figma, l’ancien design system de Headspace ne tirait pas parti des fonctionnalités avancées qui peuvent optimiser les workflows. Les couleurs étaient notamment codées en dur, ce qui engendrait de nombreuses variations du code hexadécimal et une expérience utilisateur incohérente. Même des changements mineurs dans la palette de couleurs prenaient du temps, et accomplir ces tâches simples pouvait prendre des heures, voire des jours.

Bien que les plugins aient constitué une réponse provisoire pour débloquer davantage de cas d'utilisation, ils n'étaient pas aussi souples et intuitifs qu'une solution intégrée. Certains plugins exigeaient un apprentissage plus poussé pour les designers qui ne les utilisaient pas quotidiennement, ou nécessitaient une réinitialisation à chaque fois qu'ils ajustaient les styles de couleurs dans Figma.

En 2021, une fusion avec Ginger, société de santé mentale virtuelle rebaptisée depuis Headspace Care, a été annoncée. Pour Steven Sczepanik, senior product designer préposé aux design systems chez Headspace, il ne suffisait pas de pallier le manque d’efficacité existant, il fallait aussi préparer le design system pour la fusion à venir, mais aussi pour tous les partenariats futurs. Steven se souvient : « Le jour où je suis arrivé, nous avons été mis au courant de la fusion avec Ginger. Il a donc fallu passer d'un design system mono-marque à un design system multi-marques. »

Après un audit du design system, Steven a recréé des composants et des modèles afin qu’ils soient tous répertoriés et plus faciles à référencer pour les designers et les développeurs, créant ainsi le premier token system de Headspace.

Booster le design system avec les variables

Avant d'adopter les variables, Steven avait eu recours à toute une série de plugins pour rationaliser ses workflows. Bien qu'il ait passé deux ans à construire son design system actuel, il n'a fallu qu'une journée à Steven pour mettre en œuvre les variables. Il se souvient de leur lancement lors de Config 2023 : « La présentation des variables m'a enchanté. Le lendemain de Config, j'ai ouvert mon ordinateur portable, j’ai converti tous les tokens de couleurs et de typographie en variables, tout ça en une journée. Cela démontre à quel point les variables sont intuitives et efficaces. »

En général, comme les gens utilisent Headspace pour améliorer leur sommeil, il est impératif de proposer un mode sombre. Grâce aux variables, Headspace peut mettre en œuvre et appliquer les valeurs de couleur pour les modes clair et foncé en une minute au lieu d'une heure. Ainsi, Headspace est devenu accessible aussi bien aux oiseaux de nuit qu'aux lève-tôt.

Pour Steven, ce gain de temps a changé la donne : « Les variables nous ont été très utiles. Séparer ces tokens en différents modes se fait très facilement, et cela fonctionne presque instantanément. Notre équipe a gagné beaucoup de temps. »

En moyenne 85 % d'un fichier de design unique est constitué de tokens et de composants provenant du design system de Headspace. Cette utilisation poussée des tokens et des variables a permis un gain de temps de 20 à 30 % pour les tâches les plus simples, et jusqu'à 50 % pour les projets les plus complexes.

Headspace s'adressant à un public international, son application est actuellement disponible en cinq langues : anglais, français, allemand, espagnol et portugais. En utilisant les variables, Headspace peut rapidement créer des designs pour le marketing et les écrans de l'application, ce qui lui permet d'atteindre facilement un public plus large en quelques minutes.

Prendre le temps… et en gagner

Avant l’arrivée des variables dans Figma, la création du design system de Headspace avait demandé de nombreuses opérations manuelles, et il était sujet à des interprétations erronées et des modifications involontaires. Il nécessitait également des corrections chronophages. Steven se souvient du jour où il a créé la première itération du token system : « Avant, je créais une page exhaustive pour le mode clair et le mode sombre, en saisissant tous les détails dans un seul fichier. Si cette méthode a été indispensable pour mettre en place les bases, elle était source d'erreurs, notamment lorsque les développeurs mélangeaient les tokens. Le passage aux variables intégrées a tout rassemblé en un point unique et fonctionnel. »

Suite à la fusion avec Ginger, les membres de Headspace peuvent accéder à des outils de pleine conscience, de coaching et de thérapie sur une seule et même plateforme, mais également accéder à des soins de santé mentale plus personnalisés. Figma permet à Headspace de présenter de nouveaux services de santé au sein de l’application existante via l’onglet Care, sans perturber ses membres. Pour intégrer harmonieusement les deux marques et mettre en place une expérience utilisateur unifiée, ce projet a nécessité de répertorier tous les écrans, maquettes et variables de composants hérités de Ginger, et de faire équipe avec l’équipe brand pour mettre en cohérence l’existant avec la marque Headspace. Tout au long de ce processus, Steve a utilisé la fonctionnalité multi-bibliothèques de Figma et les variables afin de développer rapidement un design system local pour l’onglet à venir. En fin de compte, la deadline de finalisation du code a été plus que respectée, puisque la mission a été remplie deux mois en avance.

Au final, le design system de Headspace sert de source unique de vérité. Depuis l’implémentation des variables et d’autres fonctionnalités de Figma telles que Dev Mode, le design system est plus accessible aux développeurs, ce que prouve l'augmentation de leur engagement. Chacun peut ouvrir un fichier Figma et commencer à travailler : « Que ce soit pour l’utilisation de valeurs primitives pour les couleurs, les espacements, les tokens de dimensionnement ou même les rayons de bordure, les variables se sont avérées très précieuses pour le processus de création de composants. Elles garantissent un référencement précis de tokens spécifiques et facilitent l’accès aux développeurs grâce à Dev Mode. » Nick Hayward, développeur iOS senior chez Headspace, estime que le nouveau design system a accéléré le cycle de mise à jour des produits de 30 %.

Grâce aux fonctionnalités avancées de Figma, le design system de Headspace est optimisé pour rationaliser les workflows et augmenter la précision du développement. De quoi rendre la méditation accessible à ses membres, en toute sérénité !