Design for an endoscope
Designing the Graphical User Interfaces for an endoscope that was in development for rural usage in India.
ROLE:
UI Designer
UI Designer
ROLE:
UI Designer
DURATION:
4 Weeks
COMPANY:
Healthcare Technology Research Centre
TEAM:
Research & Development team, and myself
TOOLS:
Adobe XD, Photoshop, Figma
DELIVERABLES:
High fidelity prototype, UI Kit
OVERVIEW:
During my time at HTIC (HealthCare Technology Innovation Centre), I had the opportunity of working with the Endoscopy and Wearables Team, for one of their devices being developed. 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.
PROBLEMS:
SOLUTIONS:
-
The graphical user interfaces of the endoscope's monitor and video processor needed high fidelity prototypes to be designed from an existing low - fidelity mock up that research team had out together.
-
Considering that this was a device used during a medical procedure, the design had to be conscious of certain implicit and explicit visual requirements of the target users- doctors and nurses.
-
Created an efficient and functional UI Design for both components of the endoscope.
-
Defined the key UI requirements for this device after doing a competitive analysis, and analyzing the use case scenarios and user flows for various target users.
-
Designed consciously with the functional constraints unique to endoscopy, like the viewing distance, usage time, and individual priority of each screen during the medical procedure
DESIGN PROCESS:
Coloured circles indicate my areas of involvement in the entire process.
RESEARCH:
-
Considering that I had never seen or used an endoscope before, I started off with first trying to understand what this device was, its target users, and their use cases. In-depth conversations with the research and development team provided insight into this, as a lot of the primary research was already done before I was brought in. I understood what kinds of doctors and nurses used this device, in what periods of time, the physical environments, their needs and pain points, various functionalities, etc.
-
The team also gave me a working demo of an endoscope at HTIC, running me through the key touch points and phases of user interaction. I then got to understand the low-fidelity mock-up already in place from the research team.
-
The team also gave me a working demo of an endoscope at HTIC, along with the key differences in existing endoscopes by other brands. While I couldn't operate these devices myself, photos from the internet helped me put together a basic Competitive analysis and provided an understanding of how their screens looked, with regards to the UI. This was valuable in analysing how they tackled certain UI requirements specific to an endoscope, like a longer viewing distance for example.
DEFINE:
Using this research, I was able to define the key UI requirements for the new website:
-
At 11.1” by 6.6“, the video processor is used most to carry out the functions required for the procedure and is of a higher priority than the monitor when designing.
-
The Home Screen, being the most critical screen used most during the medical procedure, requires a viewing distance of 1.5-3m and needs maximum visibility.
-
Since this is a medical procedure performed on patient, error mitigation and efficiency in usage time are priorities
-
The monitor is used only to view footage and images captured inside the patients body, and also certain details like patient information, etc. Hence, screens for the monitor require smart data visualisation of data like patient details, procedure details, images, etc.
Due to time constraints, we couldn't ideate or explore various UI styles. Based our exprience and knowledge, we immediately started off a on a high fidelity mock up that we thought was most practical and efficient at that point of time.
FINAL PROTOTYPE - VIDEO PROCESSOR
Clean Sans serif font, all caps letters and dark theme for maximum visibility and legibility when viewing from a distance
Each icon is paired with a text label to help clarify the control’s function and avoid misinterpretation
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 and error mitigation are of utmost importance for this screen considering the criticality of the procedure.
Different colour fills for buttons states to ensure maximum visibility and error mitigation
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, text fields and sliders here for easy and quick interpretation.
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
UI Kit
FINAL PROTOTYPE - MONITOR
Efficient display of patient and procedure data
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.
KEY REFLECTIONS:
-
It was an interesting challenge to visually design for a medical device, with the intention having a functional focus, in redicding the time and effort fpr doctors and nurses using it.
-
There was a greater sense of responsibility in designing for this device, as an error caused by a design flaw could lead to adverse effects during the medical procedure for both the doctprs and patients.
-
I would have liked to see how this design would perform in a usability test with the doctors themselves and check if our design hyposthesis was on right track.