Design for an endoscope
Designing the Graphical User Interfaces for an endoscope that was in development for rural usage in India.
ROLE
DURATION
COMPANY
TEAM
DELIVERABLES
TOOLS
UI Designer
4 Weeks
Research & Development team, and myself
High fidelity prototype, UI Kit
Adobe XD, Photoshop, Figma
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 the research team had put together.
-
Considering that this was a device used during a medical procedure, the visual design had to be conscious of certain implicit and explicit functional requirements of the target users, i.e. the doctors and nurses.
-
Created an efficient and functional UI Design for both components of the endoscope.
-
Defined the key UI requirements for this device through a competitive analysis, and by analyzing existing use case scenarios for various target users.
-
Designed consciously for functional needs 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 put together a basic user study for myself, understanding 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 low-fidelity mock-up already in place by the research team aided in understanding user flows and key user touch points.
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 analyzing 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 during the medical procedure, requires a viewing distance of 1.5-3m and needs maximum visibility.
-
The other screens of the video processor are used mostly either after or before the procedure.
-
Since this is a medical procedure performed on patients, error mitigation and efficiency in usage time are priorities.
-
The monitor is used only to view footage and images captured inside the patient's body, and certain details like patient information. Hence, screens for the monitor require smart 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 · FINAL PROTOTYPE · FINAL PROTOTYPE · FINAL PROTOTYPE · FINAL PROTOTYPE · FINAL PROTOTYPE · FINAL PROTOTYPE ·
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
Different color fills for button 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.
UI Kit
Efficient display of patient and procedure data for the 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.
MY OBSERVATIONS
-
It was an interesting challenge to visually design a medical device, with a functional focus - to reduce time and effort for the doctors and nurses using it.
-
There was a greater sense of responsibility in designing this device, as an error caused by a design flaw could lead to adverse effects during the medical procedure for both the doctors 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 hypothesis was on the right track.