Designed a unified workspace that improved the efficiency of managing a tear film analysis system.
The TFI product is a clinical tear film analysis platform used by ophthalmologists and technicians to review examinations, manage patient data, and generate clinical reports. The existing applications were already in use, but fragmented workflows, inconsistent interfaces, and limited support for clinical environments created opportunities to improve the overall experience.
Due to confidentiality, some product details and patient information have been omitted or anonymized. This case study focuses on the UX process, key design decisions, and selected parts of the final experience.
The existing applications were functional but outdated and fragmented across separate interfaces. The redesign focused on modernizing and unifying the overall experience.
The existing tools lacked visual clarity, usability, and consistency, while workflows were scattered across multiple applications. The platform also needed a dark mode-friendly interface optimized for low-light examination environments where eye analysis is performed.
Designing a unified workstation application for multi-device workflows by redesigning the existing apps and introducing new tools to better support user needs. Creating a consistent design system to improve usability and efficiency across the platform.
Ophthalmologist
Dark environment
Technician
Light environment
A centralized workstation that combines tear film analysis, reports, and clinical tools into one consistent platform, reducing fragmented workflows and improving usability.
A redesigned reporting ecosystem with light and dark mode experiences optimized for low-light examinations and all-day workstation usage.
The Report Viewer is a clinical application designed to organize and manage patient eye examination data and measurements, enabling doctors to efficiently filter, review, and export database records for each patient.
Hundreds of entries per dropdown, Min/Max date buttons nobody recognized, and no way to identify a row at a glance.
Solution: One search-first filter form with a calendar range picker.
Document state carried no visual distinction at all.
Solution: A status system readable in one glance.
Sorting and list views were buttons parked far from the table they acted on.
Solution: Moved into the table header, next to the rows they change.
Both only ever applied to the patient graphs.
Solution: Moved into the graph panel.
A console log, an exit-the-app action, a per-label form selector and a help link that never opened in context — none of it belonged in a clinician’s workflow.
Solution: Cut entirely.
Added advanced filtering options to support scalable search and sorting workflows without overcrowding the default table controls. The feature keeps the interface organized while allowing future filter expansion.
Added an export option for generating patient examination files directly from selected table rows, supporting doctors in documenting and reviewing clinical data more efficiently.
Introduced file deletion functionality to support growing patient data volumes and improve long-term table and report management workflows.
I used the primary color of the Tear Film Imager site brand, incorporating lighter surfaces with dark text to maintain readability while avoiding harsh pure white backgrounds.
Although AdOM’s brand color is red, I chose not to use it as the primary color since red is reserved for semantic states like errors and alerts. Inspired by competitor platforms, I adopted an azure blue paired with dark surfaces and light text to improve readability and reduce eye strain in low-light clinical environments.
I chose this scenario from the Doctor persona to illustrate how users efficiently filter, review, and export patient reports within the system.
Added a time analyzer feature, with details omitted for confidentiality, and the ability to open generated reports from the Report Generator app when needed.
Added resizable table columns to allow users to adjust column widths for better readability and a more comfortable data management experience.
The Report Generator is a program that uses a calculation library to generate an HTML report for each patient, compiling and comparing eye examination data across multiple sessions.
I chose this scenario from the Doctor persona to illustrate the Report Generator’s core workflow.
New export options provide users with multiple methods, including email, allowing greater flexibility when exporting reports and historical data.
New option to generate a file formatted and ready for use in the Data Workbook, supporting further analysis and review of examination data.
The Clinical Measurements Report Card is an HTML file generated from the Report Generator, containing comprehensive patient eye examination data. It includes medical information, parameter trends over time, an eye layer map, video recording and a summary of clinical measurements for print.
The app is a unified desktop and web-based application designed to manage TFI eye imaging systems for both user groups. It consists of a structured interface with a global header for system controls and user login, a side menu for navigation and mode switching, a central workspace for running applications in single or split view, and a console panel for system logs.
| Feature | Description |
|---|---|
| Side Menu toggle | Close or open the side menu |
| Time/Date | Display the time and date |
| Network status | Display the network connection: wireless, wired or offline |
| User profile | Login as User or Admin |
| Help | Guides and troubleshooting for the entire app |
| Settings | Display settings |
| Exit | Exit the app |
| Feature | Description |
|---|---|
| App list | Display the app list |
| Theme switch | Switch between light and dark modes |
| Feature | Description |
|---|---|
| Display screen | Display the chosen apps |
| View options | Full-screen or half-screen view |
| Feature | Description |
|---|---|
| Log messages | Display user actions per app |
| Delete log | Delete the chosen log from the list |
| Toggle visibility | Control console log visibility |
The secondary tools that support the user were placed under a separate dropdown in the menu, so the main navigation is not overloaded. They are not the tools the team reaches for every day, but they sit alongside the main applications and help when a case needs a closer look.
Calibration is the first quality checkpoint in the workflow. The guided report helps operators confirm the corneal reference before capture, reducing setup uncertainty and giving every later measurement a more reliable starting point.
Blink Detection translates a long eye recording into visual statistics across the session. Clinicians can scan patterns and focus on meaningful moments instead of manually scrubbing through the footage.
Video Enhancer turns the existing 2D recording into an interactive 3D view. Clinicians can inspect the ocular surface from different angles, supporting deeper review without adding another capture step.
Combined previously separate tools into one app experience with shared navigation and consistent workflows.
Designed two interface modes for low-light examinations and all day workspace use.
Restructured reports, graphs, and tables around important clinical measurements and comparison tasks.
Created reusable foundations and components for consistent light and dark interfaces across the platform.
