Schwabe Tebonin® Übungen gegen Schwindel – App Relaunch

Tebonin®ist ein pflanzliches Arzneimittel, das zur Behandlung von Vergesslichkeit und Konzentrationsschwäche im Alter, bestimmten Formen von Schwindel sowie Ohrgeräuschen und Tinnitus eingesetzt wird. Als Unterstützung der Therapie bei Schwindel gibt es bereits eine App, die mit Bewegungsübungen helfen kann. Ziel des Relaunches war es, das Nutzererlebnis der vorhandenen App zu optimieren

Die App Tebonin® Übungen gegen Schwindel unterstützt die Therapie bei Schwindel mit speziellen Übungen, die auf dem neuesten Stand wissenschaftlicher Erkenntnissen beruhen. Sie bietet 23 Übungsanleitungen, die dem Nutzer nach Eingabe der Diagnose zu einem passenden Übungsplan zusammengestellt werden.
Das Befinden des Nutzers wird regelmäßig von der App abgefragt und in einem Report dargestellt. Der Export dieser Daten kann dem behandelnden Arzt zur Verfügung gestellt werden.

Organisation und Durchführung des Projekts

In diesem Projekt waren wir für die Konzeption und alles was die User Experience und das Visual Design angeht, verantwortlich. Da es sich um ein medizinisches Produkt handelt, unterliegt die App verschiedenen Vorgaben im Entwicklungsprozess und der Dokumentation. Für diesen Bereich war die Firma Johner Medical Teil des Projektteams. Für regelmäßigen Austausch und um offene Fragen zu klären, haben wir uns für wöchentliche Sprintplannings zusammen mit dem Kunden getroffen.

Analyse der bestehenden App

Bevor wir mit der Überarbeitung des Designs begonnen haben, haben wir gründlich analysiert: Die Nutzungsdaten zeigten, dass die Downloadrate zwar hoch war, die App dagegen aber selten genutzt wurde. Es gab also pain points im Nutzererlebnis, die die Nutzer zum Ausstieg brachten. Wir führten zuerst einen ausführlichen UX-Audit durch, um diese Probleme in der Nutzerführung zu identifizieren und Lösungsansätze dafür zu finden. Die Kernzielgruppe an die wir uns mit der App richten, ist 60 Jahre oder älter und von Schwindel betroffen. Somit ist unsere Nutzergruppe tendenziell wenig technikaffin und in der Nutzung mobiler Endgeräte und deren Apps eher unroutiniert.

Konzeption der Funktionen und Nutzerführung

Im nächsten Schritt wandten wir uns der Konzeption der einzelnen Bereiche der App zu. Bei der Erstnutzung der App ist ein umfängliches Onboarding sehr wichtig: Auf den ersten Screens muss auf eine verständliche und einfache Art erklärt werden, was die App dem Nutzer bietet und welche Vorteile er davon hat. Außerdem werden wichtige medizinische Daten abgefragt, die den späteren Übungsplan beeinflussen. Der Prozess muss also klar erklärt werden und nachvollziehbar sein.

Für die Eingabe der Diagnose, den Übungsplan, die Reports und die Erinnerungs-Funktion der App, erstellten wir Screens und optimierten diese in mehreren Schritten. Wir haben die Texte, den Aufbau der Screens und die Nutzerführung immer weiter entwickelt und genau für die Zielgruppe angepasst. Wichtig war es, übersichtliche Screens zu erstellen, nicht zu viele Informationen und Interaktionen unterzubringen und die Sprache und Texte eindeutig und einfach verständlich zu halten. Nur so kann die App der Nutzergruppe gerecht werden.

Ausschnitt aus der Übersicht der Foundation Wireframes
Ausschnitt aus der Übersicht der Foundation Wireframes

Feedback von echten Nutzern: User Testing

Aus den daraus entstandenen Wireframes entwickelten wir low-fidelity Prototypen, um damit Nutzerfeedback einzuholen. Low-fidelity bedeutet, dass hier Inhalte und Funktionen ohne finales Visual Design abgebildet sind. Dafür haben wir moderierte Usability-Tests mit vier Personen aus der entsprechenden Zielgruppe durchgeführt. Der Prozess durchlief mehrere Iterationen: für die hier identifizierten Probleme entwickelten wir Lösungen und passten wenn notwendig die Texte, den Aufbau der Screens oder auch die Nutzerführung an, bis wir zu einem auf die Zielgruppe optimierten Ergebnis kamen.

Ein neues Visual Design für die App

Ein Design-System als Basis

Wir haben eine Auswahl von Screens vordefiniert und diese auf unsere Testergebnisse aufbauend ausgestaltet. Danach haben wir daraus ein Design System definiert, das wir für alle weiteren Screens in der Entwicklung als Grundlage verwendet haben.

Schwabe-Tebonin® Design-System
Ansicht der Components im Design-System

Native Apps für Android und iOS

Die App ist für Android und iOS Nutzer verfügbar. Da jedes Betriebssystem mit eigenen technischen Anforderungen und UI-Patterns arbeitet, haben wir zwei Design-Systeme erstellt. Wir haben uns entschieden mit den jeweiligen Schriftarten, die im System von Android und iOS verwendet werden, zu arbeiten. Das Erscheinungsbild wäre zwar konsistenter, aus folgenden Gründen haben wir uns jedoch für die Verwendung von Systemschriften entschieden:

  • bessere Performance
  • sehr gute Lesbarkeit, da die Schriften genau für diesen Zweck entwickelt wurden
  • Unterstützung von Systemanpassungen wie zum Beispiel dynamische Schriftgrößen
  • die Unterstützung aller Sprachen und Zeichen, da die App in sieben weitere Sprachen übersetzt wird
  • bei Apps mit Systemschriften muss nicht für jedes Update Entwicklungsarbeit investiert werden
Schwabe Tebonin iOS Android Schwindel Beschwerden OnBoarding
Screens aus dem OnBoarding – iOS links und Android rechts
Schwabe Tebonin iPad Home Dashboard

Schwabe-Tebonin-Exercise-Plan
Beispielscreen Übungsübersicht
Schwabe-Tebonin-Exercise-Timer
Timer während der Übung
Onboarding Screen Benachrichtigungen
Onboarding Screen Benachrichtigungen
Schwabe-Tebonin-Report-Vertigo-Week-View
Beispielscreen Report

Gestaltet und getestet haben wir auf den kleinsten aktuellen Device-Größen mit 320px Viewport-Breite. So konnten wir sicherstellen, dass alle Elemente und Texte ausreichend Platz auf allen Endgeräten haben. Die Umsetzung der App hat eine Agentur übernommen, die auf die mobile App Entwicklung spezialisiert ist. Aus dem finalen Design haben wir einen Styleguide im Tool Zeplin aufgebaut. So konnten wir alle (für die Umsetzung des Designs) notwendigen Informationen übersichtlich zur Verfügung stellen.

Fazit: Zusammenspiel von Nutzerbedürfnissen und Design

Mit dem Relaunch der Tebonin-App konnten wir in einem nutzerzentrierten Design-Prozess ein digitales Produkt weiterentwickeln, das passgenau auf die Bedürfnisse der Zielgruppe zugeschnitten ist. Die App hilft dem Nutzer neben ärztlicher Begleitung und Medikation, durch regelmäßige Übungen seine Schwindelbeschwerden zu verbessern und damit auch zu mehr Lebensqualität. Durch die optimierte Benutzerführung und das auf die Zielgruppe angepasste Visual Design findet er sich nun in der App zurecht. Wir freuen uns über das Ergebnis und danken unserem Kunden und Partner für eine tolle Zusammenarbeit!

Das Projektteam

Design und Experience
Jim Morrison, Doro Sthamer, Michael Wallner

Technische Dokumentation und summative Evaluation
Johner Medical

Hast Du Fragen zum Projekt oder unserem Prozess oder möchtest gerne selbst mit uns durchstarten? Dann geht es hier für Dich weiter.