Redesign Perioperative Software

Icon Design, Illustration, Information Design, Interaction Design, Prototyping, Research, Screen Design, Visual Design

Project: Redesign Perioperative Software (Case study)
Year: 2021
Description: Redesign of CX Prime, a platform to support the full perioperative workflow, from the induction of anesthesia to post-operative care.
Responsibilities: Design Lead, Research, Interaction Design, Visual Design, Prototyping 

Shortly after I joined careyntax GmbH in 2017, I started evaluating qvident and CX Prime. In 2018 I conducted a visual design workshop with stakeholders from different departments of careyntax. The goal was to achieve a common understanding of how caresyntax software products should look and feel in the future. After the workshop I created the first visual concepts for both applications and in early 2019 we started the redesign process of qvident, including interaction and visual design. In preparation for the redesign of CX Prime, I started working on new concepts for interaction and visual design based on the results of the design workshop in 2018 and the redesign of qvident that has already been implemented. This concept is therefore a case study and has not been implemented yet.

 

STATUS QUO 2017

These are two sample pages from CX Prime in 2017. At first glance it looks quite modern, but it actually had a lot of interaction and visual design issues.

 

HEURISTIC EVALUATION & COGNITIVE WALKTHROUGH

Before I started working on the redesign of CX Prime, I did a heuristic evaluation and cognitive walkthough to identify the critical issues regarding usability and user experience. Additionally I collected information about the users of CX Prime, their feedback and needs regarding the software. I also attended two live surgeries in a hospital to see, how our users use the product.

 

OLD STRUCTURE & USER FLOW

The structure of the CX Prime user interface was very fragmented. Global functions were spread across the site, there was no visual hierarchy and the workflow was not intuitive and efficient. Contrary to common Windows applications, the application’s minimize and close icon was in the top left corner of the page, which was confusing for some users. Usually, surgeries are divided into three phases: pre-op (planning), intra-op (surgery) and post-op (finish). In CX Prime, 18 steps are required from starting the application (planning) to exporting recorded media items (finish), as the user must always return to the desktop of CX Prime to select the appropriate function for the next step.

 

GLOBAL & CONTEXTUAL FUNCTIONS

As mentioned earlier, the structure of the user interface was very fragmented. So I grouped the functions into global and contextual functions. Global functions are always available and contextual functions are only displayed in the respective phase.

 

NEW STRUCTURE & USER FLOW

For the new user interface, I created a phase-based concept and removed the desktop page from CX Prime. I placed global functions on the left side and the application minimize and close icon on top right of the page as this is more common with Windows applications. I divided the content area into three parts, each for a phase of the surgery. The respective contextual functions of each phase are located at the bottom of the page. With the new structure I was able the reduce the number of steps from the start of the application to the export of media items from 18 to 10.

 

DESIGN CONCEPTS

While working on the new concept I created several sub-concepts with small differences. I built a simple prototype for each concept to figure out how it feels to navigate between the different pages of CX Prime.

 

VISUAL DESIGN

In addition to the interaction design issues, CX Prime also had a lot of visual design flaws. Users mentioned that, for example, the contrast between icons and background was too low, the UI looked very cluttered and there was a lack of visual hierarchy. When redesigning the visual appearance, I oriented on the new visual design language of qvident. One goal of the redesign process started in 2018 was to develop a common design language so that, in the end, the user can see that both applications are from the same company.

 

LIGHT & DARK MODE

Image: qvident (l) and CX Prime (r)

Qvident is an application that is mostly used outside of the operating room. Hence, the visual design is different from the visual design of CX Prime. Qvident has a light background, while CX Prime has a dark background due to the dark lighting in most operating rooms. However, since some surgeries also take place in bright light, customers also requested a light version. And here you can clearly see the visual relationship between qvident and CX Prime.