Ein Design-System, das mit Headspace atmet

In der heutigen, von Stress geprägten Welt bietet Headspace mit seiner Flagship-App eine dringend benötigte Pause. Meditation und ihre Vorteile für die psychische Gesundheit, Schlaf und Glück sind nur noch einen Atemzug entfernt.

Als Anbieter der weltweit umfassendsten digitalen Plattform für psychische Gesundheit ist Headspace in einer jahrtausendealten Branche tätig, die ein explosives Wachstum erlebt hat. Von 2012 bis 2017 hat sich die Anzahl der Menschen, die meditieren, in den USA verdreifacht. Für das kommende Jahrzehnt wird ein Branchenwachstum um das Sechsfache erwartet.

Kurz gesagt: Die Zeiten, in denen Meditation nur was für „Eat, Pray, Love“-Fans war, die Technologie auf ihrem fünfjährigen Sabbatical in abgelegenen Winkeln der Welt völlig hinter sich lassen, sind längst vorbei. Mit Headspace sind Meditation und Unterstützung für die psychische Gesundheit für jeden zugänglich geworden. Und genau wie der Markt zeigt Headspace keine Anzeichen einer Verlangsamung. Figma ermöglicht Headspace dank einem skalierbaren Design-System, mit dem Wachstum Schritt zu halten.

Ein Design-System fit für die Zukunft

Durch die Etablierung starker Partnerschaften mit namhaften Marken wie Starbucks, Netflix, Nike und Star Wars sowie durch ein vielfältiges Produktangebot, das Apps, Wearables und neuerdings auch VR-Technologien umfasst, hat Headspace hochwertige Meditationstools entwickelt, die weltweit mehr als 100 Millionen Mitgliedern zugutekommen. Diese umfangreichen Berührungspunkte machen das Design-System von Headspace zu einem Schlüsselelement, um die einzigartige Markenidentität sowohl digital als auch physisch zu prägen und zu bewahren. Allerdings hat das schnelle Wachstum auch Schwächen im bestehenden Design-System offenbart. Das war nämlich überwiegend manuell, abhängig von zahlreichen Plug-ins und nicht auf Skalierung ausgelegt – was Design- und Entwicklungsteams daran hinderte, eine verlässliche und konsistente Informationsquelle zu nutzen.

Obwohl Headspace sein vorheriges Design-System auf Figma aufbaute, schöpfte es die fortschrittlichen Funktionen der Plattform, die Teamarbeitsabläufe effizienter gestalten könnten, nicht vollständig aus. Beispielsweise wurden Farben als feste Werte hinterlegt, was zu einer Vielfalt an Hex-Code-Varianten und damit zu einer inkonsistenten Nutzererfahrung führte. Selbst geringfügige Anpassungen in der Farbpalette erwiesen sich als zeitraubend: Ein aus einer Person bestehendes Design-System-Team kann Stunden oder gar Tage für diese scheinbar simplen Aufgaben aufwenden.

Plugins boten zwar eine schnelle Lösung, um die Anwendungsmöglichkeiten für Headspace zu erweitern, aber sie waren nicht so nahtlos und intuitiv wie eine native Lösung. Einige Plugins stellten besonders für Designer*innen, die sie nicht regelmäßig nutzten, aufgrund ihrer steilen erforderlichen Lernkurve eine Herausforderung dar. Oder sie erforderten eine Neukonfiguration bei jeder Anpassung der Farbstile in Figma.

Die 2021 angekündigte Fusion mit dem virtuellen Gesundheitsdienstleister Ginger, der mittlerweile in Headspace Care umbenannt wurde, stellte für Steven Sczepanik, den leitenden Produktdesigner für Design-Systeme bei Headspace, eine doppelte Herausforderung dar: Er musste nicht nur die bestehenden Ineffizienzen adressieren, sondern auch das System auf die bevorstehende Integration und weitere zukünftige Partnerschaften vorbereiten. „Am ersten Tag meiner Tätigkeit im Unternehmen erhielten wir die Nachricht über die Fusion mit Ginger. Das veranlasste uns, unser Design-System von einem auf eine einzige Marke ausgerichteten zu einem System weiterzuentwickeln, das mehrere Marken unterstützen kann“, erinnert sich Steven.

Nachdem er das bestehende System überprüft hatte, baute Steven die Komponenten und Muster so um, dass sie vollständig berücksichtigt wurden und für Designer*innen und Entwickler*innen leichter zu finden waren, und schuf das erste Token-System von Headspace.

Die Bereicherung des Design-Systems mit Variablen

Vor der Einführung von Variablen hatte Steven eine Reihe von Plugins genutzt, um seine Arbeitsabläufe zu optimieren. Trotz der zwei Jahre, die er in die Entwicklung seines bisherigen Systems investiert hatte, gelang es Steven, die Variablen innerhalb eines einzigen Tages zu implementieren. Rückblickend auf die Config 2023, wo die Variablen vorgestellt wurden, beschreibt er dieses Update als entscheidenden Moment: „Die Vorstellung von Variablen war Musik in meinen Ohren. Gleich am nächsten Tag öffnete ich meinen Laptop, integrierte alle meine Farbsystem-Tokens und Typografien als Variablen und hatte das Ganze innerhalb eines Tages umgesetzt. In weniger als einem Monat konnten wir diese Änderungen erfolgreich an unser Design- und Entwicklerteam weitergeben. Das zeigt, wie intuitiv und wirkungsvoll der Einsatz von Variablen ist.“

Besserer Schlaf ist einer der Hauptgründe, warum Menschen Headspace nutzen. Deswegen ist ein hochfunktionaler Dunkelmodus notwendig. Durch die Einführung von Variablen hat sich die Methode, mit der Headspace Farbwerte für den Hell- und Dunkelmodus implementiert und verwaltet, grundlegend gewandelt. Ein zuvor stundenlanger Prozess wird auf eine Minute reduziert. Das macht Headspace für Nachtschwärmer und Frühaufsteher gleichermaßen zugänglich.

Für Steven brachte die Zeitersparnis einen enormen Vorteil: „Ich kann gar nicht genug betonen, wie hilfreich die Verwendung von Variablen für unsere Teams ist. Es ist ganz einfach, diese Token auf verschiedene Modi anzuwenden, und die Ergebnisse erscheinen nahezu augenblicklich. Das hat zu einer erheblichen Zeitersparnis für unser gesamtes Team geführt.“

Bei Headspace bestehen durchschnittlich 85 % einer einzelnen Design-Datei aus Tokens und Komponenten, die aus dem Design-System stammen. Diese intensive Verwendung von Tokens und Variablen hat die Bearbeitungszeit für einfachere Aufgaben um 20-30 % und für komplexere Projekte sogar um bis zu 50 % reduziert.

Angesichts der globalen Reichweite von Headspace ist die App aktuell in fünf Sprachen verfügbar: Englisch, Französisch, Deutsch, Spanisch und Portugiesisch. Mithilfe von Variablen kann Headspace schnell Marketing- und App-Screendesigns erstellen und so innerhalb weniger Minuten ein breiteres Publikum erreichen.

Tief durchatmen mit Figma

Vor der Einführung von Variablen in Figma war das Design-System von Headspace nicht nur mühsam manuell zu verwalten, sondern auch anfällig für Fehlinterpretationen, unbeabsichtigte Änderungen und zeitraubende Korrekturen. Steven erinnert sich an die Anfänge des Token-Systems: „Ich habe für den Hell- und Dunkelmodus jeweils ein umfassendes Dokument erstellt und jedes Detail manuell in eine einzige Datei eingetragen. Diese Methode war zwar notwendig, um eine Basis zu schaffen, führte aber häufig zu Verwirrungen bei den Entwickler*innen, die die Tokens verschiedentlich fehlinterpretierten. Der Wechsel zu integrierten Variablen hat den gesamten Prozess in einen bequemen One-Stop-Shop verwandelt.“

Mit der Fusion mit Ginger bietet Headspace seinen Mitgliedern nun Zugang zu einem umfassenden Angebot aus Achtsamkeits-Tools, Coaching und Therapie über eine einzige Plattform, wodurch eine persönlich zugeschnittene psychologische Betreuung ermöglicht wird. Figma spielt eine Schlüsselrolle dabei, die zusätzlichen Gesundheitsdienste nahtlos in die bestehende App zu integrieren – speziell durch das neue „Care“-Tab, ohne die Nutzererfahrung zu unterbrechen. Um eine nahtlose Integration beider Marken und eine einheitliche Benutzeroberfläche zu gewährleisten, waren die umfassende Katalogisierung alter Bildschirme, Layouts und Komponentenvariablen von Ginger sowie die Anpassung bestehender Grafiken an die Headspace-Marke in Zusammenarbeit mit dem Brand Team erforderlich. Durch die Nutzung der Multibibliotheksfunktion und der Variablen in Figma konnte Steven in kürzester Zeit ein angepasstes Design-System für die neue Registerkarte entwickeln, wodurch der Termin für die Fertigstellung des Codes um zwei Monate vorgezogen werden konnte.

Das Design-System von Headspace hat sich schließlich zu einer zentralen Informationsquelle entwickelt. Seit der Einführung von Variablen und anderen neuen Figma-Funktionen wie dem Dev Mode ist das Design-System für Entwickler*innen zugänglicher geworden. Deswegen wirken diese nun stärker mit. Jede*r kann nun einfach eine Figma-Datei öffnen und direkt mit der Arbeit beginnen. „Von der Anwendung von Grundelementen für Farben und Abstände bis hin zur Größe von Tokens oder dem Radius von Kanten haben sich Variablen als ungemein nützlich für unseren Prozess der Komponentenerstellung erwiesen. Sie garantieren die exakte Referenzierung spezifischer Tokens und vereinfachen den Zugang für Entwickler*innen im Dev Mode“, erklärt Nick Hayward, Senior iOS Engineer bei Headspace. Er schätzt, dass das aktualisierte Design-System den Produktlaunch-Zyklus um 30 % beschleunigt hat.

Dank der fortschrittlichen Funktionen von Figma kann Headspace nun tief durchatmen: Das optimierte Design-System verbessert Arbeitsabläufe, erhöht die technische Präzision und ermöglicht es, den Mitgliedern Meditationserfahrungen auf ansprechende und innovative Weise näherzubringen.