Stryker CrossFlow

Arthroscopic 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. The pump determines optimal suction rates for various surgical tools — cutters, burs, and RF probes — to provide consistent visualization and decreased fluid usage by managing suction.

  • DATES:
  • MY ROLE:
  • CrossFlow
  • Stryker
  • UX, UI, IxD
  • 2018 (approx 4 months)
  • I redesigned the device interface to improve usability, accommodate new features, and address customer needs, while following design cues from Stryker's design system.


To bring CrossFlow more in-line with their other surgical product offerings, Stryker wanted to redesign/update the device user experience that had gone without any major update for about 10 years (shown below). The project manager had a number of goals to accomplish for the redesign:

  • Improve overall user flow of the device
  • Improve user understanding of device status
  • Improve user understanding of available settings/options
  • Propose new features for the device
  • Refresh the UI to be in keeping with Stryker’s other products
Original UI

Original UI


When I joined the team working on CrossFlow, they were starting a series of user tests to collect nurse feedback on the existing device interface and new UI design concepts, as well as data on pain points, needs, and features. This was a great opportunity to get up to speed with the product, get a sense of what users liked/disliked about the product, and determine what users needed to better do their jobs. The project manager had prepared a series of slides/mockups that were presented to respondents on a laptop, and I helped record and document the interviews. Afterward, I compiled a summary of responses for team review.

User Test

Visual Refresh

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 (example below).

Modern Styker UI

Modern Stryker UI


I created the visual design for CrossFlow by following an emerging design system provided by Stryker. Where possible, I employed color combinations, iconography, control placement, and dialog treatments as suggested in the design documentation, and incorporated the spirit of the design style in situations where there was no prescribed approach.

Stryker Design System

Data Display

CrossFlow’s most-used screen is where pressure and flow values are set. During the project, I created a range of layouts that explored different gauge treatments and orientations, based on space limitations of the display, information hierarchy, perceived relationships between settings, and other factors.

Prelim Design 1 Prelim Design 2

Ultimately, interviews determined that users found linear/vertical gauges harder to interpret, and generally preferred circular displays.

Gauge Designs

Illustrations & Animation

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

Illustrations Operating Animation

Settings Screen

Changing settings on CrossFlow was a tedious process that required jumping back and forth between each settings category and a home view. Since interaction with CrossFlow is done via a touch screen, I employed a mobile design pattern that employs a fixed iconic index on the left, and variable content on the right. My intention was to group settings into logical collections and take advantage of users' familiarity with interaction found on most tablets/phones, thereby maintaining context and minimizing navigation time when applying settings.

Updated Settings

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

Updated Settings

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 designs. I built a fully functional front end of the UI on an iPad with button states, animations, sound effects, and simple transitions. I also enabled the prototype to be triggered remotely by a second tablet so we could simulate various messages and situations that can be encountered during a procedure.

iPad Prototype


Because CrossFlow is not a handheld device, I didn't want to conduct tests with users holding the iPad 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 shell, or load static screens onto a working unit. So I constructed a full-scale mockup of the CrossFlow case using color printouts, Foam Core, matboard, and hot glue, with a slot to hold the iPad in place, thus creating a convincing simulation of an actual device. The CrossFlow team was floored by this initiative and showed off the model to other teams in internal meetings.

CrossFlow Mockup 1 CrossFlow Mockup 2

Video capture of the prototype interaction/behavior:

CrossFlow Interaction Prototype


The new design tested extremely well with respondents, resulting in near 100% understanding of device interaction, and validating a new feature for monitoring saline usage. Testing also led the team to drop a planned feature involving placement of the pump, since few of the users believed they would use it, thus saving Stryker development time and costs.