SafeChat gestalten: das Richtige übernehmen, den Rest ignorieren

Jede Messaging-App, die Ihre Nutzer je verwendet haben, hat bereits Designarbeit an ihnen geleistet. WhatsApp hat einer Milliarde Menschen beigebracht, wie eine Chatliste aussieht. Slack hat eine ganze Generation von Wissensarbeitern an Kanäle, Threads und Workspace-Strukturen gewöhnt. Wer ein neues Messaging-Produkt baut, beginnt nicht auf einem leeren Blatt – sondern arbeitet gegen Erwartungen, die Nutzer mitbringen, bevor sie auch nur ein einziges Label gelesen haben.

Das könnte eine Einschränkung sein. Wir haben beschlossen, es als Ressource zu behandeln.

Ein hybrides mentales Modell als Ausgangspunkt

SafeChat musste zwei Dinge gleichzeitig können, zwischen denen sich die meisten Apps entscheiden. Es sollte sich persönlich und unmittelbar anfühlen – wie WhatsApp, wo man die App öffnet, seine Unterhaltungen sieht und direkt zur Sache kommt. Und es musste strukturierte, dauerhafte Teamräume tragen – wie Slack, wo ein Kanal für die Schwimmgruppe unabhängig von einzelnen Gesprächen existiert und mit der Zeit Kontext sammelt.

Die meisten Produkte, die beides versuchen, fühlen sich am Ende wie keines von beiden an. Sie schrauben eine Kanalliste an eine Chatoberfläche und erklären die Sache für erledigt. Die daraus entstehende Verwirrung – Was ist der Unterschied zwischen einer Gruppe und einem Kanal? Warum gibt es zwei Listen? Welche nehme ich wofür? – gehört zu den häufigsten Beschwerden über Enterprise-Messaging, und wir haben sie auch in frühen Tests erlebt.

Unsere Antwort war keine strukturelle, sondern eine visuelle und sprachliche. Die beiden Konzepte mussten sich unterschiedlich anfühlen, bevor ein Nutzer überhaupt ein Label liest. Kanäle sind eckig. Chats sind rund. Diese eine Regel – ausnahmslos auf jeder Oberfläche der App durchgesetzt – leistet mehr als jeder Erklärtext. Ein runder Avatar bedeutet: Sie sehen eine Person oder eine Gruppe von Personen. Ein eckiges Symbol mit Raute bedeutet: Sie sehen einen dauerhaften Teamraum. Einmal gelernt, funktioniert es überall.

Übernehmen, was funktioniert – weglassen, was nicht

Der größte Fehler beim Gestalten für einen neuen Kontext ist, Dinge neu zu erfinden, die längst funktionieren. Zitierte Antworten, Lesebestätigungen, Ungelesen-Badges, nach Absender gruppierte Nachrichten, Vorschauen mit Absendernamen in der Chatliste – diese Muster gibt es in jeder großen Messaging-App, weil sie wirklich gute Lösungen für echte Probleme sind. Wir haben sie alle übernommen und keine Zeit damit verbracht, sie infrage zu stellen. Originalität um ihrer selbst willen war nie das Ziel.

Infrage gestellt haben wir dagegen, was WhatsApp und Slack jeweils für einen Kontext wie einen Olympiastützpunkt falsch machen. WhatsApp hat keine Struktur – es ist eine flache Liste von Unterhaltungen, in der sich ein lockerer Chat nicht von einer wichtigen Teamankündigung unterscheiden lässt. Für den privaten Gebrauch ist das in Ordnung. Es funktioniert nicht, wenn eine Physiotherapeutin den Kanal des medizinischen Teams finden muss und sich nicht erinnert, ob es eine Gruppe war oder ein Gespräch, das sie vor sechs Monaten begonnen hat. Slack löst dieses Problem, schafft aber ein anderes: Es ist für die Tastatur gebaut, für den Desktop, für Menschen, die hauptsächlich am Computer tippen. Athleten und Trainer leben auf ihren Smartphones. Slack auf dem Handy wirkt wie ein Zugeständnis, nicht wie Design.

Also haben wir die Unmittelbarkeit und das Mobile-first-Gespür von WhatsApp übernommen. Wir haben das Strukturmodell von Slack übernommen – dauerhafte Kanäle, Gruppenmitgliedschaft, Admin-Kontrolle. Wir haben die Dichte und Desktop-Ausrichtung von Slack weggelassen. Wir haben die strukturelle Flachheit von WhatsApp weggelassen. Was übrig blieb, war die Gestalt von SafeChat.

Ein Farbsystem, das Bedeutung trägt

Die meisten Enterprise-Apps wählen ein Farbschema und wenden es einheitlich an. Wir haben einen anderen Ansatz gewählt: Farbe trägt in SafeChat semantische Bedeutung, und diese Bedeutung ist durchgängig konsistent.

Die Primärfarbe ist Pine, ein tiefes, warmes Grün – #2F6F5E. Es ist die Farbe aktiver Zustände, bestätigter Verbindungen, primärer Aktionen und der gesendeten Nachrichtenblase. Sie wirkt ruhig und vertrauenswürdig, ohne kalt zu sein. Für eine App, die Meldungen zum Athletenschutz und Safe-Sport-Compliance abwickelt, ist dieser Ton wichtig. Sie soll sich weder wie eine Consumer-App anfühlen, die witzig sein will, noch wie ein Behördensystem, das ernst wirken will.

Die Akzentfarbe ist Terracotta – #C2703D. Sie erscheint an genau zwei Stellen: auf der Taste zum Beenden eines Anrufs und auf der Ablehnen-Taste bei eingehenden Anrufen. Nirgendwo sonst. Diese Zurückhaltung ist gewollt. Terracotta bedeutet in SafeChat „Stopp“. Wer sie sieht, weiß, was sie bewirkt, bevor er etwas liest.

Die durchdachteste Farbentscheidung war der Kanal-Akzent. Kanäle mussten sich von Chats nicht nur in der Form, sondern auch im Ton unterscheiden. Wir haben Kanälen eine eigene Farbidentität gegeben – weiterhin innerhalb der warmen Palette, aber deutlich genug, dass sich der Wechsel vom Chats- zum Kanäle-Tab wie ein Kontextwechsel anfühlt und nicht nur wie eine andere Liste. Für sich genommen ist das eine Kleinigkeit. Über Hunderte täglicher Interaktionen hinweg ist es genau das, was die App geordnet statt beliebig wirken lässt.

Der Hintergrund ist Sand – #FAF7F2 – ein warmes Off-White statt eines klinischen Weiß. Es verleiht der App Wärme, ohne Unruhe hineinzubringen, und hebt das helle Theme von dem grellen Weiß ab, das die meisten Produktivitätstools standardmäßig verwenden.

Das dunkle Theme ist kein Nachgedanke

Das dunkle Theme von SafeChat wurde parallel zum hellen gestaltet, nicht daraus abgeleitet. Die Oberflächen während eines Anrufs sind immer dunkel – #13150F, das Ink-Token –, unabhängig vom gewählten Theme. Das ist eine bewusste Entscheidung: Anrufe sind ein anderer Modus, und der visuelle Wechsel unterstreicht das. Ein Anruf in SafeChat sieht anders aus und fühlt sich anders an als ein Chat – und genau so ist es gewollt.

Jede Farbe im System ist als Token mit einem hellen und einem dunklen Wert definiert, sodass ein Theme-Wechsel nie eine visuelle Überraschung ist. Die App wirkt in beiden Modi bewusst gestaltet.

Barrierefreiheit stand im Briefing, nicht im Backlog

Zu den Mitarbeitenden des OSP gehören Menschen aller Altersgruppen und mit unterschiedlichen Sehbedürfnissen. Wir haben die Schriftskalierung als vollwertige Funktion gebaut – keinen Browser-Zoom-Trick, sondern eine eigene Einstellung, die Text in der gesamten App über eine einzige CSS-Variable von 15 px auf 18 px skaliert. Jede Komponente wurde so gebaut, dass sie diesen Bereich ohne Brüche verkraftet. Blasenhöhen, Zeilenhöhen und Layouts der Steuerleisten wurden in minimaler und maximaler Schriftgröße getestet, bevor irgendetwas abgenommen wurde.

Über die Größe hinaus ist auch die Schriftart wählbar. Plus Jakarta Sans ist der Standard – warm, gut lesbar, für Bildschirme gestaltet –, doch Nutzer können wechseln. Die Theme-Auswahl bietet hell, dunkel und Systemeinstellung.

Nichts davon ist heldenhafte Ingenieursarbeit. Es ist das Ergebnis davon, Barrierefreiheit als Anforderung im Design zu behandeln statt als Korrektur in der Qualitätssicherung. Der Unterschied: Steht sie von Anfang an im Briefing, hat jede Komponentenentscheidung sie im Blick. Kommt sie erst am Ende, rüstet man nach.

Was das Designsystem tatsächlich geleistet hat

Die Entscheidungen auf Ebene des Designsystems – die Formregel Kreis gegen Quadrat, die semantischen Farb-Tokens, die Variable für die Schriftskalierung, die Token-Struktur für zwei Themes – führten dazu, dass die Anrufbildschirme, die wir sechs Monate nach Projektbeginn gestaltet haben, wie selbstverständlich zum selben Produkt gehörten, ohne dass jemand gezielt dafür sorgen musste. Das System hat die Arbeit gemacht.

Genau das ist der eigentliche Wert eines Designsystems: keine Komponentenbibliothek, sondern eine Reihe einmal getroffener Entscheidungen, die hundert spätere Fragen automatisch beantworten. Der Anrufbildschirm brauchte eine Hintergrundfarbe – er nutzte das Ink-Token. Die Ablehnen-Taste brauchte eine Farbe – sie nutzte Terracotta. Die Anzeige der aktiven sprechenden Person im Gruppenanruf musste erkennbar sein – sie nutzte das Pine-Rahmen-Token. Keine neuen Entscheidungen, keine neuen Verhandlungen, keine Inkonsistenz.

Das Produkt wirkt durchdacht, weil das System durchdacht war. Das ist die Arbeit.