PROJECT HIGHLIGHTS
As one of the world’s leading medical technology companies, B. Braun aims to protect and improve the health of people around the world. I am a member of the Research & Development division, which isresponsible for the development of OMNI®, the acute dialysis device. Our project team is working constantly on innovating and maintaining the graphical user interface of the machine.
Client: B. Braun Medical Ltd.
Duration: 4+ years (ongoing)
Team: 1 SM, 1 PO, 4 Devs, 1 Tester, 1 Designer (me)
My role: Product Design Responsible, Requirement Manager
Tools: Figma, Adobe Suits, SolidWorks, KeyShot, IBM Notes, IBM Doors, Jira, Agile Methodologies
CASE STUDY OVERVIEW
Challenge
The main goal of the GUI redesign project is to design and develop a more intuitive, comprehensible graphical user interface for OMNI, the acute dialysis machine with a clean visual language aligned with the corporate perception guidelines.
This project acts as a pilot project during the development of the new B. Braun design system, as well.
This process also includes the update of the corresponding requirements, design specifications for system and GUI software component level.
Problem statement
The project not only aims to refresh the look and feel of the interface but also the correction of usability issues that emerged in former versions.
Instances of what we intended to fix during the redesign project:
Preparing the OMNI for therapy was not easy to follow.
The Main screen used to be overcrowded.
The inconsistent behaviour of the system was confusing for the users.
Outcomes
This is an ongoing redesign project which is currently in implementation phase, approximately 90% of the planned features are already developed.
Based on the completed formative tests, we have fulfilled most of the pre-defined requirements. According to user feedback, we succeeded in moving forward to better usability and a more user-friendly GUI.
MY ROLE
Responsible for the visual design process end-to-end,
Participation in the development of the design system,
Preparation and presentation of different design proposals,
Providing graphic design elements to developers,
Supporting and reviewing the GUI implementation,
Creating CAD models, 3D visualization and animations,
Designing micro-interactions and creating 2D animations,
Updating the User Guidance and Alarm help images,
Participating in usability testing (formative & summative),
Eliciting and maintaining requirements with a focus on GUI component,
Trainee mentoring (for a year),
Collaborating with the stakeholders.
Figure 1: My main responsibilities
The OMNI is an acute dialysis machine which is used in Intensive Care Units (ICUs) by medical professionals and technical personnel. The machine in combination with OMNIset disposable kits is indicated for patients with acute kidney injury and/or fluid overload and/or intoxication who need continuous blood purification treatments.
The Hungarian R&D team is responsible for the development of Hardware, Software and the Graphical User Interface in close collaboration from colleagues from other countries, e.g. Germany and Italy.
The introduction video about OMNI shows the former graphical user interface, before we began with the GUI redesign project.
SHORT INTRODUCTION OF OMNI
Video 1: OMNI with the former GUI (pre-redesign version)
THE PROCESS
During the GUI redesign process we were completing the following five steps to achieve our goals.
Figure 2: The five stages of the GUI redesign process
1 RESEARCH
Identifying usability issues
To begin with the GUI redesign project, we have collected and systematically categorized the usability problems that emerged in previous software versions based on user feedbacks and evaluation reports provided by external human factors experts.
In the followings I will present some instances of the abovementioned usability issues:
1. The GUI tends to be overcrowded
Example: There are too much information displayed on the screens at once.
On the Main screen the amount of available information should be reduced and easy to scan.
The number of tabs on Frame should be also decreased.
2. Lack of informative instructions and feedbacks
Example: The instructions to Install Bags are unclear.
The Install Bags screen appears cluttered.
Lack of hierarchy makes it difficult to differentiate information on the screen.
Position of texts and image should be changed to accurately reflect which items are related.
3. Information presented in error-prone ways
Example: Easy access to the Service menu may confuse users.
The Service menu is intended for use only during service calls with technicians.
However, it is easily available by clinical users which introduces the risk of confusion or potentially misinterpreting values on the screen.
The prominence of Service menu should be reduced.
4. Lack of effective screen layouts
Example: Individual sub-tabs are not clearly distinguishable
There are no prominent visual boundaries between individual sub-tabs.
This may result in users end up on an undesired tab.
The boundaries of the individual sub-tabs should be visually separated.
5. Alarm handling is confusing
Example: Alarm messages are too complicated to be easily understood
The amount of alarms and warning texts need to be reduced.
Alarm help images are too small and thus difficult to interpret.
The layout of alarm windows should be unified.
2 DEFINITION OF FEATURES
Scope of the GUI redesign project
After mapping the usability problems that arose in previous software versions, we defined the scope of the project. We conducted workshops with various stakeholders (R&D and marketing team and application specialists), during which we elicited the new requirements for the GUI and defined how to change the features and architecture of the software to improve the user experience.
User Interface Map
Not only the features, but the architecture of the GUI changed during the project. The figures below explain how the GUI helps the user to complete a series of steps: how the screens are now connected and follow each other. The Treatment that can be performed with OMNI consists of two major procedures: Preparation and Therapy.
3 DESIGN
Wireframes
To start with the design process, we created and iterated low-fi wireframes with Figma. After the project management and the marketing team approved the mockups, we conducted usability tests. Once we received positive feedback on the wireframes, we began to design the user interface elements and the look and feel of the screens.
Style Guide
OMNI is a complex medical application and a key member of B. Braun product portfolio. The GUI redesign project also served as a pilot project for establishing the corporate’s new design guideline, which serves as basis for designing apps, web interfaces and software on active devices in the future. So I created a design library with the team which promotes consistency and conveys the visual language of B. Braun.
Interface design
In the last stage of the design phase I prepared the proposals for the new interface design. During this process two Product Owners (from Germany and Hungary) and I collaborated with an external design team specialized in medical solutions. These consultations also contributed to the development of the new GUI with a holistic approach and providing real answers to the usability issues identified in the research phase.
4 IMPLEMENTATION
Once the design reached a suitable level of maturity, we started the implementation in a cross-functional team consisting of the following members: 1 SM, 1 PO, 4 Devs, 1 Tester, 1 Designer (me) and my Trainee. My role changed a bit during this time because the emphasis shifted from creating the design to supporting the developers (handing off designs, reviewing implementation, iterating designs if necessary) and preparing the documentation.
5 USABILITY TESTING AND FEEDBACK
We tested our proposals at various stages of the GUI redesign project.
Low-fi prototypes were tested multiple times at early stages of the design phase with the stakeholders (applications specialist, clinical application managers, doctors, and nurses) by remote usability tests to receive feedback on the functionality, the structure, and the content of the new GUI.
High-fi prototypes were tested by medical staff and application specialist when the maturity of design reached an elevated level. These remote usability tests took place with the help of a more complex clickable prototype, not only with separate screens, which was used during the initial tests (low-fi prototypes). So, these type of usability tests allowed us to test processes and screen flows in depth.
We get market feedback during the redesign process as we conducted five workshops with various stakeholders (R&D team, project managers, marketing team, application specialist) to enhance the usability of OMNI based on the professional opinion and experience of experts belonging to different disciplines within the company.
We also received feedback by the external design agency, with whom we collaborated during the design phase. They suggested slight, but powerful design changes which we could easily implement in our software.
WHAT DID I LEARN?
1. Precise definition of scope is fundamental
Assessing every task and a scope of a project and estimating the necessary time to spend on each issue is crucial. Throughout the project the definition of must-have features was an iterative process and therefore shifted several times. However, because of multiple scope changes, I learned to manage and adapt to changing goals.
2. Performing in two roles can be challenging
During this project I worked as a Product Designer and a Requirement Responsible, although these two roles complement each other well, there were times, when it was quite a challenge to wear multiple hats. In this case, clarifying the deadlines helped prioritize tasks.
3. Continuous feedback is key
I believe If practice makes perfect, then a usability test allows a product to really met users’ needs. What do practice and testing have in common? The repetitive nature. During this project, I learned the importance of involving users in the development through tests as often as possible.