Heat activation retina procedure
UX/UI design for Oculox
Heat activation retina procedure
The goal was to create a system that would assist ophthalmologists in aligning the laser with the center of a patient's pupil for optimal treatment. The procedure, which involves the laser passing through the pupil's center to excite the retina for 2 to 4 seconds, demanded an interface that was not only easy to navigate but also highly precise.
-
Role: Main UX/UI Designer
-
Tools Used: Adobe XD - Protopie
-
Project Duration: 6 months
The interface is embedded in a physical device which allows the doctor to visually inspect the patient's retina.
To facilitate precise control and movement, the device is equipped with a joystick-like controller. The doctor uses this controller to maneuver the laser's position according to the visual guide, enabling them to align the laser with the specific area of interest on the retina.
Through careful user research and iterative design, I developed an interface that simplified the process of laser alignment, ultimately enhancing the accuracy and safety of the procedure. The final design incorporated real-time visual feedback and straightforward controls, providing ophthalmologists with the necessary tools to carry out successful retina treatments.
The interface
The system interface is primarily composed of a visualizer, which serves as the central focus of user interaction. This visualizer is connected to a camera embedded in the device, which captures and displays real-time images of the patient's retina.
All alignment activities occur through this visual display, enabling the doctor to accurately position the laser according to the visualized retina image.
Beneath the visualizer, there are additional control options including treatment activation buttons and a cancellation button.
Visualizer
Treatment options
Cancellation
Elements
The system interface consists of three main elements:
-
Area of Treatment: This is a fixed area defined by the system based on the necessary parameters for the specific treatment. It marks the precise location on the retina that needs to be addressed by the laser treatment.
-
Pupil Size: This is estimated and fixed by the system. It represents the target area where the laser treatment will be focused. The system allows for a certain degree of tolerance in the alignment process to account for minor involuntary eye movements or variations in the pupil size during the procedure.
-
Laser Guide: This is a dynamic visual guide used for aligning the laser with the area of treatment. It assists the doctor in precisely positioning the laser relative to the patient's eye and the defined treatment area.
Each element can have three possible states during the alignment phase:
-
Default State: This indicates that the laser is not yet aligned with the treatment area.
-
Aligned State: This indicates that the laser has been successfully aligned with the treatment area, ready for the treatment to begin.
-
In Treatment State: This indicates that the laser treatment is currently in progress.
These states provide real-time feedback to the doctor about the alignment status and the treatment process.
Colors and styles
Conducting the treatment in a dark room is crucial to induce pupil dilation, enabling better access and visualization of the retina.
The system interface design incorporates a predominantly muted color palette complemented by the strategic use of bright, accent colors for key elements.
The muted colors serve to create a restful, non-intrusive background that's comfortable to view in a dark room.
The bright, accent colors are used sparingly, but effectively, to highlight crucial elements or actions on the interface.
This combination of muted and bright colors enables easy identification and attention to the critical components of the system, without causing unnecessary visual strain in the low-light treatment environment.
Base colors
Accent colors
Feedback colors
System overview