The Basics

We were asked to design and build a more doctor-friendly version of new medical imaging transfer product. The BEAM system was originally built to solve the costly and time-consuming problem of transferring large medical imaging studies—MRI, CT scans, etc—from one facility to another. The system allowed medical image librarians (in a hospital or imaging facility) to efficiently send large files across BEAM’s point-to-point network, rather than spending 8+ hours per day burning imaging studies onto DVDs and mailing them to another hospital.

While BEAM was purpose-built to make image librarians more effective, the company’s founder and Chief Medical Officer (a radiologist by training) realized that there was a great opportunity in allowing doctors (specialists called in for case consultations) to review and share imaging studies themselves.

BEAM’s founder and CMO brought our team in to build a cloud-based web app tailored for radiologists. This product presented unique challenges: build an application that was easy for busy doctors to use, and interface with BEAM’s legacy point-to-point system.

The Process

Investigation

Our first step was to build an understanding of radiologists’ image viewing and sharing workflow. We held several discussions (in-person and online) with a radiologist to uncover what happens when

Someone inside a hospital facility requests their consultation on a patient’s imaging study
When they want to request a consult from another specialist

In both cases we found that sharing files for consultation was a very time-consuming and manual process that required the facility who retains the study—usually a hospital or imaging center—must burn the files onto a DVD, then hand-carry or mail the DVD to the consulting radiologist. A note or follow-up phone call may be required to provide context for the study. The consulting radiologist must then import the files and open them in a DICOM (medical imaging format) viewer to review the study.

Next we examined the BEAM image transfer system’s available features. At the time, BEAM only allowed image librarians to transfer images from one hospital with a BEAM device to another. The librarians spent a large portion of their day transferring imaging studies to different facilities, so the original BEAM application had been designed to allow bulk transfers to a known facility within the BEAM network. The system was not designed for viewing, commenting on and sharing of imaging studies by external users (consulting radiologists).

While reviewing the existing BEAM software, we discovered that the system’s APIs were inconsistent and did not return all required data in a single call. This caused difficulty in working with the system, and decreased the responsiveness of the application. (More detail here)

Workflow: BEAM only allowed sending files to other facilities already in the BEAM network (hospitals and imaging facilities with BEAM hardware installed)

We finished the investigation phase knowing that we wanted to:

Allow a radiologist to easily receive, organize and view imaging studies
Allow users to easily import and share studies with consulting radiologists
Normalize the existing system’s disjointed APIs

Workflow: Allowing users to invite and send studies to external users (consulting radiologists currently outside the BEAM network)

Design

We identified the main elements we would need for the app—studies, study details, DICOM image viewer—and started sketching. After a few rounds of iteration on views and components, we chose a layout that would be easy for doctors to use and learn—a 3-panel layout inspired by email clients. This layout provided radiologists a familiar interface from which they could view, bookmark, send and archive imaging studies.

List of categories on the left, master-detail view with list of studies in the next column, then selected study details on the right.

After designing the main views, we mapped out and designed the secondary flows:

Importing an imaging study
Sharing an imaging study

With the main and secondary views designed, we created high-fidelity mockups and simple clickable prototypes to better represent the experience we wanted to create. We reviewed the mockups and prototypes with the project stakeholders—radiologists, business development team, company leadership and the engineering team. Everyone agreed that our designs represented the best way to move the product forward—they fit the radiologists’ needs, made the overall BEAM product much more appealing, and were feasible to build.

Implement

While the application’s UX was being designed, we dug deeper in the existing system’s APIs. While the BEAM APIs were inconsistent and incomplete, the project’s timeframe did not allow for a complete refactoring. We decided the best way to complete this project—and position the system for future improvements—was to build a normalization layer between the existing BEAM system and our new application. This normalization layer would allow us to:

make the API calls more consistent
cache the data to make the application’s UX more responsive
define a more consistent and robust API that could be used as the basis for a full refactor of the existing BEAM system

We proceeded to build our new BEAM application’s normalization layer and user interface in Ruby on Rails.

I built out the layout templates and views using HTML, SASS and some basic Rails, and the engineering team helped wire everything together. We started with a CSS framework (Bourbon), but soon realized that we didn’t need the full grid system, style definitions and layout helpers. We replaced Bourbon with our own simplified application layout, (columns, menus, headers), and application styles (fonts, buttons, colors, interactions, etc).

Icons developed for BEAM. Icons were designed as vector artwork and converted to a custom icon font.

Throughout development, we reviewed the application with stakeholders (primarily the radiologist and company leadership), processed their feedback and refined the flow, design and architecture of the system.

The Results

The system was successfully deployed and used by the company. We do not have quantitative usage data (hospitals and doctors prefer to keep that information private), but anecdotal data from company leadership and the sales team indicates that the project was a successful addition to the current BEAM product line—generating interest and sales based on the features it offers.

The pre-existing BEAM system is still in use within hospitals and imaging facilities, but the user experience we designed for BEAM Cloud was used as the inspiration for a recent redesign of the Image Librarian interface.