WCAG

UI-Anpassungen gemäß WCAG

COMPANY

Famly

ROLE

UI Designer

Year

2025

Project description

Famly ist eine App, die von Kindertagesstätten, Kindergärten und Eltern genutzt wird, um die tägliche Kommunikation zu erleichtern. Das Benachrichtigungssystem hilft dabei, wichtige Nachrichten, Erinnerungen und organisatorische Infos zwischen Erzieher*innen und Familien auszutauschen.

Meine Rolle
UI Designerin
Bei den verschiedenen zu optimierenden Punkten habe ich mich nur auf den Bildschirm mit den Benachrichtigungen konzentriert, da dies der am häufigsten von den Nutzern besuchte Screen ist.

Ich habe eine eigenständige Analyse der Benutzeroberfläche durchgeführt und einen überarbeiteten Vorschlag für die Darstellung von Benachrichtigungen erstellt, mit Fokus auf Barrierefreiheit, Informationsstruktur und visuelle Hierarchie.
Das Ziel war, die Oberfläche zu verbessern, aber die Änderungen möglichst klein zu halten, damit die Nutzer auf beiden Seiten keine Probleme bei der Navigation bekommen.

Problem

Im bestehenden Design der App wirken alle Nachrichten optisch gleich, unabhängig davon, ob sie persönlich, informativ oder dringend sind. Dadurch wird es für Eltern schwierig, die Relevanz und Dringlichkeit einer Nachricht auf den ersten Blick zu erkennen.
Die visuelle Gleichheit aller Nachrichten erschwert die Orientierung:



Abstand Absender-Icon: ausgleichen, mittig, Ungleichgewicht

  • Textgewicht: zu nah, Stunden zu hell/klein.

  • Datumsangaben: schwer verständlich, „vor 13 Stunden“ ersetzen.

  • Nachrichtenvorschauen: zu früh abgeschnitten, Inhalt schwer erkennbar.

  • Abstand Absendername: fehlt.

  • Einheitliches Layout: trotz unterschiedlicher Wichtigkeit.

  • Persönliche Benachrichtigungen: visuell stärker hervorheben, kein leeres Profilbild.


Lösung

Durchführung einer Recherche mit Eltern und der Kita, um bestehende Herausforderungen bei der Terminplanung sowie Nutzerpräferenzen zu identifizieren. Zielgruppensegmente wurden definiert und zentrale Funktionen anhand der Nutzerbedürfnisse abgeleitet.

  • Bessere visuelle Unterscheidbarkeit der Nachrichtentypen
    (z. B. persönlich, dringend, organisatorisch).

  • Verbesserung der Barrierefreiheit
    Durch klare Sprache und mehr Weißraum.

  • Strukturierung der Nachrichten
    Nach Absender, Inhalt und Zeitpunkt.

  • Schnellere Erfassbarkeit der Inhalte
    Auch für Nutzer mit Sehbeeinträchtigung oder geringer digitaler Kompetenz.





Links die ursprüngliche, rechts die optimierte Version des Screens.
Der Separator zwischen den einzelnen Nachrichten wurde in einem dunkleren Grauwert (#B1B1B1) umgesetzt und der vertikale Abstand von ursprünglich 1 px auf 3 px erhöht, um visuelle Klarheit und bessere Informationsstrukturierung zu gewährleisten.