RehApp - Rehabilitations-App für Amateursportler

Finales Design

Film

Prozess

Konzept & Recherche

Wir begannen unser Projekt, indem wir Informationen über sportbedingte Verletzungen im Allgemeinen sammelten. Dafür nutzten wir den Input einer auf Rehabilitation spezialisierten Ärztin sowie Informationen aus dem Internet und eigene Recherchen. Wir entschieden uns, den Fokus hauptsächlich auf laufbedingte Verletzungen zu legen, da diese sehr häufig sind und wir diesen Personen mit unserer aktuellen Erfahrung am besten helfen können.

Anschließend erstellten wir mehrere Personas, um unsere Zielgruppe besser zu verstehen und die Anwendung mit diesen im Hinterkopf entwerfen zu können. Außerdem bildeten wir eine User Journey Map, um den Prozess der Rehabilitation besser zu erfassen und die Schmerzpunkte (Pain Points) der Nutzenden identifizieren zu können.

Unsere Designphase führte zur Entwicklung zweier spezialisierter Schnittstellen: einer mobilen Ansicht für die in Behandlung befindliche Person und einer Desktop-Ansicht für das therapeutische Fachpersonal. Jede davon stellt eine eigene gestalterische Herausforderung dar – die Ansicht für die Therapie konzentriert sich auf die prägnante Darstellung nuancierter Informationen ohne ein kompliziertes Navigationssystem und beinhaltet mehrere informationsreiche Dashboards, die grafische Daten aufbereiten können. Im Gegensatz dazu priorisiert die Nutzeroberfläche der in Behandlung befindlichen Person motivationale Aspekte, mit dem Ziel, den Fortschritt bei der Rehabilitation ansprechend darzustellen.

Paper Prototyping

In unserem Designprozess begannen wir mit dem Paper Prototyping, einer Methode, die sich aufgrund ihrer Schnelligkeit ideal zur Evaluierung von Ideen eignet. Dieser Ansatz fördert zudem die Zusammenarbeit und hilft unserem Team, ein anfängliches Konzept zu definieren und die Informationsarchitektur für unsere Screens zu skizzieren.

Wireframing

Beim Übergang von unseren ersten papierbasieren Entwürfen nutzen wir ein gemeinsames Figma-Projekt, um digitale Wireframes zu erstellen und dabei unterschiedliche Designs und Farbschemata auszuprobieren. Durch diesen digitalen Ansatz konnten wir mehrere Home-Screen-Layouts bewerten, um herauszufinden, welche Darstellung unserer gewünschten Informationen am effektivsten ist. Letztlich entschieden wir uns für ein Design, das einen umfassenden, aber dennoch übersichtlichen Dashboard-Blick bietet – dies ist gut am ganz linken Layout unserer Beispiele zu erkennen. Diese Methodik erwies sich als vorteilhaft, da sie eine zu frühe Festlegung auf ein Design vermeidet und eine flexible Erkundung ermöglicht.

Moodboard

Nachdem das Layout feststand, begannen wir damit, Farbe in unser Design zu bringen. Anhand eines Moodboards voller passender Bilder, Adjektive und UI-Beispiele holten wir uns Inspiration, um unser Design mit Leben zu füllen. Dies beinhaltete auch die Entscheidung für eine bestimmte Schriftart. Unser Hauptziel war es, ein Interface zu schaffen, das die zu behandelnde Person durch seine ansprechende Gestaltung motiviert und gleichzeitig ein professionelles, jedoch visuell markantes UI für das therapeutische Fachpersonal bietet.

Screendesign

Auszug aus der Dokumentation: