TFI Workspace
Designed a unified workstation that improved the efficiency of managing a tear film analysis system.
Collaboration
1 Product Manager
1 Developer
1 COO
Tools Used
Introduction
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 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.
Understanding the Challenge
The existing applications were functional but outdated and fragmented across separate interfaces. The redesign have to focused on modernizing and unifying the overall experience.
Context
The Goal
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.
Target Users
Ophthalmologists managing patients analysis data and clinical reports
Technicians responsible for supporting and maintaining the workstation platform.
The Problem
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.
Deliver
Reworking and redesigning the Report Viewer application.
Redesigning the Clinical Measurements Report.
Redesigning the Report Generator application.
Creating a dual-mode design system.
Building a unified workspace experience.
User Personas
Dr. Jennifer Wang
Ophthalmologists
Dark environment
Goals
Review and compare patient tear film analysis quickly.
Access clinical reports and measurements in one
unified workplace.
Reduce visual strain during long examination sessions.
Frustrations
Switching between multiple disconnected
applications.
Poor readability and cluttered data visualizations.
Bright interfaces causing discomfort in dark
environments.
Needs
A clear and low-strain dark mode interface.
Fast access to patient analysis history and reports.
Consistent workflows across all workstation tools.
Danel Ross
Technicians
Light environment
Goals
Monitor and manage examination data efficiently.
Support report generation and workflow operations.
Maintain stable and organized platform usage
throughout the day.
Frustrations
Inconsistent UI patterns between tools.
Eye fatigue from high-brightness white interfaces.
Time wasted navigating complex workflows.
Needs
A balanced light mode with reduced glare.
Clear system organization and navigation.
Reliable and consistent interface behavior across
applications.
The Mission
1
Unified clinical Environment
A centralized space that combines tear film analysis, reports, and clinical tools into one consistent platform, reducing fragmented workflows and improving usability.
2
Adaptive reporting & dual-mode system
A redesigned reporting ecosystem with light and dark mode experiences optimized for low-light examinations and all-day workstation usage.
Report Viewer
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.
Original Report Viewer
Feature Evolution & Fixes
Feature
Problem
Priority
Fix
ID - choose user Identity
Endless dropdown list, wrong placement and outdated functionality
High
Search bar and better filtering selection
Name - choose user name
Endless dropdown list, wrong placement and outdated functionality
High
Search bar and better filtering selection
Status - choose document status from 7 states
Wrong placement and outdated functionality
High
Relocate to sorting section in the table
Creation date - choose range between two dates
Min/Max buttons not recognizable and outdated functionality
High
Date filtering via calendar modal onclick
View Filtered List - display filtered list
Presented as a button and positioned far from the table
High
Relocate to sorting section in the table
Examination Date - display date
Item list lacks identify, recognizable pattern and quick actions.
High
Filter form with improved hierarchy
Patient ID - display ID
Item list lacks identify, recognizable pattern and quick actions.
High
Filter form with improved hierarchy
Given name display name
Item list lacks identify, recognizable pattern and quick actions.
High
Filter form with improved hierarchy
Surname - display surname
Item list lacks identify, recognizable pattern and quick actions.
High
Filter form with improved hierarchy
Tested eye - display witch eye
Item lacks identify, recognizable pattern.
High
Filter form with improved hierarchy
Reports status - display document status
status lacks visual distinction
High
Design easily recognizable statuses
View Full List - display all list
Presented as a button and positioned far from the table
Medium
Relocate to sorting section in the table
Trend graph - choose Y axis parameter
Individual for each patient and depends on number of examinations
Medium
Relocate to the table
Use for each label - select a specific form
Not relevant to the form’s functionality
Low
Remove completely
Action - exits the app
Exit action is unnecessary for workflow
Low
Remove completely
Console - display logs
Console log not relevant for clinical users
Low
Remove completely
Help - opens guide
Not available within the report
Low
Remove completely
Quality - check up status
Limited to the patient graphs only
Low
Relocate to the graphs
View trend - the patient's examination trend
Limited to the patient graphs only
Low
Relocate to the graphs
New Workflow Features
Add Filter
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.
Export File
Added an export option for generating patient examination files directly from selected table rows, supporting doctors in documenting and reviewing clinical data more efficiently.
Delete File
Introduced file deletion functionality to support growing patient data volumes and improve long term table and report management workflows.
Color Inspiration
Light Mode
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.
Dark Mode
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.
User Flow
I chose this Main scenario of the Doctor persona to illustrate how users efficiently filter, review, and export patient reports within the system.
Design Evolution
Mid-Fidelity Wireframe
Features Added During Iteration
Time Analyzer and Report view
New time analyzer feature, with details omitted for confidentiality, and the ability to open generated reports from the report generator app when needed.
Column Resize
Added resizable table columns to allow users to adjust column widths for better readability and a more comfortable data management experience.
High-Fidelity Wireframes
Light Mode
Dark Mode
Report Generator
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.
Original Report Generator
Design Improvements
Refined text hierarchy and emphasized key information for better readability.
Modernized the visual design to replace the outdated interface.
Implemented a consistent light and dark mode design system.
New Workflow Features
Export options
Dropdown with multiple export methods, including email, giving users more flexibility when exporting reports, past analyses and historical data.
Data Workbook
New option to generate a file formatted and ready for use in the Data Workbook, supporting further analysis and review of examination data.
User Flow
I chose this scenario of a doctor persona scenario to illustrate the Report Generator’s core workflow.
High-Fidelity Wireframes
Light Mode
Dark Mode
Clinical Measurements Report
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, eye layer map, video recording and a summary of clinical measurements for print.
Original Clinical Measurements Report
All patient data displayed is fictional
Design Improvements
Refined text hierarchy and emphasized key clinical information for better readability.
Improved layout of histograms and graphs for a more ergonomic and structured visualization.
Integrated layer thickness over time with its corresponding graph dynamics into a unified component.
Modernized the visual design to replace the outdated interface.
Implemented a consistent light and dark mode design system.
Light Mode
Dark Mode
TFI Workspace
The Workspacen 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 switch, a central workspace for running applications in single or split view and a console panel for system logs.
Features
Header component
Feature
Description
Side Menu toggle
Close/Open Side Menu
Time/Date
Display Time/Date
Network status
Display Connection to
network: Wireless, Wired or Offline
User profile
Login option as User or Admin
Help
Guide and troubleshoot of the Entire app
Settings
Display settings
Exit
Exits the app
Side Menu component
Feature
Description
App list
Display App list
Light mode/Dark mode
Display Time/Date
Main erea component
Feature
Description
Display screen
Display the chosen apps
View options
Full screen view or Half screen view
Console Log component
Feature
Description
Log messages
Display user actions per app
Delete log
Deletes the chosen log from list
Toggle visibility
Console log control
Information Architecture
Design Evolution
Low-Fidelity Wireframe
Design System Insights
High-Fidelity Wireframes
Light Mode
Prototype
Dark Mode
Prototype
Impact & Outcomes
1
Unified Workflow
Consolidated multiple tools into a single workstation, reducing fragmented workflows and improving efficiency for clinical users.
2
Improved Usability in Clinical Environments
Designed a dual-mode system optimized for both low-light examination settings and all-day usage, reducing visual strain and improving readability.
3
Enhanced Data Clarity
Reorganized reports, graphs, and tables to improve data interpretation and support faster clinical decision-making.
4
Scalable Design System
Established a consistent light and dark mode design system to support future tools and maintain UI consistency across the platform.
JUMP TO
TFI Workspace
Designed a unified workstation that improved the efficiency of managing a tear film analysis system.
Collaboration
1 Product Manager
1 Developer
1 COO
Tools Used
Introduction
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 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.
Context
The Goal
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.
Target Users
Ophthalmologists managing patients analysis data and clinical reports
Technicians responsible for supporting and maintaining the workstation platform.
The Problem
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.
Deliver
Reworking and redesigning the Report Viewer application.
Redesigning the Clinical Measurements Report.
Redesigning the Report Generator application.
Creating a dual-mode design system.
Building a unified workspace experience.
User Personas
Dr. Jennifer Wang
Ophthalmologists
Dark environment
Goals
Review and compare patient tear film analysis quickly.
Access clinical reports and measurements in one unified workplace.
Reduce visual strain during long examination sessions.
Frustrations
Switching between multiple disconnected
applications.
Poor readability and cluttered data visualizations.
Bright interfaces causing discomfort in dark
environments.
Needs
A clear and low-strain dark mode interface.
Fast access to patient analysis history and reports.
Consistent workflows across all workstation tools.
Daniel Ross
Technicians
Light environment
Goals
Monitor and manage examination data efficiently.
Support report generation and workflow operations.
Maintain stable and organized platform usage throughout the day.
Frustrations
Inconsistent UI patterns between tools.
Eye fatigue from high-brightness white interfaces.
Time wasted navigating complex workflows.
Needs
A balanced light mode with reduced glare.
Clear system organization and navigation.
Reliable and consistent interface behavior across applications.
The Mission
1
Unified clinical Environment
A centralized space that combines tear film analysis, reports, and clinical tools into one consistent platform, reducing fragmented workflows and improving usability.
2
Adaptive reporting & dual-mode system
A redesigned reporting ecosystem with light and dark mode experiences optimized for low-light examinations and all-day workstation usage.
Understanding the Challenge
The existing applications were functional but outdated and fragmented across separate interfaces. The redesign have to focused on modernizing and unifying the overall experience.
Report Viewer
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.
Original Report Viewer
Feature Evolution & Fixes
New Workflow Features
Add Filter
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.
Export File
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.
Delete File
Introduced file deletion functionality to support growing patient data volumes and improve long term table and report management workflows.
Color Inspiration
Light Mode
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.
Dark Mode
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.
User Flow
I chose this Main scenario of the Doctor persona to illustrate how users efficiently filter, review, and export patient reports within the system.
Design Evolution
Mid-Fidelity Wireframe
High-Fidelity Wireframes
Light Mode
Dark Mode
Features Added During Iteration
Time Analyzer and Report view
Added a time analyzer feature, with details omitted for confidentiality, and the ability to open generated reports from the report generator app when needed.
Column Resize
Added resizable table columns to allow users to adjust column widths for better readability and a more comfortable data management experience.
Report Generator
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.
Original Report Generator
Design Improvements
Refined text hierarchy and emphasized key information for better readability.
Modernized the visual design to replace the outdated interface.
Implemented a consistent light and dark mode design system.
New Workflow Features
Export options
Dropdown with multiple export methods, including email, giving users more flexibility when exporting reports, past analyses and historical data.
Data Workbook
New option to generate a file formatted and ready for use in the Data Workbook, supporting further analysis and review of examination data.
Light Mode
Dark Mode
High-Fidelity Wireframes
User Flow
I chose this scenario of a doctor persona scenario to illustrate one of the Report Generator’s core workflow.
Clinical Measurements Report
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, eye layer map, video recording and a summary of clinical measurements for print.
All patient data displayed is fictional
All patient data displayed is fictional
Original Clinical Measurements Report
Design Improvements
Refined text hierarchy and emphasized key clinical information for better readability.
Improved layout of histograms and graphs for a more ergonomic and structured visualization.
Integrated layer thickness over time with its corresponding graph dynamics into a unified component.
Modernized the visual design to replace the outdated interface.
Implemented a consistent light and dark mode design system.
Light Mode
Dark Mode
1
Unified Workflow
A centralized workstation that combines tear film analysis, reports, and clinical tools into one consistent platform, reducing fragmented workflows and improving usability.
2
Improved Usability in Clinical Environments
A redesigned reporting ecosystem with light and dark mode experiences optimized for low-light examinations and all-day workstation usage.
3
Enhanced Data Clarity
Reorganized reports, graphs, and tables to improve data interpretation and support faster clinical decision-making.
4
Scalable Design System
Established a consistent light and dark mode design system to support future tools and maintain UI consistency across the platform.
Impact & Outcomes
TFI Workspace
The Workspace 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 switch, a central workspace for running applications in single or split view and a console panel for system logs.
Features
Information Architecture
Design Evolution
Low-Fidelity Wireframe
Design System Insights
High-Fidelity Wireframes
Light Mode
Prototype
Dark Mode
Prototype
TFI Workspace
Designed a unified workstation that improved the efficiency of managing a tear film analysis system.
Collaboration
1 Product Manager
1 Developer
1 COO
Tools Used
Introduction
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 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.
Context
The Goal
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.
Target Users
Ophthalmologists managing patients analysis data and clinical reports
Technicians responsible for supporting and maintaining the workstation platform.
The Problem
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.
Deliver
Reworking and redesigning the Report Viewer application
Redesigning the Clinical Measurements Report.
Redesigning the Report Generator application.
Creating a dual-mode design system.
Building a unified workspace experience.
Understanding the Challenge
The existing applications were functional but outdated and fragmented across separate interfaces. The redesign have to focused on modernizing and unifying the overall experience.
User Personas
Dr. Jennifer Wang
Ophthalmologists Dark environment
Goals
Review and compare patient tear film analysis quickly.
Access clinical reports and measurements in one unified workplace.
Reduce visual strain during long examination sessions.
Frustrations
Switching between multiple disconnected applications.
Poor readability and cluttered data visualizations.
Bright interfaces causing discomfort in dark environments.
Needs
A clear and low-strain dark mode interface.
Fast access to patient analysis history and reports.
Consistent workflows across all workstation tools.
Daniel Ross
Technicians
Light environment
Goals
Monitor and manage examination data efficiently.
Support report generation and workflow operations.
Maintain stable and organized platform usage throughout the day.
Frustrations
Inconsistent UI patterns between tools.
Eye fatigue from high-brightness white interfaces.
Time wasted navigating complex workflows.
Needs
A balanced light mode with reduced glare.
Clear system organization and navigation.
Reliable and consistent interface behavior across applications.
The Mission
1
Unified clinical Environment
A centralized space that combines tear film analysis, reports, and clinical tools into one consistent platform, reducing fragmented workflows and improving usability.
2
Adaptive reporting & dual-mode
system
A redesigned reporting ecosystem with light and dark mode experiences optimized for low-light examinations and all-day workstation usage.
Report Viewer
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.
Original Report Viewer
Feature Evolution & Fixes
New Workflow Features
Add Filter
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.
Export File
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.
Delete File
Introduced file deletion functionality to support growing patient data volumes and improve long term table and report management workflows.
Color Inspiration
Light Mode
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.
Dark Mode
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.
User Flow
I chose this Main scenario of the Doctor persona to illustrate how users efficiently filter, review, and export patient reports within the system.
Design Evolution
Mid-Fidelity Wireframe
High-Fidelity Wireframes
Light Mode
Dark Mode
Features Added During Iteration
Time Analyzer and Report view
Added a time analyzer feature, with details omitted for confidentiality, and the ability to open generated reports from the report generator app when needed.
Column Resize
Added resizable table columns to allow users to adjust column widths for better readability and a more comfortable data management experience.
Report Generator
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.
Original Report Generator
Design Improvements
Refined text hierarchy and emphasized key information for better readability.
Modernized the visual design to replace the outdated interface.
Implemented a consistent light and dark mode design system.
New Workflow Features
Export options
Dropdown with multiple export methods, including email, giving users more flexibility when exporting reports, past analyses and historical data.
Data Workbook
New option to generate a file formatted and ready for use in the Data Workbook, supporting further analysis and review of examination data.
Light Mode
Dark Mode
High-Fidelity Wireframes
User Flow
I chose this scenario of a doctor persona scenario to illustrate the Report Generator’s core workflow.
Clinical Measurements Report
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, eye layer map, video recording and a summary of clinical measurements for print.
All patient data displayed is fictional
All patient data displayed is fictional
Original Clinical Report
Design Improvements
Refined text hierarchy and emphasized key clinical information for better readability.
Improved layout of histograms and graphs for a more ergonomic and structured visualization.
Integrated layer thickness over time with its corresponding graph dynamics into a unified component.
Modernized the visual design to replace the outdated interface.
Implemented a consistent light and dark mode design system.
Light Mode
Dark Mode
Impact & Outcomes
1
Unified Workflow
Consolidated multiple tools into a single workstation, reducing fragmented workflows and improving efficiency for clinical users.
2
Improved Usability in Clinical Environments system
A redesigned reporting ecosystem with light and dark mode experiences optimized for low-light examinations and all-day workstation usage.
3
Enhanced Data Clarity
Reorganized reports, graphs, and tables to improve data interpretation and support faster clinical decision-making.
4
Scalable Design System
Established a consistent light and dark mode design system to support future tools and maintain UI consistency across the platform.
TFI Workspace
The Workspace 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 switch, a central workspace for running applications in single or split view and a console panel for system logs.
Features
Information Architecture
Design Evolution
Low-Fidelity Wireframe
Design System Insights
High-Fidelity Wireframes
Light Mode
Prototype
Dark Mode