RELATIONSHIP APP · UX/UI Case Study
Keep in Touch
Ein privater Ort für den eigenen Inner Circle: kleine wichtige Dinge über wenige enge Menschen festhalten und im richtigen Moment daran erinnert werden. Kein Social Network, keine Messaging-App.
- UX/UI
- Mobile
- Prototyp
Gut zu wissen: Die Demo startet ohne Registrierung mit Beispieldaten, die nur für die eigene Sitzung gelten; mit Konto werden Profil und Inner Circle dauerhaft gespeichert. Kurz merken wandelt Sprache serverseitig mit OpenAI in Text um und wertet die Notiz strukturiert aus; gespeichert wird erst nach Bestätigung.
- Projekt
- Product-Design-Projekt mit klickbarem Prototyp und Demo
- Meine Rolle
- Product Concept, UX/UI Design und Product Decisions
- Technische Umsetzung
- AI assisted development mit Claude Code auf Basis von Next.js, Fastify, Supabase und TypeScript.
- Plattform
- Responsive Web-App: mobiles App-Erlebnis, Browser-Ansicht für größere Bildschirme
- Technologie & Tools
- Next.js, Fastify, Supabase, TypeScript, Tailwind CSS
01 · Ausgangslage
Worum es geht
Die kleinen Dinge über die Menschen, die einem am nächsten sind, gehen leicht verloren: die Prüfung, von der jemand erzählt hat, der Umzug am Wochenende, die Frage, die man beim nächsten Treffen stellen wollte.
Vorhandene Werkzeuge sind entweder Kontaktbücher, Kalender oder Messenger. Keines davon ist ein ruhiger, privater Ort genau für diese Dinge, und viele wollen Kommunikation messen oder ersetzen.
02 · Ziel
Was das Produkt erreichen soll
Ein privater Ort für den eigenen Inner Circle: wichtige Ereignisse, Dinge aus Gesprächen, Themen für das nächste Mal und persönliche Notizen festhalten und im richtigen Moment daran erinnert werden.
Keep in Touch soll Kommunikation nicht ersetzen und nichts behaupten, was es nicht wissen kann.
03 · Vorgehen
Vom Konzept zum Produkt
Schritt 1
Ausgangspunkt
Ein erster Stand verband private Kontaktpflege mit einem kleinen sozialen Netzwerk aus Profilen, Verbindungsanfragen, Feed und Direktnachrichten.
Schritt 2
Die Produktidee schärfen
Im Verlauf der Konzeption wurde klar, dass Feed, Nachrichten und öffentliche Suche vom Kern ablenken. Keep in Touch ist kein Social Network: Diese Funktionen sind aus der Oberfläche genommen.
Schritt 3
Nur zeigen, was man wissen kann
Angaben wie „Seit 16 Tagen kein Kontakt“ wurden entfernt. Die App hat keinen Zugriff auf Chats, Anrufe oder Treffen und zeigt nur, was Nutzer:innen selbst eintragen.
Schritt 4
Inner Circle statt Kontaktbuch
Eine alphabetische Kontaktliste mit Suche wurde durch eine bewusst kleine Auswahl ersetzt: wenige enge Menschen, jeweils mit einer aktuell relevanten Information.
Schritt 5
Visuelle Richtung neu setzen
Bei der Überprüfung wirkte die beige, olivfarbene Journal-Optik zu schwer. Die aktuelle Fassung ist hell und strukturiert: kühle Grautöne, ein dunkles Slate Blue als Akzent und durchgehend eine Schrift, Instrument Sans.
Schritt 6
Anlegen persönlicher machen
Das Formular zum Anlegen einer Person wirkte zu administrativ. Es wurde durch einen kurzen, geführten Ablauf mit einer Frage pro Schritt ersetzt, in dem fast alles übersprungen werden kann.
Schritt 7
Browser und Smartphone
Ein eigener Startscreen führt in eine responsive Browser-Anwendung mit Seitenleiste. „The full experience“ öffnet dieselbe App im Smartphone-Format, für das sie gedacht ist.
04 · Zentrale UX Entscheidungen
Entscheidungen, die das Erlebnis prägen
01
Inner Circle statt Kontaktbuch
Vier bis zehn Menschen, keine Buchstaben-Gruppen, keine Suchleiste. Jede Person zeigt nur eine Information, die gerade wichtig ist, zum Beispiel „Prüfung am Donnerstag“.
02
Nur Eingetragenes zählt
Keine Kontaktstatistik, keine automatische Kontakthäufigkeit, kein „zuletzt geschrieben“. Was die App zeigt, stammt aus gespeicherten Ereignissen, Notizen und Erinnerungen.
03
Heute als ruhiger Moment
Heute zeigt nur, was eine gespeicherte Erinnerung relevant macht. Erledigen liegt in einem kleinen Menü statt in großen Häkchen, und wenn nichts ansteht, sagt die App: „Heute ist alles ruhig.“
04
Kurz merken mit Sprache oder Text
Festhalten soll so schnell gehen wie eine Sprachnachricht. Das Ergebnis wird als Person, Ereignis, Datum und Erinnerung angezeigt und vor dem Speichern geprüft, bearbeitet oder verworfen.
05
Strukturiert erfassen, ohne Formular-Gefühl
Nähe, Beziehung, Interessen, Geschenkvorliebe, Gerade wichtig und Geburtstag werden als getrennte Felder gespeichert. So können später Vorschläge entstehen; heute zeigt der Prototyp nur feste, gekennzeichnete Beispiele.
06
Kein Ersatz für Kommunikation
Keine Nachrichten in der App, kein Feed, keine öffentliche Suche. Gesprochen wird weiter dort, wo man ohnehin spricht; Keep in Touch hilft nur, nichts Wichtiges zu vergessen.
07
Hell und strukturiert
Die Oberfläche soll sich wie ein digitales Produkt anfühlen, nicht wie ein Journal: eine einzige Schrift, Instrument Sans, für alles. Die Hierarchie entsteht über Größe, Gewicht, Abstand und Farbe.
08
Mobile first, im Browser zeigbar
Auf großen Bildschirmen nutzt die App den Platz, etwa mit Heute und Demnächst nebeneinander. Das eigentliche Erlebnis öffnet ein dezentes Panel im Smartphone-Format.
05 · Verworfene Ansätze
Was ausprobiert und wieder verworfen wurde
Nicht jede Idee hat es ins Produkt geschafft. Diese Ansätze gab es in früheren Ständen; daneben steht jeweils, warum sie ersetzt wurden.
01
Ein kleines soziales Netzwerk
- Früher
- Der erste Stand verband private Kontaktpflege mit Profilen, Verbindungsanfragen, einem Feed und Direktnachrichten.
- Warum verworfen
- Keep in Touch ist kein klassisches Social Network und keine Messaging-App. Feed, Nachrichten und öffentliche Suche lenkten vom Kern ab.
- Heute
- Ein privater Ort für den eigenen Inner Circle. Gesprochen wird weiter dort, wo man ohnehin spricht.
02
Eine verspielte erste Fassung
- Früher
- Der erste mobile Prototyp arbeitete mit Pastellflächen, bunten Initialen und großen „Erledigt“-Knöpfen auf jeder Karte.
- Warum verworfen
- Keep in Touch sollte nicht verspielt, niedlich oder wie ein Habit Tracker wirken, sondern ruhig, erwachsen und persönlich.
- Heute
- Eine ruhige, helle Oberfläche mit wenigen Farben. Erledigen liegt im Menü der Karte statt als Knopf auf jeder Zeile.
Früher: Pastellflächen und Erledigt-Knöpfe. 
Heute: ruhig und priorisiert. 03
„Seit 16 Tagen kein Kontakt“
- Früher
- Eine Karte zählte, wie lange man sich bei jemandem nicht gemeldet hatte.
- Warum verworfen
- Die App hat keinen Zugriff auf Chats, Anrufe oder Treffen. Eine solche Zahl wäre geraten und würde Kontakt messen, statt ihn zu erleichtern.
- Heute
- Gezeigt wird nur, was man selbst eingetragen hat: Ereignisse, Notizen und eigene Erinnerungen.
04
Journal-Optik mit Serifenschrift
- Früher
- Eine beige, olivfarbene Journal-Gestaltung mit der Serifenschrift Newsreader für die Überschriften.
- Warum verworfen
- Die Optik wirkte zu schwer, und die Serifenschrift gefiel nicht. Hierarchie sollte über Größe, Gewicht und Abstand entstehen, nicht über eine zweite Schrift.
- Heute
- Hell und strukturiert, durchgehend eine Schrift: Instrument Sans.
05
Nur ein Handy-Rahmen auf großen Bildschirmen
- Früher
- Auch im Browser war die App ausschließlich als iPhone im Rahmen zu sehen, mitten auf einer leeren Fläche.
- Warum verworfen
- Keep in Touch sollte doch eine Browser-Anwendung sein, die auf großen Bildschirmen den Platz nutzt. Das Smartphone-Format sollte erhalten bleiben, aber als Option.
- Heute
- Eine responsive Browser-Anwendung mit Seitenleiste. „The full experience“ öffnet dieselbe App im iPhone-Format.
Früher: nur ein iPhone-Rahmen. 
Heute: Browser-App, das iPhone-Format als Option. 06
Heute als Kalender-Dashboard
- Früher
- Heute zeigte mehrere Personen und Ereignisse gleichwertig nebeneinander, dazu einen Kalender, ähnlich einer Termin-Übersicht.
- Warum verworfen
- Die Seite wirkte zu kalt, technisch und wie Outlook. Mehrere Personen erschienen gleich wichtig, obwohl eine gerade wichtiger war.
- Heute
- Eine Hauptkarte für die Person, die jetzt wichtig ist, mit Ereignis und eigener Erinnerung getrennt. Darunter „Als Nächstes“, daneben Kalender und „Demnächst“.
Früher: alles gleichwertig. 
Heute: eine Person im Mittelpunkt. 07
Bunte Farbcodierung
- Früher
- Inhaltsarten waren mit deutlich unterschiedlichen Akzentfarben wie Lila, Grün und Apricot markiert.
- Warum verworfen
- Die App sollte insgesamt sehr ruhig bleiben.
- Heute
- Weiß, Off-White, kühles Grau, Blaugrau und Himmelblau. Ereignis und Erinnerung unterscheiden sich über Fläche, Symbol und Bezeichnung.
08
Der Prüfschritt von Kurz merken als Formular
- Früher
- Nach der Auswertung standen Person und Ereignis in getrennten Kästen, Korrekturen liefen über „Bearbeiten“.
- Warum verworfen
- Der Screen wirkte zu formularartig und technisch.
- Heute
- Die Notiz steht oben, die erkannten Teile sind antippbare Bausteine, darunter der vorgeschlagene Eintrag.
Früher: Kästen und „Bearbeiten“. 
Heute: Notiz und Bausteine.
06 · Lösung
Funktionen und Bereiche
Der aktuelle Stand ist ein klickbarer Prototyp: Startscreen, Heute, Inner Circle, Kurz merken und Profil, als Browser-Anwendung und im Smartphone-Format.
App (Prototyp)
- Einstieg mit „Demo starten“ und Anmeldung
- Heute: ruhige Personenkarten, Ereignis und eigene Erinnerung getrennt
- Kompakter Kalender, mobil als 7-Tage-Leiste
- Erinnerungen mit Datum, Uhrzeit und Ton; Browser-Benachrichtigungen nach Zustimmung
- Avatare: eigene Illustrationsserie, Foto oder Initialen
- Person: Gerade wichtig, Wichtige Daten, Interessen, Merken, Beim nächsten Mal, Ideen für euch
- Eigenes Profil mit Geburtstag, Interessen und Vorlieben
- Person hinzufügen als kurzer geführter Ablauf
Kurz merken
- Sprachaufnahme im Browser: aufnehmen, stoppen, anhören
- Transkription und strukturierte Auswertung serverseitig (OpenAI), Schema-validiert
- Ergebnis prüfen, bearbeiten, speichern oder verwerfen
- Unklare Personen, Daten oder Uhrzeiten werden nachgefragt, nie erfunden
Mit Konto
- Personen werden als echte Kontakte gespeichert
- Termine, Notizen und Themen für das nächste Mal pro Person
- Ohne Konto bleiben Personen nur im Browser
Darstellung
- Smartphone: App-Layout mit Tab-Leiste
- Browser: Seitenleiste, mehrspaltig wo sinnvoll
- „The full experience“: dieselbe App im iPhone-Format
Start und Browser-Ansicht
Mobile App
07 · Evaluation
Wo man hängen bleibt
Vor Tests mit echten Nutzer:innen wurde Keep in Touch heuristisch evaluiert: ein Walkthrough durch die Live-Demo, aus Sicht einer Erstbesucherin am Smartphone, am Desktop und mit Tastatur. Die Aufgaben: eine Erinnerung für Amira anlegen, mit Kurz merken festhalten, dass Papa am Dienstag zum Arzt geht, und im Fokusmodus eine Mini Challenge erledigen.
Das ersetzt keinen Nutzertest, findet aber zuverlässig Stellen, an denen der Ablauf stockt. Die fünf wichtigsten wurden direkt behoben.
- Kritisch
Die Demo hatte zwei Uhren
Die Demo stand fest auf dem 14. Oktober, Erinnerungen und Fokusmodus liefen nach der echten Uhrzeit. Direkt nach „Demo starten“ meldete sich eine Erinnerung für einen späteren Tag, und im Fokusmodus hieß dieselbe Erinnerung oben „gestern“ und darunter „morgen“.
Geändert: Die Beispieldaten beginnen immer am echten heutigen Tag. Datum, Erinnerungen, Fokusmodus und Kurz merken folgen derselben Uhr.
- Mittel
Erinnerungshinweise verdeckten Inhalte
Ein ausgelöster Hinweis blieb stehen, bis man ihn schloss, und lag auf dem Smartphone über Kalender und Formularen.
Geändert: Hinweise blenden nach zehn Sekunden aus, solange man nicht mit ihnen interagiert. Die Erinnerung selbst bleibt auf Heute.
- Mittel
Das Wichtigste stand im Formular zuletzt
Das Erinnerungsformular öffnete sich halb unter dem Bildschirmrand, und der Text der Erinnerung stand nach Datum und Uhrzeit.
Geändert: Das Formular scrollt in den sichtbaren Bereich, der Text steht zuerst und ist bei einer neuen Erinnerung schon fokussiert.
- Mittel
Doppelte Termine blieben unbemerkt
Kurz merken legte einen zweiten Arzttermin für Papa an, obwohl schon einer eingetragen war, ohne darauf hinzuweisen.
Geändert: Der Prüfschritt zeigt „Papa hat schon: Arzttermin am …“. Speichern bleibt möglich, als bewusste Entscheidung.
- Mittel
Zwei ähnliche Wege zu einer Erinnerung
Auf der Personenseite standen „Weitere Erinnerung“ und „Erinnerung ohne Ereignis“ nebeneinander, ohne klaren Unterschied.
Geändert: Sie heißen jetzt „Erinnerung zu diesem Ereignis“ und „Neue Erinnerung“.
- Kosmetisch
Ein Tab-Stopp pro Kalendertag
Mit der Tastatur ist jeder Tag im Monatskalender ein eigener Halt, bis zu „Demnächst“ sind es über 30.
Noch offen.
- Kosmetisch
Dieselbe Erinnerung zweimal im Fokusmodus
Die Erinnerung steht oben als Mini Challenge und direkt darunter in der Personenkarte.
Noch offen.
- Kosmetisch
Fokusmodus weit unten im Profil
Auf dem Smartphone liegt der Schalter fast am Ende der Profilseite.
Noch offen.
08 · Reflexion
Was trägt und was als Nächstes kommt
Keep in Touch hat sich von allen Projekten am stärksten verändert: von einem kleinen sozialen Netzwerk zu einem privaten Ort für wenige Menschen.
Am schwersten fiel mir, Dinge wieder wegzunehmen, etwa die Zahl „Seit 16 Tagen kein Kontakt“. Sie sah nach einer nützlichen Funktion aus, behauptete aber etwas, das die App gar nicht wissen kann. Heute frage ich bei jeder Anzeige zuerst: Woher weiß die App das?
Was bereits funktioniert
- Die Produktidee ist klarer: ein privater Ort für wenige Menschen, ohne Social-Network-Logik.
- Struktur und Gestaltung lassen sich im Browser und im Smartphone-Format beurteilen.
Was als Nächstes getestet und weiterentwickelt wird
- Erinnerungen echter Konten auf Heute zeigen; bisher erscheinen dort nur gespeicherte Termine.
- Mit echten Notizen testen, wie verlässlich die Auswertung relative Daten und Personen erkennt.
- Erinnerungen auch bei geschlossener App zustellen, über Push oder eine native App.
- Ideen und Geschenkideen aus den strukturierten Interessen mit KI ableiten; bisher sind es feste Regeln.
- Mit potenziellen Nutzer:innen besprechen, wie groß ein Inner Circle sein sollte.
Keep in Touch