Ein Mädchen fotografiert mit dem Handy eine Kuh in den Bergen.

MemoryBox

MemoryBox ist ein digitales Tagebuch. Die Web-App wurde im Rahmen einer Studie speziell für fremdplatzierte Kinder und Jugendliche entwickelt.

YOUVITA engagiert sich als Branchenverband für 370 Organisationen, die über 10'000 Kinder, Jugendliche und junge Erwachsene begleiten. «MemoryBox» entstand ursprünglich als Kooperationsprojekt mit der Berner Fachhochschule BFH und will es fremdplatzierten Kindern und Jugendlichen ermöglichen, das Thema der biografischen Zugehörigkeit kreativ zu reflektieren und langfristig zu dokumentieren.

Progressive Web App

Für den Relaunch wurde die MemoryBox von Grund auf modernisiert. Wir setzten in sämtlichen Projektphasen KI-Tools ein, um den Zeit- und Budgetrahmen einhalten zu können. Das Resultat ist eine Progressive Web App (PWA), die das digitale Tagebuch auf ein neues, zeitgemässes Level hebt.

Kunde
YOUVITA

Leistungen

3 Smartphone-Screens der Webapp MemoryBox

Vibe Coding mit KI-Tools

Im Vorfeld führten wir für die Offerte erste Machbarkeits-Studien durch. Dabei prüften wir verschiedene Technologie-Ansätze, um herausfinden, wie sich das Projekt mit seinen spezifischen Anforderungen am wirtschaftlichsten umsetzen lässt:

Lösung mit TYPO3 CMS
Vibe Coding mit KI-Tools
React Native App
No-Code/Low-Code-Editoren

Wir entschieden uns schliesslich für Vibe Coding. Das beste Resultat erzielten wir mit der schwedischen KI-Plattform lovable.dev, die uns erstaunlich schnell einen funktionierenden Prototypen erstellte. Die fachlich präzise Formulierung des Prompts spielte dabei eine entscheidende Rolle. Im Workflow mit GitLab zeigten sich allerdings auch Schwächen, was mit der Grund war, dass wir nach rund einem Monat auf eine lokale Installation wechselten und die Progressive Web App auf unserem eigenen Server weiterentwickelten.

Vom Prototyp zum digitalen Tagebuch

Nachdem die Grundfunktionen umgesetzt waren, fand ein regelmässiger wöchentlicher Austausch mit YOUVITA statt, um den Stand zu besprechen, Fragen zu klären und Prioritäten zu setzen.

Im Design entstand ein einfaches Logo und eine intuitive Benutzeroberfläche, die sich an Anwendungen orientiert, wie sie Kinder und Jugendliche von Social-Media-Apps her kennen. Im Profil stehen vier farbenfrohe Themes zur Auswahl: Deep Dive, Candy Sky, Galaxy Pop und Moon Dust.

Die Features der MemoryBox

Im ersten Release der neuen App konnten alle wesentlichen Funktionen umgesetzt werden. Ein wichtiger Aspekt war der Datenschutz. Gerade bei einem digitalen Tagebuch handelt es sich um sensible Informationen, die nur der Person, die sie erfasst hat, zugänglich sein dürfen. Die URL zu Bildern und Videos ist zusätzlich verschlüsselt und signiert mit einem Token, der nach 30 Minuten abläuft.

Nebst der normalen Nutzung der Web-App gibt es einen Admin-Bereich, wo die User und Organisationen verwaltet werden. Die ausgewählten Kinder und Jugendlichen erhalten von ihrer Organisation, die sie begleitet, einen einmaligen Codeschlüssel, um sich registrieren zu können.

Authentifizierung: Registrierung, Validierung, Login/Logout, Erstellen von Registrierungsschlüsseln, Passwort-Reset.
Journal: anlegen, bearbeiten und löschen von Tagebucheinträgen mit Titel, Rich Text Editor, Coverbild, Bildergalerie, Video, Datum, Tags, Ort mit Geo-Mapping.
Timeline: Übersichtsseite mit infinite Scroll
Suche/Filter: Keyword, Tags, Ort, Datum bzw. Zeitraum, Bildergalerie, Video
Einstellungen: Profilbild, persönliche Angaben, Sprache, Design-Theme
Administration: Rollen für User, Institutionen und Global Admin mit Admin-Tools für Registrierungsschlüssel und Benutzerverwaltung