Projekte / UX/UI Design / SeniorCare Plus ✕

Erst Vertrauen, dann das Konto.

Pflegedienste online zu buchen, sollte sich für ältere Menschen nicht riskant anfühlen. SeniorCare Plus schafft Vertrauen, bevor die App etwas verlangt.

Projektart
App für Mobile und Tablet · Neues Produkt (fiktives Briefing)
Kontext
Teamprojekt (3 Designerinnen und Designer) · UX/UI Design, Mediadesign Hochschule · Apr. – Sep. 2026
Rolle
UX/UI Designerin · Mein Fokus: UI-Design für Onboarding, Profil, SMS-Verifizierung, Hilfe und die Tablet-Version
Tools
Figma · Miro
Screens von SeniorCare Plus auf geneigten Smartphones: Essensbestellung, Bestellübersicht und Bestätigung
  • 2 Personas → 8 Designentscheidungen
  • Prototyp für Mobile + Tablet

01Überblick

SeniorCare Plus ist eine App für Mobile und Tablet, mit der sich Angebote für Seniorinnen und Senioren leicht finden und buchen lassen: Essen auf Rädern, Aktivitäten, Neuigkeiten und Bewertungen. Sie richtet sich an ältere Menschen und ihre Familien.

Das Problem

Ältere Menschen tun sich mit digitalen Diensten oft schwer: kleine Schrift, unklare Navigation und lange Anmeldeformulare. Viele vertrauen Online-Buchungen grundsätzlich nicht. Ziel war eine App, die sie sicher und ohne Hilfe nutzen können.

02Research

Wir haben mit User-Interviews begonnen und daraus eine Empathy Map, zwei Personas, User Flows und eine Sitemap entwickelt.

Porträt von Leo
Leo, 78

Aktiv und neugierig, hat aber noch nie online etwas gebucht und hat Angst vor Betrug. Braucht Belege, bevor er bucht.

Porträt von Hilde
Hilde, 82

Möchte selbstständig bleiben, hat wenig Interneterfahrung, vergisst oft Passwörter und ruft lieber an, als Formulare auszufüllen.

Gemeinsame Ängste

  • Der Website nicht vertrauen
  • Den falschen Button drücken
  • Sich in langen Abläufen verlieren

Empathy Map

Wir haben alle Interviews in einer gemeinsamen Empathy Map zusammengeführt. Leo und Hilde haben unterschiedliche Gewohnheiten, aber dieselben Ängste: Betrug, versteckte Abos und den falschen Button zu drücken.

Gemeinsame Empathy Map der befragten älteren Menschen, mit Pains, Gains und Kernerkenntnis

Sitemap

Eine flache Struktur mit wenigen Ebenen. Hilfe, Kontakt und Barrierefreiheit sind über das Profil und den Sticky Footer immer nur einen Tap entfernt.

Sitemap von SeniorCare Plus: Startseite, Konto, Leistungen, Profil und Servicebereich

03Insights → Entscheidungen

Jede Entscheidung antwortet auf eine dieser Ängste.

  1. Erst VertrauenBewertungen nach Angebot gefiltert, ein Qualitätssiegel und eine „Über uns“-Seite mit echten Zahlen.
  2. Erst buchen, später registrierenZum Start ist kein Konto nötig. Das Konto wird erst nach der bestätigten Buchung angelegt.
  3. Passwort optionalRegistrierung per Handy mit SMS-Code, ohne Passwort. Per E-Mail geht es auch, und man bleibt angemeldet.
  4. Vertraute ZahlungBar vor Ort oder mit Karte bezahlen. Keine Online-Zahlung nötig.
  5. Keine Angst vor FehlernEin Zurück-Button in jedem Schritt und eine Bestätigung vor dem Abbrechen, damit keine Daten verloren gehen.
  6. Hilfe immer sichtbarEine Leiste „Benötigen Sie Hilfe?“ mit Telefonnummer auf jedem Screen.
  7. Barrierefreiheit auf jedem ScreenAnpassbare Schriftgröße, Kontrastmodus, Vorlesefunktion und die Schrift Atkinson Hyperlegible.
  8. Klare SpracheEinfaches Deutsch mit „Sie“, ohne englische Begriffe.

04Design

Bestellung Schritt für Schritt

Die Bestellung für „Essen auf Rädern“ haben wir gemeinsam im Team direkt im finalen UI gestaltet. Zuerst prüft man, ob in der eigenen Gegend geliefert wird. Dann folgen sechs Schritte mit je einer Frage: Ernährungswünsche, Zusatzleistungen, Gerichte für die gewählten Tage, eine Übersicht der Gerichte, Lieferdaten und eine Zusammenfassung mit Zahlung. Ein Danke-Screen bestätigt die Bestellung.

Die ganze Bestellung von Essen auf Rädern auf neun Screens, von der PLZ-Prüfung bis zum Danke-Screen

SMS-Verifizierung für ältere Menschen

Ein Code, der 10 Minuten statt der üblichen kurzen Zeit gültig ist, klare Fehler- und Ablaufmeldungen und eine einfache Möglichkeit, eine falsche Telefonnummer zu korrigieren.

Screens zur Kontoerstellung und SMS-Code-Eingabe, inklusive falschem und abgelaufenem Code

Tablet-Version

6-Spalten-Grid (32 px Ränder, 20 px Abstände), Icons für Barrierefreiheit an erster Stelle im Footer und eine zweispaltige Auswahl der Gerichte.

Die Startseite auf einem Tablet und einem Smartphone

Design System

Ein dokumentiertes Design System, dessen Komponenten und Benennung das Team früh festgelegt hat. Farben: Lila als Primärfarbe, Gelb als Akzent, Hellblau, Taupe und Beige als Sekundärfarben und Orange für Warnungen. Schriften: Young Serif für Überschriften und Atkinson Hyperlegible für Fließtext, entwickelt für Menschen mit Sehschwäche.

Styleguide: Logoversionen, Typografie, Farben, Icons und Button-Zustände

05Feedback & Iteration

Wir haben den Prototyp während des Kurses mit unseren Dozierenden getestet und ihr Feedback eingearbeitet.

Barrierefreiheit & Hilfe

Vorher

Es gab keine Einstellungen für Barrierefreiheit und keinen direkten Weg zu Hilfe.

Nachher

Drei große Buttons für Barrierefreiheit im Footer, ein kostenloses Beratungsgespräch und eine Leiste „Benötigen Sie Hilfe?“ auf jedem Screen. So ist Hilfe immer nur einen Tap entfernt.

Footer mit drei großen Buttons für Barrierefreiheit, Beratungsgespräch und Kontaktformular

Benachrichtigungen

Vorher

Ältere Menschen übersehen Nachrichten über andere Kanäle leicht.

Nachher

Wichtige Nachrichten erscheinen auch bei der Glocke in der App, damit nichts verloren geht.

06Finale Lösung

Ein interaktiver Prototyp für Mobile und Tablet, ein dokumentiertes Design System und ein Handover-Paket für die Entwicklung mit Spezifikationen für alle wichtigen Screens.

Im Video prüft eine Nutzerin, was andere sagen und wer hinter dem Angebot steht, bevor sie einen Malkurs bucht.

  1. Bewertungen anderer lesen
  2. Die Seite „Über uns“ ansehen
  3. Einen Malkurs buchen

07Learnings

  • Das Gestalten für ältere Menschen hat mir gezeigt, dass Vertrauen und Klarheit wichtiger sind als Funktionen.
  • Jeder zusätzliche Schritt und jede unklare Beschriftung kann dazu führen, dass jemand aufgibt.
  • Im Team hält eine frühe Einigung auf Komponenten und Benennung das Design konsistent.