CrossFlow

Arthroscopy Pump Interface

CrossFlow is an arthroscopic pump manufactured by Stryker which is used primarily for joint surgeries. Surgeons rely on the device to manage the flow and pressure of fluids when repairing wrists, ankles, knees, etc.

  • PROJECT:
  • CLIENT:
  • CATEGORY:
  • DATES:
  • ROLE:
  • CrossFlow
  • Stryker
  • UX, UI, IxD
  • 2018 (approx 4 months)
  • I redesigned the entire UI to accommodate new features and address user needs, while following design cues from Stryker's product line.

Background

When I joined the team working on CrossFlow, they were just starting a series of user tests to collect OR nurse feedback on proposed design options, as well as collecting data on pain points and needs/features. This was a great opportunity to get up to speed with the product and get a sense of what users needed/wanted. I helped to record most of the test sessions and compiled a summary of responses for team review.

user test


The existing CrossFlow UI was functional, but was created with minimal user feedback and employed dated UI controls. Our team's goal was to accommodate new features, simplify interaction based on data from user testing, and update the UI appearance to be in keeping with Stryker's modern surgical products.

Existing UI

Design Directions

Initial visual designs started with variations on an in-house direction started at Stryker, and progressed to dividing the UI into regions of information, following design cues established in other Stryker products. Operational flow for the device was established by Stryker, but navigational affordances were developed for new features.

Prelim Design 1 Prelim Design 2 Operation Flow

More than 20 screens had to be redesigned or created from scratch, including an on-screen keyboard, and layouts that provided interaction with pump accessories.

Screen Layouts


Since interaction with CrossFlow is via a touch screen, I recommended using a mobile design pattern for device settings rather than the large icon implementation originally on the device. The intention was to minimize navigation time between screens, and take advantage of users' familiarity with the interface found on many mobile phones.

Settings

Illustrations and Animation

I created flat and isometric device illustrations to stay in keeping with the minimal aesthetic of Stryker's corporate style guidelines, along with animations to communicate device operation.

Illustrations animation

Interactive Prototype

Once the new UI design was completed, we planned to test a prototype with a new set of nurses. I convinced the project manager to test an interactive prototype rather than a click-through model so we could get feedback on new behaviors and interaction I included in the new design. I built a fully functional front end of the new design on an iPad that was capable of being triggered remotely by a separate tablet to simulate different operating situations nurses might encounter during various procedures.

iPad Prototype

Because CrossFlow is not a handheld device, I didn't want to conduct tests with users holding the device in their hands. I believed it was important to simulate the orientation and position of the actual device (usually placed on a cart or rack in an operating room), but engineering wasn't able to provide a disassembled CrossFlow shell, nor load static screens onto a working unit. So I constructed a full-scale mockup of the CrossFlow case using foamcore, mat board, and hot glue, which included a slot to hold the iPad in place, thus creating a convincing simulation of a real CrossFlow.

CrossFlow Mockup 1 CrossFlow Mockup 2


Below is a video of the interactive prototype.

CrossFlow Interaction Prototype


User testing was quite successful, validating the new design and interaction. Testing also led the team to drop one of the newly planned features, since few of the users believed they would use it, thus saving development time and cost.