Radioeye

The product

Research from Charité radiologists was used to train an ML model, aiming to aid clinicians in their diagnosis of various eye conditions. Freed from the manual research of printed text books or searching case history databases, clinicians can now upload MRI scans to the application. They then receive potential diagnoses, along with case history and fully-navigable scans – increasing vital speed and accuracy.

First steps

Our design team quickly understood the project’s vision thanks to Radioeye’s prototype click dummy. Working with their radiographers, we reimagined the app’s userflow and user interface by introducing key concepts to better fit the product to the needs of clinicians. Core functionality was improved with the addition of extra screens and UI states.

We also undertook several rounds of workshops to refine the process for uploading images, taking care to account for real-world clinicians using the app themselves – while integrating the radiologists’ PACS system (which they use to navigate MRI imaging).

Refinements

While bitcrowd was working with the radiologists to create the first userflows and wireframes, we introduced the concept of “case triage” to help clinicians use the cases presented to them by the ML algorithm. This meant clinicians could use a “pinned case” list for easy access to relevant cases – showing suspected matches which could include several different conditions as a differential diagnosis, improving the accuracy, speed, and completeness of the assessment.

Taking on the user’s perspective, we also identified potential friction and points of confusion for clinicians when using the app so we could add extra guidance where needed.

Prototypes

At this early design stage, we’ll use a click dummy prototype to bring the app to life. Using wireframes, we link each screen to the next with the simple click of a button. Being able to click from screen to screen gives a feel for how the app will work, letting us spot any potential problems.

Very low-fidelity wireframes were used to build the first prototype, which we then updated with increasingly high-fidelity screens as we refined them. Using prototypes to guide our changes during these design iterations allowed us to improve the position and grouping of several UI elements. This made Radioeye’s interface especially clear and straightforward.

Visual design

While we were working on increasingly high-fidelity designs, we refined the layout to Radioeye’s particular needs. Here the UI needed to be both minimal and highly functional, with a “dark mode” schema to match standard MRI image viewing software.

Of course functionality is key, but it’s also important that the UI looks good! We created variations of their official colours that fit the dark mode design in order to give it a recognisable yet subtle branding. The icon set was carefully chosen for both clarity and character – creating an interface that works well and looks the part.

Frontend web app

Using the visual designs, userflows, and prototypes, our frontend team went to work on creating a highly-responsive React web application. The component library was organised using Storybook, allowing us to build, test, QA, and refine the UI while simultaneously working on app functionality.

The Radioeye app operates on a range of devices: from the radiology lab's multi-monitor desktop PCs to less powerful laptops and tablets.

Backend functionality

The web app still needed to be tied to the machine learning technology, so it was designed to make requests to an Elixir API custom-built by bitcrowd’s backend team. The images the web app sends to the API running on the server are passed on to the ML algorithm, with the resulting cases pulled from the database. The relevant cases are then sent to the app and displayed to the clinician.

Iteration

Radioeye V1 was trialled in hospitals across Berlin. BIH then approached bitcrowd for a second iteration. V2 was conceived with the help of user feedback, offering significant improvements to the UI and overall navigation. A hierarchical list of cases was also added, grouped according to regions of the eye – allowing doctors to leverage the ML results with their own expertise.

V2’s new onboarding flow helped guide new users when using the application, and we improved the transitions between the PACS system and Radioeye. As the screen sizes commonly used by radiologists are squarer in format, we designed a landscape version of the product to enhance the user experience.