HTIC Endoscope
Design for a medical device
My Role : UI Designer
Client : HTIC (Healthcare Technology Innovation Centre)
Duration : 4 weeks
Keywords : UI, Interaction Design, Design for Medical Devices
During my time at HTIC (HealthCare Technology Innovation Centre), I had the opportunity of working with the Endoscopy and Wearables Team, to design an endoscope that was in development. To provide context, an endoscope is a medical device that is used to view inside a person’s digestive and pulmonary tracts. The device consists of a video processor, a viewing monitor, and a flexible tube with a light and camera attached to it that is sent inside the patient’s body. The multidisciplinary team was developing this endoscope as part of their efforts to address the lack of indigenous endoscopic technology in India and to enable the development of affordable, modular, and upgradeable endoscopy instruments locally.
An endoscope (Consisting of the Monitor, Video Processor and Scope) in use
My role was to work closely with the development team to design the graphical user interfaces for the video processor and monitor of the endoscope.
Designing for a medical device was a new experience for me and it came with its own set of unique design challenges and functional requirements.
Design Brief:
-
Create the visual design for the screens of both the video processor and monitor of the endoscope.
-
Research the user flow and journeys of existing endoscopes to understand the conventions and priorities for each function.
-
Design consciously with the functional constraints unique to endoscopy in mind, like the viewing distance, usage time, and individual priority of each screen during the medical procedure.
Research:
Once I received my brief, I started with my research to understand the nature of this medical device and its industry standards. While I was unable to research directly with the end users ( i.e.the lab technicians and doctors ), I did get to see a working demo of the device at HTIC and was given a rough low-fidelity wireframe with which the development team explained in detail the user journey and flow.
Low fidelity wireframes given to me
I then engaged in some secondary research, looking at other endoscope brands in use to understand existing conventions. I also tried to gather knowledge about common interaction guidelines that are kept in mind while designing specifically for medical equipments.
Endoscopes of other brands in use
Design Solution:
Video Processor:
First I started designing for the screens of the video processor. At 11.1” by 6.6“, the video processor is used most to carry out the functions required for procedure. The monitor is used only to view footage and images captured inside the patients body, and also certain details like patient information, etc. I chose to go with a dark theme for the video processor, for better contrast and visibility at a distance.
UI Style Guide
Screens designed for the video processor
Mock up of the endoscope's video processor
The Home screen is the most critical of all screens, considering that this is used most during the procedure. This screen allows the user to control the scope functions, click pictures, etc. when the scope is inside the patient’s body. This requires a viewing distance of up to 1.5-3 m for the doctor to see while performing the procedure and the assistant/nurse is operating the controls. Maximum visibility, a clear distinction between button states, etc. are of utmost importance for this screen considering the criticality of the procedure.
Some of the features that I have tried incorporating are:
-
Clean Sans serif font and all caps letters for maximum visibility and legibility when viewing from a distance
-
Pairing each icon with a text label to help clarify the control’s function and avoid misinterpretation
-
Different colour fills for buttons states to ensure maximum visibility and error mitigation
-
Increased touch points and button sizes to decrease the risk of touch errors and use time
-
Distinct illustrated icons for each scope type and their connection statuses
Home screen
Scope status icons
The other screens of the video processor are used mostly either after or before the procedure. Hence these are used less frequently when compared to the Home Screen and do not require a longer viewing distance. They carry out various functions like transferring media to other databases, adding doctor profiles, changing scope presets, calibration settings, etc. I have used traditional buttons and text fields here for easy and quick interpretation.
Monitor:
The screens designed for the monitor allow the user to view patient history, details and media. The monitor is used mostly for viewing data while the control functions are present in the video processor.
Screens for the monitor