Topics

Claude Code macht es möglich? Ein UI-Designer entwickelt seine eigene Gesundheits-App, weil ihn die bestehende nicht überzeugte

  • column

Hallo! Ich bin Hasshi und arbeite als UI-Designer bei Liberogic.

Aber mal ehrlich: Kennt ihr nicht auch diese stille Besorgnis? Ihr habt mit großem Elan eine Gewohnheits-App heruntergeladen, aber sie wird einfach nicht zur Routine.

Ich bin ein Profi darin, etwas anzufangen, aber noch nie habe ich etwas durchgehalten.

Es gibt viele leistungsstarke und schöne Apps auf dem Markt.

Am Anfang dokumentiere ich gewissenhaft jeden Tag. Aber wenn die Arbeit stressig wird oder ich unterwegs bin, reißt die Streaknotiz plötzlich ab – und schon ist jegliche Motivation weg.

Die Benachrichtigungen, die ich anfangs so ernst nahm, werden allmählich zu bloßem Lärm, und die Apps versteinern sich in der Ecke meines Bildschirms.

Dieser Moment, wenn dich der Gedanke "Ach, lass es mich sein" überfällt – dieses Gefühl der Niederlage. Ich bin sicher nicht der Einzige, der das kennt.

Gibt es niemanden, der einem Menschen wie mir, der bei nichts über drei Tage hinauskommt, eine helfende Hand reicht? (Nein.)

Was mich zusätzlich belastet hat, ist die "App-Fragmentierung".

Gewohnheitstracker, Medikamentenkalender, Haushaltsbuch – für jeden Bereich springt man zwischen verschiedenen Apps hin und her, was die ganze Sache nur noch mühsamer macht. Hinzu kommt, dass viele Apps kostenpflichtige Abos haben, ich verliere den Überblick und vergesse, sie zu kündigen. Das ist völlig kontraproduktiv.

Da beschloss der Designer, seinen eigenen Kopf durchzusetzen. „Warum baue ich mir nicht einfach selbst eine App mit nur den Funktionen, die ich brauche – genau nach meinen Vorstellungen?"

So begann die Entwicklung meines persönlichen „Meine-Gewohnheits-Cockpits" in Zusammenarbeit mit AI (Claude Code) – speziell zugeschnitten auf meinen Alltag!

AI sollte zumindest die optimale Lösung liefern

1. 【Funktionsüberblick】Die eigene "Faulheit" vom System umhüllen – eine charakteristische Funktion, die "Faulenzen" systematisiert

Schauen wir uns nun an, welche Funktionen wir tatsächlich implementiert haben.

Ich wollte das Beste aus bestehenden Apps nutzen und gleichzeitig ein ultimatives „Dashboard" schaffen, das speziell auf mein Leben zugeschnitten ist.

Um die notwendigen Apps in einer zu kombinieren, begannen wir zunächst mit der Entwicklung einer Gewöhnungs-App.

Da viele Nutzer zwischen Tag und Nacht umschalten möchten, bieten wir sowohl einen Light- als auch einen Dark-Mode an.

🌱 Startbildschirm

Der Startbildschirm zeigt ein Eingabeformular für die Gewohnheiten, die Sie beibehalten möchten. Sie können das Formular selbst ausfüllen und fortfahren.

Wenn Sie nach unten scrollen, finden Sie einen Link, der besagt, dass Sie Gewohnheiten durch Beantwortung von Fragen entwickeln. Wenn Sie darauf klicken, werden Ihnen basierend auf Ihren Antworten personalisierte Gewohnheitsvorschläge gemacht.

Auf dem Startbildschirm wird eine Gewohnheitsdiagnose eingeführt

Auf dem Startbildschirm haben wir auch einen Gewohnheitsnavigator erstellt, mit dem Benutzer, die nicht wissen, welche Gewohnheiten sie entwickeln möchten, einfach Fragen beantworten können, um personalisierte Gewohnheiten auszuwählen.

🌱 Habit Tracker: Verabschieden Sie sich von der Alles-oder-Nichts-Mentalität

Um Gewohnheiten zu entwickeln, ist es wichtig, dass Sie kleine, nachhaltige Schritte unternehmen und diese konsequent verfolgen können

Wir haben eine Gewohnheits-App mit einer Fünf-Punkte-Bewertungsfunktion entwickelt. Die früher verwendete App bot meist nur die Wahl zwischen "geschafft" und "nicht geschafft". Diese App färbt jedoch Kalendertage ein, nicht nur wenn Sie "perfekt" waren, sondern auch für "ein bisschen Mühe" auf Stufe 1.

Zum Beispiel beim Sport können Sie von "Stufe 1: Auf die Waage stellen" oder "Stufe 2: Kniebeugen beim Toilettengang" bis zu "Stufe 5: 1 km im Schwimmbad schwimmen oder 40 Minuten Hit-Boxing" je nach Anstrengung des Tages erfassen.

Tage, an denen Sie pausieren, bleiben leer, aber mit dem später erklärten "Ausfallgebühr-System" können Sie an anderen Tagen wiedergutmachen, auch wenn Sie nicht kontinuierlich sind, sodass Pausentage nicht deprimierend wirken.

Am nächsten Tag einfach wieder anfangen. Dank dieser Leichtigkeit schaffe ich es immerhin, mich jeden Tag auf die Waage zu stellen!

Der Kalender färbt sich schrittweise in grünen Farbverläufen ein – diese visuelle Ansammlung von Farben macht Spaß, und wenn Sie den Monat überblicken, können Sie leicht sehen, wie viel Sie erreicht haben, was die Motivation steigert.

Kalenderfeature zur Visualisierung

Wenn Sie die Kalender-UI betrachten, ändert sich die Farbe, wenn Sie eine Gewohnheit tatsächlich erreicht haben. Je nach Level ändern sich die Farbintensität und der Farbton, sodass Sie sehen können, wie konsequent Sie Ihre Gewohnheiten umgesetzt haben – das hilft dabei, Ihre Motivation zu bewahren.

Archivierungsfunktion für Gewohnheiten und Funktion zur Erstellung neuer Gewohnheiten

Ich dachte, es wäre gut, sich neuen Gewohnheiten zuzuwenden, sobald eine Gewohnheit etabliert ist. Daher habe ich auch eine Archivierungsfunktion und die Möglichkeit zur Erstellung neuer Gewohnheiten eingebaut! Wenn Sie auf die Schaltfläche "Gewohnheit abgeschlossen" klicken, können Sie eine neue Gewohnheit hinzufügen.

🏛️ Müßiggangssteuer: Schuldgefühle in Ersparnisse umwandeln

Das ist eine weitere Funktion, die mit dem Gewohnheitstracker von oben verknüpft ist!

An Tagen, an denen Sie untätig sind, müssen Sie sich selbst eine "Steuer" (Standard: 300 Yen) auferlegen.

Jeder Mensch hat Zeiten, in denen er einfach nicht weitermachen kann.

Deshalb braucht man eine Strafe, um sich selbst zu zügeln, aber eine bloße Geldbuße wird schnell zum Ärgernis.

Wissen Sie, warum übergewichtige Menschen übergewichtig sind? Weil sie den leichteren und fauleren Weg wählen und sich durch Essen Dopamin zuführen, um sich auf das einfache Glückshormon zu verlassen. Deshalb hat es keinen Sinn, die Strafe zu verstärken – für Menschen wie uns, die Schwierigkeiten mit der Bildung von Gewohnheiten haben.

Ich dachte zunächst, es wäre besser, den ausgefallenen Betrag zu spenden… aber ich war mir sicher, dass ich die App nie öffnen würde, wenn ich mich selbst so streng disziplinieren würde (lacht).

Ich beschloss, die Trägheitssteuer auf mein Indexfonds-Anlagekonto einzuzahlen.

Mit anderen Worten: Es ist eine Strafe, aber auch keine Strafe. Eine Strafe für mich selbst.

Ich habe sogar das schlechte Gewissen in Vermögensaufbau für mein zukünftiges Ich umgewandelt.

Darüber hinaus habe ich mich besonders auf ein "Steuervergünstigungssystem" konzentriert, das auf der monatlichen Erfolgsquote basiert.

  • "Bei einer Erfolgsquote von 90% oder mehr: 50% Steuervergünstigung"
  • "Bei 80% oder mehr: 25% Steuervergünstigung"

Dieses System habe ich eingebaut.

Auf dem Bildschirm wird "Noch 1% bis zu 25% Rabatt!" angezeigt. Wenn ich das sehe, denke ich: "Heute reicht auch Level 2, also gib dein Bestes" – und plötzlich bekomme ich merkwürdige Motivation.

Der größte Feind der Gewöhnung ist der Moment, in dem man eine Trainingsreihe durch einen Tag Faulheit unterbricht und plötzlich alles aufgeben möchte.

Aber dank dieses Steuersenkungssystems kann man sich selbst bremsen und denken: „Ich habe zwar einen Tag gefehlt, aber ich habe immer noch die Chance auf Steuererleichterungen!"

Ein sanft durchdachtes Design, das dir auch nach einem Fehlschlag nicht aufgibt und sich liebevoll an deine nachlässigere Seite anpasst.

✨ Hautpflege-Tracker & 💊 Medikamentenverwaltung: App-Wechsel auf null

✨ Das Hautpflege-Check-Tool, das ich mir immer gewünscht habe

Gewohnheiten, Medikamente, Haushaltsbuchhaltung … diese alle in separaten Apps zu verwalten, war für jemanden wie mich, der nicht besonders gewissenhaft ist, der Gipfel der Unannehmlichkeit. Um dieses „Hin und Her zwischen Apps" zu eliminieren, haben wir sowohl die tägliche Pflege als auch das Gesundheitsmanagement vollständig in dieses Cockpit integriert.

Da wir die Funktionen der Gewöhnungs-App direkt wiederverwenden konnten, war die Implementierung einfach.

🧴 Ein Skin-Care-Tracker, der auch Tage ohne Routine erlaubt

Hautpflege ist eine wichtige Gewohnheit. Wir haben fünf Schritte mit einer Frage eingebaut, die beim Öffnen des Bildschirms fragt: „Wie weit bin ich gekommen?"

An Tagen, an denen du völlig erschöpft nach Hause kommst, reicht „Stufe 1: Nur Gesicht waschen (Wasserspülung oder Reinigungsprodukt)" aus. Wenn du noch etwas Energie hast, kannst du „Stufe 2: Minimale Pflege (Reinigung + Toner)", „Stufe 3: Grundpflege (+ Feuchtigkeitscreme)" wählen, und an besonderen Tagen kannst du sogar „Stufe 4: Sorgfältige Pflege" mit Serum hinzufügen – so kannst du je nach deinem aktuellen Energielevel des Tages dokumentieren.

Darüber hinaus können Sie die Namen und Pflegeinhalte (Beschreibungen) für jede Stufe über „Schritt-Einstellungen" nach Ihren Wünschen anpassen. Im oberen Bereich des Bildschirms werden Statistiken wie „Durchschnittliches Lv diesen Monat" und „Tage mit Lv3 oder höher in Folge" visualisiert, sodass Sie Ihre Motivation aufrechterhalten können – etwa indem Sie sich sagen „Ich war kürzlich müde und nur auf Lv1, also strenge ich mich heute für Lv3 an" – auf eine nachhaltige und realistische Weise.

💊 Medikamentenverwaltung – umfassende Unterstützung für organisierte Menschen

Und persönlich ist die Verwaltung von Medikamenten das, woran ich am ehesten scheitere.

Diese App ermöglicht es nicht nur, den Namen des Medikaments einzugeben, sondern bietet auch die Möglichkeit, den genauen Zeitpunkt (Morgens, Mittags, Abends), die Bedingungen (vor den Mahlzeiten, nach den Mahlzeiten oder beliebig), die Anzahl der Tabletten zu jedem Zeitpunkt und sogar komplexe Häufigkeiten (täglich, jeden zweiten Tag oder spezifische Wochentage) sehr detailliert und flexibel zu registrieren.

Wenn es vergessene Medikamente gibt, wird oben auf dem Bildschirm eine auffällige rote Warnung angezeigt: "⚠️ Es gibt vergessene Medikamente. Bitte überprüfen Sie diese." – Das System hält Sie wach.

Am unteren Rand des Bildschirms werden Sie auch mit realen Zahlen konfrontiert, wie "Medikamenteneinnahme-Erfolgsrate diesen Monat" und "Anzahl der vergessenen Einnahmen" (im Testbildschirm der Entwicklung wird eine beschämende Erfolgsrate von 5 % angezeigt... lachen Sie mich nicht aus).

Aber machen Sie sich keine Sorgen.

Auch wenn Sie einen Tag vergessen haben, können Sie später aus dem Kalender zurück nachträglich eintragen – die "Es ist okay, nachträglich einzutragen"-Funktion bleibt bestehen, sodass Sie kein Perfektionist sein müssen und in Ihrem eigenen Tempo weitermachen können.

Mit zunehmendem Alter nehmen auch die Medikamente zu, daher ist diese Funktion sehr praktisch. Außerdem können Sie Informationen über früher eingenommene Medikamente mit Ihrem Arzt teilen, was sehr hilfreich ist (ich verliere mein Medikamentenbuch ständig).

🍺 Trinkveranstaltungsverwaltung: Eine sensationelle Funktion, die die Motivation für Gesundheit und Sparsamkeit massiv steigert

Und persönlich war es diese "Trinkveranstaltungsverwaltung"-Funktion, die mein Leben am meisten verändert hat.

Wir haben nicht nur eine Funktion zum Erfassen von Trinkdaten integriert, sondern auch ein System zum Verwalten von monatlichen Limits für Trinkveranstaltungen (z. B. „maximal 4 Mal pro Monat") und Budgets – kombiniert mit einer durchdachten Funktion, die kleine tägliche Verzichte in visuelle Belohnungen umwandelt.

🍵 Mit einem Tap sparen! „Alkoholverzicht-Sparplan"

Im täglichen Leben

Ich sollte heute zu Hause nicht trinken.

Wenn ich es an solchen Tagen durchhalten konnte, muss ich einfach auf der Startseite den Schalter „Heute habe ich nicht getrunken" antippen.

Damit erhalten Sie eine grüne Markierung im Kalender, und 500 Yen werden als „Spareinlagen für moderaten Alkoholkonsum" hinzugefügt.

Da sich die alltäglichen Verzichte in einem Geldbetrag ansammeln, entsteht gegen Ende des Monats ein rätselhaftes Erfolgsgefühl und es wird Dopamin ausgeschüttet – etwa mit dem Gedanken „Diesen Monat habe ich schon 3.000 Yen (6 Tage) Alkoholverzicht geschafft!"

Das gesparte Geld können Sie in Investitionen oder zum Sparen verwenden.

Wenn man durch Mäßigung beim Alkoholkonsum – beispielsweise indem man das gesparte Geld aus einer Wunschliste verwendet – konkrete andere Vorteile realisieren kann, wird es einfacher, die Abstinenz oder Mäßigung beizubehalten.

🛡️ „Besaufnissicherungsmodus" – Selbstdisziplin während geselliger Trinkgelage bewahren

Das Geheimnis dieser App ist der "Anti-Besäufnis-Modus". Wenn die Kneipennacht beginnt, schalten Sie diesen Modus ein. Dann wird auf der Bildschirmmitte ein Countdown bis zur voreingestellten "geplanten Heimkehrzeit" angezeigt. Natürlich können Sie, wenn der Abend besonders schön ist und Sie noch ein bisschen länger bleiben möchten, die "Heimkehrzeit ändern" oder auf den "🎉Zweiter Ort kein Problem!"-Button klicken und flexibel die Zeit verlängern – ein benutzerfreundliches Design für faule Menschen wie mich.

Außerdem gibt es auf dem Bildschirm Zählboxen für "🍺Alkohol", "🥤Softgetränke" und "💧Wasser". Die App bewertet in Echtzeit die Trinkgeschwindigkeit – zum Beispiel ein Softgetränk auf zwei alkoholische Getränke – und zeigt dir mit grünem "OK"-Gage, ob alles im Lot ist. Dadurch kannst du den Kater am nächsten Morgen und das Bedauern "Warum habe ich nur so viel getrunken?" dramatisch reduzieren.

📊 Ich habe auch viele weitere praktische Funktionen für Kneipenabende hinzugefügt

Nach dem Kneipenabend können Sie den Restaurantnamen wie "Tori-Takizoku Shibuya-Filiale", die tatsächliche Rechnungssumme und Notizen über die Personen, mit denen Sie hingegangen sind, eintragen. Ich habe auch eine Funktion hinzugefügt, die automatisch Informationen ausfüllt, wenn Sie eine Google Maps-URL eingeben. Da dies nur ein paar Mal pro Monat passiert, sagte mir die KI, dass die API-Integration keine Kosten verursachen würde, also habe ich sie implementiert.

Da ich auch die Rechnung nach einem Kneipenabend gerne vergesse, habe ich eine Notizbuchfunktion hinzugefügt.

Das "Wer zahlt, wer nicht"-Problem ist verschwunden – sehr gut!

Im Monatsabschluss "Monatsbericht" wird die "Sparquote für reduzierte Abende" (Tage, an denen ich auf Abendtrunk verzichtet habe) plus die Differenz unter meinem Kneipenbudget (das eingesparte Geld) zusammengezählt und stolz als "Gesamtersparnis" angezeigt. Zum Beispiel "Diesen Monat habe ich insgesamt 9.000 Yen gespart!" lässt sich auf einen Blick erkennen, sodass ich denke "Mit diesem Geld kann ich mir endlich dieses Gadget kaufen, das ich wollte" – eine meiner Lieblingsfunktionen, mit der ich sowohl meine Gesundheit als auch mein Geld verbessern kann.

2. Nach der Entwicklung: Claude war das beste "Übersetzungswerkzeug" für einen Designer

So habe ich diese App mit all meiner Faulheit und meinen Eigenheiten zum Leben erweckt. Als unerfahrener Entwickler verdanke ich alles meinem Partner Claude.

Ingenieure würden mir wahrscheinlich mit "Bist du verrückt?" ins Gesicht schlagen, aber dieses Mal habe ich mich für eine super unorthodoxe Single-File-Struktur entschieden – "HTML, CSS und JavaScript alle in einer einzigen index.html". Doch für uns (Claude und mich) war das die richtige Entscheidung.

Wenn Dateien in mehrere Teile aufgeteilt sind, ist es mühsam, nur zu sagen, "welche Datei und wo muss ich das beheben", aber wenn es eine einzige Datei ist, kann ich den Code einfach in den Chat werfen und Claude erfasst sofort alles.

Claude übersetzt mein abstraktes Bild von "Ich möchte dieses Verhalten haben" in schönen Code. Es gab Zeiten, wo das Schließen von Tags fehlerhaft war oder die JavaScript-Ladreihenfolge zum Absturz der gesamten App führte, und wir beide verfolgten mitten in der Nacht die Fehlerprotokolle – aber auch das war wie in einem Buddy-Film unterhaltsam (lacht).

Wenn ich im Chat die Integration mit GitHub oder Cloudflare erwähne, zeigt mir Claude die Registrierungsmethode für das Konto und verlinkt direkt zur offiziellen Website. So konnte ich schnell integrieren, während ich mit der KI chattete.

3. Die nächste große Hürde: Designer, die Tiefe der Sicherheit

Mit Claudes Hilfe konnte ich die perfekte Spielzeugapp bekommen, in der mein ideales Aussehen und Verhalten steckt.

……aber hier taucht ein neues Problem auf.

Als ich dieses Cockpit täglich nutzte, wurde mir plötzlich bewusst: "Moment, diese App enthält meine tatsächlichen Gesundheitsdaten, tägliche Einnahmedaten, neueste Haushaltsbuchführung und meine Ausfallgeschichte – völlig ungeschützte Privatdaten sind darin vollgepackt".

Derzeit sperre ich den Bildschirm als Sicherheitsmaßnahme mit einem einfachen PIN-Code, aber ehrlich gesagt bin ich beim Thema Sicherheit komplett unerfahren. Mit unserem derzeitigen Wissen, das nur ich und die KI haben, kann ich wichtige Daten nicht vollständig selbstbewusst anvertrauen.

Gerade als Designer, der "angenehme Erlebnisse" schafft, sollte hinter dem Ganzen auch das Vertrauen "absolut undurchdringlich und unknackbar" liegen – das ist ein wichtiger Teil der Sicherheit.

"Ich möchte Face ID vom Smartphone verwenden oder die neuesten Passkeys nutzen, damit ich sie allein sicher und elegant öffnen kann!"

Ich bin dieser Meinung, aber Sicherheit ist ein hochkomplexes Spezialgebiet, das sich nicht einfach so bewältigen lässt.

Das übersteigt meine Kräfte nun wirklich …

Ich möchte hier sorgfältig mit dem Ingenieur-Team besprechen und voranschreiten.

Langfristig möchten wir auch ein Haushaltsbuch-Verwaltungstool implementieren und eine Funktion hinzufügen, die Kreditkartentransaktionen automatisch erfasst, wenn Nutzerdaten hochgeladen werden. Aus Sicherheitsgründen halten wir diesen Plan jedoch vorerst zurück.

Fazit

Die Werkzeuge sind bereit. Jetzt wollen wir „Sicherheit" schaffen!

Eine Idee, die ich in meinem Kopf nur mit mir selbst herumgetragen habe, weil mir die Entwicklungskenntnisse fehlten, wurde dank AI, meinem besten Begleiter, zum Leben erweckt und ist zu einem Werkzeug geworden, das mein Leben wirklich verändert hat. Ich bin nicht mehr so hart zu mir selbst, wenn etwas nicht perfekt wird – durch ein wenig „Faulheitssteuer" kann ich immer wieder neu anfangen. Dank dieses liebevollen Systems kann auch ich, der früher nur ein Profi des Stoppens am dritten Tag war, jetzt jeden Tag meine Gewohnheiten mit Freude festigen.

Aber je praktischer es wird, desto größer ist auch die Verantwortung, es zu schützen.

Dieser Artikel erwähnt es nicht, aber wir fügen nach und nach auch Benachrichtigungsfunktionen und Haushaltsbuch-Verwaltungsfunktionen hinzu.

Was Haushaltsverwaltung und ähnliches angeht, müssen wir aus Sicherheitsgründen vorsichtig vorgehen, daher entwickeln wir diese Funktionen derzeit noch in der Entwicklungsumgebung.

Wir freuen uns darauf, Sie beim nächsten Update zu sehen!

Dieser Artikel wurde geschrieben von

UI-Design ist ein tägliches Update! Ich überlege gerade, wie ich Accessibility bei LP-Design einbinden kann. Seit ich mich vom Markup entfernt habe, denke ich: „Sollte ich mich auch bei JavaScript weiterentwickeln?" Ich mag Toki Kitamura!

はっしー

Web-Designer / Eintritt 2018 / Im Herzen noch ein angehender Designer

Artikel dieses Mitarbeiters ansehen

Zuverlässige Teamstruktur und schnelle Reaktionsfähigkeit sind unsere Stärken

Bei Liberogic werden erfahrene Mitarbeiter aktiv bei der Projektförderung eingesetzt, daher erhalten wir hohe Bewertungen von unseren Kunden.
Wir weisen Projektmanager und Direktoren ordnungsgemäß zu und bemühen uns, Projekte reibungslos zu leiten. Wir vermeiden unnötige Kostensteigerungen durch vollständige Bindung und verteilen Ressourcen optimal. Wir sind auch bekannt für die Schnelligkeit bei der Erfassung von Geschäftsinhalten bis zur Erstellung und Einreichung von Angeboten.

Bitte beachten Sie, dass wir keine SES-ähnliche Vor-Ort-Arbeit aktiv durchführen.

Sie können nahezu alle wichtigen Projektmanagement-Tools und Chat-Tools verwenden, wie Slack, Teams, Redmine, Backlog, Asana, Jira, Notion, Google Workspace, Zoom, Webex und mehr.

Konsultieren Sie uns gerne bei Ihren Web-Fragen.

Fallstudien