Radioeye

Das Produkt

Erste Schritte

Dank des von Radioeye entwickelten Prototyps erfasste unser Design-Team die Projektvision schnell und präzise. In enger Zusammenarbeit mit den Radiolog*innen überarbeiteten wir die Userflows und das UI-Design der App, um das Produkt besser an die Bedürfnisse der klinischen Fachkräfte anzupassen. Die Kernfunktionen wurden durch die Integration zusätzlicher Screens und UI-Elemente weiter optimiert.

Wir führten mehrere Workshop-Runden durch, um den Prozess des Bild-Uploads zu optimieren und sicherzustellen, dass dieser den Anforderungen der klinischen Anwender*innen gerecht wird. Parallel dazu integrierten wir das PACS-System der Radiolog*innen, das zur Navigation von MRT-Bildern dient.

Konzeptanpassungen

Während der Entwicklung der ersten Userflows und Wireframes arbeitete bitcrowd eng mit Radiolog*innen an der Einführung eines neuen Konzepts namens „Fall-basierte Triage“. Dieses Konzept unterstützt medizinisches Fachpersonal dabei, die vom Algorithmus vorgeschlagenen Fälle gezielter zu bewerten und anzuwenden. So ermöglicht es eine „gepinnte Fall-Liste“ für schnellen Zugriff auf relevante Fälle. Angezeigte potenzielle Übereinstimmungen umfassen dabei verschiedene Diagnosen als differentialdiagnostische Optionen, was die Genauigkeit, Geschwindigkeit und Vollständigkeit der Beurteilung erheblich verbessert.

Indem wir uns in die Perspektive der Nutzer:innen versetzten, identifizierten wir mögliche Hürden und Unklarheiten für das klinische Personal, um an diesen Stellen gezielt zusätzliche Hilfestellungen einzubauen.

Prototypen

In dieser frühen Designphase setzten wir einen Click-Dummy-Prototypen ein, um die App zum Leben zu erwecken. Mit Wireframes verknüpften wir jede Ansicht durch einen einfachen Klick, wodurch wir die Navigation von einer Ansicht zur nächsten simulieren konnten. So erhielten wir ein erstes Gefühl für die Funktionsweise der App und konnten potenzielle Probleme frühzeitig identifizieren.

Für den ersten Prototypen verwendeten wir zu Beginn einfache Low-Fidelity-Wireframes, die wir im Laufe der Zeit zu detaillierteren High-Fidelity-Wireframes weiterentwickelten.

Durch den Einsatz von Prototypen während der Design-Iterationen konnten wir die Position und Gruppierung der UI-Elemente kontinuierlich verfeinern. Dadurch entstand eine besonders klare und benutzerfreundliche Oberfläche, die die Nutzererfahrung bei Radioeye auf das nächste Level hob.

Visuelles Design

Während wir die Designs immer weiter verfeinerten, passten wir das Layout gezielt an die spezifischen Anforderungen von Radioeye an. Die Benutzeroberfläche sollte dabei sowohl minimalistisch als auch hochfunktional sein, mit einem „Dark Mode“, der sich nahtlos in die gängige Software für die Anzeige von MRT-Bildern einfügt.

Natürlich steht Funktionalität an erster Stelle, aber auch das visuelle Design spielt eine entscheidende Rolle! Wir entwickelten verschiedene Varianten der offiziellen Farbpalette, die perfekt zum Dark Mode passten und zugleich eine subtile Markenwiedererkennung ermöglichten. Das Icons-Set wählten wir mit Bedacht aus, um sowohl Klarheit als auch Charakter zu vermitteln – so entstand eine Oberfläche, die nicht nur hervorragend funktioniert, sondern auch optisch überzeugt.

Frontend Webanwendung

Mit den visuellen Designs, Userflows und Prototypen begann unser Frontend-Team mit der Entwicklung einer besonders responsiven React-Webanwendung. Die Komponentenbibliothek wurde mithilfe von Storybook strukturiert, sodass wir die Benutzeroberfläche kontinuierlich erstellen, testen und optimieren konnten, während gleichzeitig die Funktionalität der App weiterentwickelt wurde.

Die Radioeye-App ist auf einer breiten Palette von Geräten einsatzfähig – von den leistungsstarken Desktop-PCs im Radiologielabor bis hin zu weniger leistungsstarken Laptops und Tablets.

Backend Funktionaliät

Um die Webanwendung mit der Machine-Learning-Technologie zu integrieren, wurde sie so entwickelt, dass sie Anfragen an eine speziell vom Backend-Team bei bitcrowd entworfene Elixir-API stellt. Die Webanwendung sendet dabei Bilder an die API, welche diese an den ML-Algorithmus weiterleitet. Der Algorithmus ruft daraufhin relevante Fälle aus der Datenbank ab, die schließlich zurück an die Anwendung übermittelt und dem klinischen Personal angezeigt werden.

Iteration

Radioeye V1 wurde in verschiedenen Krankenhäusern in Berlin getestet. Daraufhin wandte sich das BIH an bitcrowd um eine zweite Version zu entwickeln. V2 wurde auf Basis von Feedback der Nutzer:innen konzipiert und brachte bedeutende Verbesserungen in der Benutzeroberfläche sowie der Navigation. Eine hierarchische Fall-Liste wurde hinzugefügt, die Fälle nach Regionen des Auges gruppiert – so können Ärzt*innen die Ergebnisse des Machine Learning mit ihrem eigenen Fachwissen kombinieren.

Der neue Onboarding-Prozess in V2 erleichterte es neuen Nutzer:innen, sich schneller in der Anwendung zurechtzufinden. Darüber hinaus verbesserten wir die Übergänge zwischen dem PACS-System und Radioeye. Da Radiolog*innen häufig mehr quadratische Bildschirme verwenden, entwickelten wir eine Landscape-Version der Anwendung, um die Benutzererfahrung weiter zu optimieren.