GE Healthcare / Cytiva Bioreactor Software Interface

Responsible for...
UX | UI | HMI | Wireframing | Prototyping | Mockups | Usabilty Testing | Information Architecture | UX/UI Style Guide


GE Healthcare Life Sciences (now called Cytiva) hired me in 2019 to design the user interface for the software of their newest bioreactor. The interface of their other bioreactors looked dated and was cluttered with redundant and unnecessary information. Users were also experiencing alarm fatigue, which can result in missed alarms and alerts and could cost a company millions of dollars. Our bioreactor customers included biopharmaceutical companies like Merck, Pfizer, Amgen, Daiichi Sankyo and Genentech.

Scroll for a description of the UX process, user flows, wireframes, mockups and a prototype.

Here's the old UI...

GE Healthcare - David DeSouza UX

The process...

Meet with Stakeholders & Gather Requirements

  • Update and modernize the interface pictured above.
  • Unclutter the screen.
  • Find a way to reduce alarm fatigue.
  • Implement UX and HMI standards and best practices.
  • Help design and implement the new Cytiva brand.
  • Target users are Operators and Process Development Engineers.

This project required me to learn HMI (Human Machine Interface) which is the model used for automation processes in plants and labs across many industries. HMI is different from UX and its guidelines often conflict with UX standards. An example of this would be the HMI guideline that says backgrounds should be gray with darker gray text over it to create a very low contrast display. The UX Designer in me would never recommend that so concessions and compromises between UX and HMI needed to be carefully considered. Sometimes UX won, sometimes HMI won. I also needed to familiarize myself with the possibilities and constraints of Rockwell FactoryTalk, which was the platform that the developers were using to build it.


Wireframes & User Flows

There was a lot of information, content, and science to figure out. I met with scientists and subject matter experts within the company and leveraged some of their relationships with outside organizations to work out Information Architecture and user flows. I determined what features and KPIs need to be on the screen at all times. We whiteboarded a lot, which led to loosely sketched wireframes like the ones you see below. These were reviewed, tested and refined until they were ready to be polished and included in prototypes.

GE Healthcare - David DeSouza UX GE Healthcare - David DeSouza UX

GE Healthcare - David DeSouza UX

Prototype v1

Once we had a reasonable user flow and wireframes, a rough prototype was built in inVision. The idea was to get something in front of people quickly and get feedback. The data doesn't lie, so the sooner you can get some tests with real users, the better. While I always hope early feedback will be positive, I welcome criticism and surprises. Testing shows us where the design can be improved.

GE Healthcare - David DeSouza UX

GE Healthcare - David DeSouza UX

GE Healthcare - David DeSouza UX

Soon I created a more polished prototype with better, rebranded mockups. I was able to test them with users/customers from three of the big pharmaceutical companies and an outside development lab. A version 2 prototype, based on those test results, was created. I cannot show the final prototype here as it may contain sensitive or proprietary information but below are a few mockups used in the final prototype.

I wish that I could have done more to make the gray section in the middle of the screen more attractive but HMI won the battle for a gray background, UX won the battle for darker text and bolder lines.

Mockups and Prototype v2

GE Healthcare - David DeSouza UX

GE Healthcare - David DeSouza UX

GE Healthcare - David DeSouza UX

GE Healthcare - David DeSouza UX