CLINICAL LAB PLATFORMS

Blood Analyzer GUI Reskin

Tools: Figma, Adobe Illustrator, Justinmind

Timeline: 6 Months

Background

The project was initially launched as a redesign for the Vitros x600 graphical user interface (GUI) software. This was due to an opportunity with the software platform migrating from Photon to QNX 7. However, the scope changed a few times throughout the project and we ended up deciding that a reskin of the existing GUI would be more appropriate. The reason for this was twofold; the first being budget constraints and the second was due to limited training resources for our customers who are all subject matter experts (SME’s) of the existing software. Another benefit to moving forward with the reskin only was that keeping the overall functionality and workflow we would avoid major verification with the FDA and we could instead introduce new updates that would take the GUI to a completely different look and feel that was modern and reduced cognitive load.

Below is the original Sample Programming screen with the Photon software dated back 20+ years. This system is extremely complex and considering the year it was designed, it has surprisingly held up well in terms of ease of use and workflow. However, the look and feel is very similar to the Windows ’91 era.

Styling

When determining the new look and feel we met with many internal stakeholders to figure out what aligned best with the company’s branding. As it turns out, the Transfusion Medicine side of the business had been following Google Material Design for their styling. For consistency and continuity purposes we decided to also follow this styling.

Our design process began by building out one of the more complex screens in several different style options that we narrowed down and put up to a vote with the rest of the User Experience team. We used a design tool called Figma to do this. The tool is very powerful and similar to Adobe Illustrator, however, it has the perks of being free and allows for real-time collaboration.

Design 1: "On Brand"

We liked this styling because it maintained the company's brand color palette (with red being the primary color) and followed Google Material Design guidelines. However, the red top bar felt very unbalanced with the rest of the page. Further, the color itself made it feel as though there was an error with the system.

Design 2: "Clean Slate"

This was a clean option that allowed the emphasis to be dominantly focused on the content and action buttons. However, the major drawback here was that it felt very bland and the screen again felt very unbalanced.

Design 3: Balanced Winner

This option quickly became the favorite as it was neutral, balanced, and clean. The monotone colors allowed the alert icon to stand out in the foreground, which was great for reducing use errors.

Clean Up and Expand the Design

Once we decided that we would go with the third “balanced” option we held a creative workshop to iterate different versions with this color palette. During this workshop we used one of the Elo touchscreen monitors to ensure we were providing pixel perfect quality for the specific screen resolution of that monitors we use on the analyzers. One of the major takeaways of this workshop was that the design felt a bit flat and monotone. We decided to brighten up the overall look and feel and add a drop shadow to the buttons.

Final designs as a result of the workshop

User Testing

Once we expanded the design to the rest of the interface we put the screens into a prototyping tool (JustInMind) to test with our end users at a customer dinner. The purpose of this testing was to ensure that any changes to the color and look and feel of the icons would not result in a use error. Fortunately, all users were able to complete the task with no issues.

In addition to the scenario testing, we also probed the user for feedback regarding the new look and feel. We took note of their responses and at the end of the session we had them fill out an A/B questionnaire. Here they were asked to divide 100 points between the two versions (old and new) and then to come up with three words for the current version of the analyzer and three words for the proposed new version of the analyzer. The result was a statistically significant preference for the proposed reskin over the current GUI.

Results

Overall, participants preferred the GUI reskin over the current GUI

Participants rated the GUI reskin (64.4) significantly higher than the current GUI (35.6)
- 67% of the participants preferred the GUI reskin
- 22% of the participants preferred the current GUI
- 11% of the participants were neutral

Next Steps

We have begun work on a comprehensive style guide that we will share with the software team in the upcoming months. In addition, we plan to redesign all icons and provide a guideline for creating new ones in the future.