top of page
Design For Endoscopes

My Role : UI Designer

Duration : 4 weeks

Keywords : UI, Interaction Design, Design for Medical Devices

While I was at interning at HealthCare Technology Innovation Centre (HTIC), I had the opportunity of working with the Endoscopy and Wearables Team to design for 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 team was developing this endoscope as part of their efforts to address the lack of indigenous endoscopic technology in India, and to enable development of affordable, modular and upgradeable endoscopy instruments locally.

AdobeStock_241960648.jpeg

An endoscope (Consisting of the Monitor, Video Processor and Scope) in use 

My role as the design Intern was to work closely with the development team to design the graphical user interfaces for this endoscope. This included designing for the screens of both the video processor and the monitor. To design for a medical equipment was a new experience for me and it came with its own set of unique design challenges and functional requirements.

 

Requirements:

  • 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 procedure.

Research:

Once I received my brief, I set onto doing some basic research to understand the nature of the device. 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 to me. 

LF.png
lf all.png

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.

Existing Endoscopes.png

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.

style guide big.png

UI Style Guide

all screens.png

Screens designed for the video processor

cn.jpg

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 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 for a viewing distance of upto 1.5-3 m for the doctor to see while performing procedure and the assistant/nurse is operating the controls. Maximum visibility, clear distinction between button states, et.c 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 final.png

Home screen

scope stats.png

Scope status icons

The other screens of the video processor are used mostly either after or before procedure, hence used less frequently when compared to the Home Screen and do not require a longer viewing distance. These carry out functions like transferring media to other databases, adding doctor profiles, changing scope presets, calibration settings, etc. I have used traditional button and text fields here for easy and quick interpretation.​

add profile.png
camera calibration.png
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.​

monitor.png

Screens for the monitor

bottom of page