top of page
AdobeStock_241960648.jpeg
UI DESIGNER

COMPANY

Healthcare Technology Research Centre

TEAM

R&D team, Myself

DURATION

4 weeks

TOOLS

Adobe XD, Photoshop

Designing the GUI for an endoscope

During my tenure at HTIC, I collaborated with the Endoscopy and Wearables Team on a groundbreaking project. Our goal was to develop indigenous endoscopic technology in India, addressing the lack of affordable and modular instruments. This initiative aimed to enhance healthcare accessibility and affordability locally, while fostering innovation in medical technology.

Objective

To design a user-centered interface for the endoscope's video processor and monitor, optimizing efficiency and functionality.

Outcome

  • Crafted high-fidelity prototypes with tailored design considerations for endoscopic use, including viewing distance, usage time, and procedural priority.

  • Identified key UI requirements through competitive analysis and user journey mapping.

  • Created a scalable UI Kit from scratch.

Research

Having had no prior experience with endoscopes, I started by trying to comprehend the device, its users, and their scenarios. Collaborating with the R&D team that had conducted primary research, I crafted a basic user study. This study delved into the demographics of users, usage periods, environments, needs, pain points, and functionalities. Utilizing the low-fidelity mock-up provided by the team, I grasped user flows and key touch points.

The team also gave me a working demo of an endoscope at HTIC, along with the key differences in competitors' models. Though I couldn't operate these devices, an internet-based competitive analysis provided an understanding of existing UI conventions. This was valuable in analyzing how they tackled certain design requirements specific to an endoscope, like the number of features displayed on a screen during the main procedure.

Define

After a quick analysis of the comprehensive research, we defined the following points as the key UI requirements. Due to time constraints, we couldn't ideate or explore various UI styles. Based on our experience and knowledge, we immediately started off with the high fidelity mock-up that we could iterate on later (after usability testing).

The video processor's Home Screen is most critical, requiring maximum visibility (upto 1.5-3m).

Error mitigation and efficiency (time-on-task) are key priorities since this is for medical procedures.

The monitor; which is typically used to view patients' data, procedural data, endoscopic images, etc.; requires effective visualization.

1. Clean sans serif font, all caps letters, and dark theme for maximum visibility and legibility when viewing from a distance​.
2. Each icon is paired with a text label to help clarify the control’s function and avoid misinterpretation.
3. Different color fills for button states to ensure maximum visibility and error mitigation.
4. Increased touch points and button sizes to decrease the risk of touch errors and use time.
5. A custom UI Kit was created for further iteration and design changes.
6. Efficient visualization of patient and procedural data for the monitor.

Final Prototype

Reflection

  • Designing a medical device with a specific functional focus posed an intriguing new challenge. While I was not part of the project by the time the design went into development, I wish I had been present for the usability tests.

  • The responsibility felt while designing this device was also profound, knowing that any design flaw could potentially result in adverse effects during medical procedures for both doctors and patients.

  • I would also have liked to conduct more extensive research, through interviews and journey mapping. It would be valuable to involve doctors, nurses, etc. right from the design phase to ensure effective alignment with user needs and expectations.

bottom of page