Zurück zur Übersicht

Software MCP Redesign

MCP Software

Mission Control Paramedic ist eine Software, die dazu gedacht ist den Einsatzleitern des Deutschen Roten Kreuz Karlsruhe bei der Planung und Koordination von Einsätzen zu helfen. Die Software kann sowohl für Windows, MacOS und Linux über die Homepage www.[mission-control-paramedic.de](https://www.mission-control-paramedic.de/) heruntergeladen und kostenlos genutzt werden.

Die Entwicklung von Mission Control Paramedic (MCP) entstand durch eine Initiative der inovex GmbH und dem Deutschen Roten Kreuz Karlsruhe. Das Ziel ist es, gemeinsam eine Software zu entwickeln, die schneller und effizienter Einsätze verwalten kann.

MCP Patientendashboard

Die Herausforderung

Zukünftig soll “Mission Control Paramedic” (MCP) nicht nur dem Deutschen Roten Kreuz Karlsruhe, sondern auch einem deutschlandweiten Publikum zur Verfügung stehen. Das Team von CherryTea bei inovex hat den Plan, MCP deutschlandweit zu vermarkten. Um diesen Plan erfolgreich umzusetzen, müssen sowohl die Bedienbarkeit von MCP verbessert als auch neue Funktionalitäten hinzugefügt werden.

Dabei habe ich festgestellt, dass es einige Herausforderungen gibt, die es zu überwinden gilt, damit MCP erfolgreich werden kann.

Verbesserung der Bedienbarkeit und Nutzerfreundlichkeit durch das Einführen folgender neuer Schritte:

  • Ein verständlicher Login Prozess erarbeiten, der die Nutzer anregt weiter mit MCP zu interagieren
  • Ein User Onboarding erarbeiten, damit die Nutzer die Möglichkeit haben sich Hilfe bei den ersten Schritten mit MCP zu holen
  • Ein Light Mode einführen, da der aktuelle Dark Mode unter speziellen Lichtverhältnissen nicht gut sichtbar ist. Ebenso wie, da es Nutzergruppen gibt, die sich mit dem Dark Mode schwer tun.

Verbesserung der Bedienbarkeit und Nutzerfreundlichkeit durch das Erweitern bereits existierender Grundlagen:

  • Mehr Klarheit, Wiedererkennungsmerkmale und Struktur innerhalb von MCP schaffen
  • Betrachtung der ganzheitlichen Bedienbarkeit von ,,In-between” States, wie zum Beispiel Empty States
  • Neu hinzukommende Funktionen gestalten

Die Ausführung

Die Ausführung dieser Aufgaben erfolgte in unterschiedlichen Schritten. Jeder dieser Punkte wurde zeitlich nacheinander angegangen.

Existierende Grundlagen ausbauen

MCP Design System

Zunächst habe ich gängige Prinzipien angewendet, um die Bedienbarkeit von MCP zu verbessern. Ich habe Überschriften aus den Panels entfernt, um mehr Klarheit und Platz zu schaffen. Die Hierarchie der Überschriften wurde überarbeitet, damit Nutzer mit nur einem Blick erkennen können, wo die wichtigsten Texte stehen. Die wichtigsten Buttons wurden in der Akzentfarbe gestaltet und erhielten individuelle Icons, um sie für den Nutzer leichter erkennbar zu machen und sie schneller nutzen zu können.

Ganzheitlicher Nutzererfahrung betrachten

MCP Einsatzdashboard

In der Welt des Designs, genau wie im Leben, verlaufen die Dinge selten genau wie geplant. Großartiges UX-Design antizipiert unerwartete Umstände ebenso wie ideale Szenarien.

Da das Ziel ist, neue Nutzer anzuziehen, soll die Erfahrung von neuen Nutzern in den Fokus gerückt werden. Ist das Tool zu Beginn noch sehr leer, sollen Empty-State Illustrations uns Beschreibungen dem Nutzer dabei helfen, sich zurechtzufinden.

Login Prozess vereinfachen

MCP Login

Bereits der erste Schritt nach dem Herunterladen von MCP war eine Hürde für jeden neuen Nutzer. Daher wurde, unter Berücksichtigung der Nutzer, ein neuer Prozess erarbeitet. Neue Nutzer sollen durch die Hilfestellung von zwei Buttons an die Hand genommen werden. Sie können entweder ein neues Team erstellen oder einem bereits existierenden Team beitreten.

Anhand von diesen Buttons werden sie durch den jeweiligen Prozess geführt. Ein neues Team kann innerhalb von vier Schritten erstellt werden. Jeder Schritt wird mit einer Schrittanzeige und passenden Illustrationen begleitet. Ebenso wie klare und einfach gehaltene Input-Felder. Einem existierenden Team kann innerhalb von zwei Schritten beigetreten werden.

Dabei mussten unterschiedliche Aspekte der Nutzer mit einbezogen werden. Wie zum Beispiel, dass das Erstellen und Beitreten eines Teams nur anhand von einem hohen Sicherheitsmaßstab erfolgen darf, da mit MCP sensible Patientendaten verwaltet werden. Ebenso wie, dass die Nutzer kein Internetempfang haben und das Beitreten eines Teams über eine IP-Adresse erfolgen muss.

Das führte zu einigen Herausforderungen. Wie macht man den Nutzern klar, dass sie zunächst einen Server starten und dann sich bei dem Server einloggen müssen? Wie transparent gestaltet man diese Information? Verstehen unsere Nutzer was ein Server ist? Wie können Zugangsdaten ausgetauscht werden, ohne Internet?

Um diese Fragen zu beantworten wurden qualitative Nutzertests durchgeführt, die Licht ins Dunkle brachten und den Designprozess voranbrachten.

Onboarding hinzufügen

MCP Onboarding

Wurde die erste Hürde des Registrierens gemeistert, steht bereits das nächste Problem vor der Tür. Damit die Nutzer in den ersten Momenten direkt an die Hand genommen werden habe ich ein Onboarding ausgearbeitet. Es zeigt die ersten Schritte mit MCP auf und bietet die Möglichkeit bei Fragen immer wieder zurückzukommen.

Dafür wurde auf der ersten Seite ein Herzliches Willkommen eingerichtet. Mit verschiedenen Touren wird erklärt, wie man mit MCP einen Sanitätsdienst optimal vorbereiten kann. Darunter spezielle Informationen der wichtigsten Übersichtsseiten, die währen der Durchführung eines Sanitätsdienstes genutzt werden. Das Schlusslicht bildet ein FAQ Bereich, der über zusätzliche Fragen aufklären soll.

Light Mode und Dark Mode

MCP Light Mode

MCP wurde als Dark Mode Tool konzipiert. Nicht jeder Nutzer arbeitet gut und gerne mit einem Dark Mode. Insbesondere im Freien, eignet sich der Dark Mode schlecht, da nicht alle Elemente bei starken Lichtverhältnissen zu erkennen sind. Daher wurde ein Light Mode entworfen, der Licht ins Dunkle bringen soll. Dafür wurde ein Button für den Light Mode hinzugefügt und die Farbpallette angepasst.

Das Prototyping

MCP Login

Jeder dieser Schritte wurde mit Hilfe von Figma zunächst in einem Prototyp umgesetzt, um diesen dann an die zuständigen Entwickler weiterzugeben. Durch meine Erfahrung als Frontend-Entwicklerin konnten die unterschiedlichen Anforderungen einfach und schnell kommuniziert werden.

Fazit

Durch MCP konnte ich tiefer in die Erwartungen und Probleme von Erstnutzern eintauchen und anhand davon unterschiedliche Lösungsansätze erarbeiten. Ich habe gelernt, wie wichtig die ersten Sekunden, die der Nutzer auf deinem Tool verbringt, sind und wie man sie effektiv nutzen kann.

Je tiefer ich mich in die Thematik einarbeite, desto mehr Möglichkeiten erkenne ich. Diese Möglichkeiten will ich in weitere Projekte einfließen lassen, damit sich Nutzer endlich verstanden fühlen.

TL;DR

Verbesserung der Bedienbarkeit von Mission COntrol Paramedic

Der UX-Happen des Tages

Buttons sollten nicht zu weit oder zu schmal sein. Für Webseiten ist ein Padding von 32px links und rechts optimal.