Zum Inhalt springen
Martin Oellermann AI & Agentic Engineering

Case Study / Eigenes Produkt

MOE40

Entwicklung einer digitalen Plattform für Menschen ab 40, die Fitness, Ernährung und Longevity strukturiert in ihren Alltag integrieren möchten.

MOE40 besuchen (externe Website) (öffnet in neuem Tab)
Typ
Eigenes Produkt
Status
Status: In Entwicklung
Rolle
Produktstrategie · UX · Entwicklung · Content-Architektur
Fokus
Product Engineering · Interaktive Tools · Content-Plattform
Stack
  • Astro
  • TypeScript
  • Tailwind CSS
  • MDX

01 / Kontext

Aus Content wird ein digitales Produkt.

Themen rund um Fitness, Ernährung und Longevity bestehen häufig aus einzelnen Artikeln, Empfehlungen und Rechnern.

MOE40 verfolgt einen anderen Ansatz:

Inhalte, Tools und strukturierte Empfehlungen werden zu einer gemeinsamen digitalen Plattform verbunden.

02 / Herausforderung

Information allein verändert noch kein Verhalten.

Die zentrale Produktfrage lautet nicht nur:

Welche Informationen sollen Nutzer lesen?

Sondern:

Wie können Inhalte dabei helfen, den eigenen Stand einzuschätzen und daraus konkrete nächste Schritte abzuleiten?

  1. Eingabe : Information
  2. Schritt : Verstehen
  3. Entscheidung : Einschätzen
  4. Schritt : Priorisieren
  5. Schritt : Handeln
  6. Ergebnis : Fortschritt
Von der Information zum Fortschritt.

03 / Produktansatz

Lernen, einschätzen, handeln.

MOE40 verbindet drei Ebenen: Lernen über Inhalte, Einschätzen über interaktive Tools und Handeln über konkrete Empfehlungen.

Keine dieser Ebenen steht für sich. Erst zusammen ergeben sie ein Produkt, das über einzelne Artikel hinausgeht.

Content + Tools + Orientierung

  1. Eingabe : MOE40
    • Lernen: Content
    • Einschätzen: Tools
    • Handeln: Empfehlungen
  3. Ergebnis : Fortschritt
Content, Tools und Orientierung als eine Plattform.

04 / MOE40 Check

Vom Lesen zur Interaktion.

Der MOE40 Check ist der Schritt vom Lesen zur Interaktion: Nutzer durchlaufen 16 Schritte und erhalten daraus ein Ergebnis mit passenden Empfehlungen.

Engineering-Herausforderungen

  • Zustandsverwaltung über alle 16 Schritte
  • Validierung der Eingaben
  • Scoring-Logik
  • Zuordnung von Ergebnissen
  • Zuordnung von Empfehlungen
  • UX über viele Schritte hinweg
  • Barrierefreiheit
  1. Eingabe : 16 Schritte
  2. Eingabe : Nutzereingaben
  3. Schritt : Zustand
  4. Entscheidung : Scoring
  5. Schritt : Ergebnis
  6. Ergebnis : Empfehlungen
Vom Fragebogen zur Empfehlung.

05 / Interaktive Tools

Tools müssen mehr können als nur rechnen.

Beispiel Energy Calculator: Ein nützlicher Rechner braucht mehr als eine Formel.

  • Klare Validierung
  • Verständliche Fehlerzustände
  • Nachvollziehbare Ergebnisse
  • Responsive Bedienung
  • Barrierefreiheit
  • Tests

Die Ergebnisse dienen der Orientierung. Sie ersetzen keine medizinische oder ernährungswissenschaftliche Beratung.

  1. Eingabe : Nutzerdaten
  2. Entscheidung : Validierung
  3. Schritt : Berechnung
  4. Schritt : Ergebnis
  5. Ergebnis : Erklärung
Beispiel Energy Calculator: Rechnen ist nur ein Schritt von fünf.

06 / Content-System

Content als Teil der Produktarchitektur.

Inhalte werden nicht als isolierte Blogartikel behandelt, sondern als Teil der Produktarchitektur.

Langfristig sollen diese Ebenen miteinander verbunden werden:

  • Inhalte
  • Tools
  • Ergebnisse
  • Empfehlungen
  • Zukünftig: Personalisierung (geplant)
    • Artikel
    • Empfehlungen
    • Tools
    • Check
  2. Schritt : Community , Geplant
Heute verbunden: Artikel, Empfehlungen, Tools und Check. Community ist geplant.

07 / Architektur

Statisch schnell starten. Produktarchitektur offen halten.

Heute basiert MOE40 auf Astro mit statisch ausgelieferten Seiten, Content und Tools. Die Produktarchitektur bleibt offen für spätere Funktionen.

Account, Datenhaltung und Personalisierung gehören zur zukünftigen Produktrichtung – sie sind nicht live.

Aktuelle Architektur

  1. System : Astro
  2. Schritt : Seiten
  3. Schritt : Content
  4. Schritt : Tools
  5. Schritt : MDX / TypeScript
  6. Ergebnis : Frontend
Heute: Astro mit Seiten, Content und Tools.

Zukünftige Produktrichtung

  1. System : Plattform
  2. Schritt : Content
  3. Schritt : Tools
  4. Schritt : Account , Geplant
  5. Schritt : Daten , Geplant
  6. Ergebnis : Personalisierung , Geplant
Account, Daten und Personalisierung sind geplant – nicht live.

08 / Design

Eine eigene visuelle Sprache für das Produkt.

MOE40 hat eine eigene visuelle Sprache – unabhängig von dieser Website. Die Farbwelt basiert auf drei Tönen:

  • Deep Forest
  • Cream
  • Warm Gold

Schwerpunkte

  • Lesbarkeit
  • Klare Hierarchie
  • Ruhige visuelle Sprache
  • Konsistenz über das ganze Produkt
  • Eindeutige interaktive Zustände

Platzhalter · Screenshot folgt

MOE40 Check – Ergebnisansicht

Echter Screenshot aus dem Produkt, mobile und Desktop-Ansicht.

Platzhalter · Screenshot folgt

Energy Calculator

Eingabe, Validierung und Ergebnis in einem echten Screenshot.

09 / Responsive Design

Mobile nicht als verkleinerten Desktop behandeln.

Mobile Layouts werden bewusst gestaltet, während Desktop-Layouts über klare Breakpoints geschützt bleiben.

  • Mobile-first-Anpassungen
  • Bewusst gesetzte Abstände
  • Lesbare Inhaltshierarchie
  • Geschützte Desktop-Layouts
  • Tests in mehreren Bildschirmbreiten

10 / Qualität

Features sind erst fertig, wenn sie zuverlässig funktionieren.

Das Projekt nutzt automatisierte Tests für relevante Produktlogik und kritische Abläufe.

Die Zahl der Tests wächst mit dem Produkt – entscheidend ist, was abgesichert ist.

  1. Schritt : Bauen
  2. Schritt : Testen
  3. Entscheidung : Validieren
  4. Schritt : Review
  5. System : Ausliefern
  6. Schritt : Verbessern
Jede Änderung durchläuft denselben Kreislauf.

11 / Entwicklungsprozess

AI-unterstützt, aber spezifikationsgetrieben.

Planung und Produktentscheidungen bleiben explizit.

KI-Werkzeuge unterstützen Umsetzung und Iteration – Spezifikation, Architektur, Tests und Review geben den Rahmen vor.

  1. Eingabe : Produktidee
  2. Schritt : Spezifikation
  3. Schritt : Architektur
  4. KI : KI-gestützte Umsetzung
  5. Entscheidung : Tests
  6. Schritt : Review
  7. Ergebnis : Ausliefern
Planung und Entscheidungen bleiben explizit – KI unterstützt die Umsetzung.

12 / Engineering-Entscheidungen

Ein Produkt entsteht durch Entscheidungen.

  1. Content vs. Anwendung

    Wann bleibt ein Thema ein Artikel – und wann braucht es eine interaktive Anwendung?

  2. Einfachheit vs. zukünftige Architektur

    Heute schnell und statisch starten, ohne spätere Produktfunktionen zu verbauen.

  3. UX vs. Informationsdichte

    Fundierte Inhalte vermitteln, ohne Nutzer mit Details zu überladen.

  4. Mobile vs. Desktop

    Beide Layouts bewusst gestalten, statt eines nur zu verkleinern.

  5. Feature vs. Produkt

    Neue Funktionen nur, wenn sie den Nutzerpfad als Ganzes verbessern.

13 / Learnings

Was MOE40 als Engineering-Projekt interessant macht.

  1. Produktarchitektur

    Content, Tools und Empfehlungen als zusammenhängendes System planen.

  2. Frontend Engineering

    Interaktive Tools mit sauberem State, Validierung und klaren Fehlerzuständen.

  3. UX

    Komplexe Themen in verständliche Schritte übersetzen.

  4. Testing

    Produktlogik und kritische Abläufe automatisiert absichern.

  5. Produktentscheidungen

    Priorisieren, was den Nutzerpfad wirklich verbessert.

  6. KI-gestützte Entwicklung

    Schneller umsetzen, ohne Spezifikation und Review aufzugeben.

14 / Aktueller Stand

Die Plattform entwickelt sich schrittweise weiter.

MOE40 wird in einzelnen Bereichen weiterentwickelt. Der Stand je Bereich:

  1. Plattform-Fundament

    Status: In Weiterentwicklung

  2. Content-System

    Status: In Weiterentwicklung

  3. MOE40 Check

    Status: Live

  4. Interaktive Tools

    Status: In Weiterentwicklung

  5. Empfehlungen

    Status: In Weiterentwicklung

  6. Community

    Status: Geplant

  7. Personalisierung

    Status: Geplant

Stand: September 2026

15 / Nächste Schritte

Von der Content-Plattform zum persönlichen Begleiter.

Die weitere Entwicklung verbindet Inhalte, Tools und Nutzerpfade stärker miteinander.

Neue Funktionen sollen nicht isoliert entstehen, sondern Content, Daten und konkrete nächste Schritte sinnvoll verbinden.

MOE40 ansehen (externe Website) (öffnet in neuem Tab) Weitere Case Studies