TFI Workplace
Designing a unified Workplace environment for managing a tear film analysis system.
Collaboration
1 Product Manager
1 Developer
1 Stakeholder
Tools Used
Introduction
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 workstation 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 Solution
1
Unified clinical workstation
A centralized workstation 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.
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 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.
Column Resize
Added resizable table columns to allow users to adjust column widths for better readability and a more comfortable data management experience.
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
I applied the AdOM brand color as the primary color and after researching competitor platforms (images below) I combined it with darker surfaces and light text to ensure clarity and reduce eye strain in low-light.
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
Low-Fidelity Wireframe
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.
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.
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.
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 Workplace
The Workstation 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 Workplace
Designing a unified Workplace environment for managing a tear film analysis system.
Collaboration
1 Product Manager
1 Developer
1 Stakeholder
Tools Used
Introduction
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 workstation 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 Solution
1
Unified clinical workstation
A centralized workstation 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.
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.
Column Resize
Added resizable table columns to allow users to adjust column widths for better readability and a more comfortable data management experience.
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
I applied the AdOM brand color as the primary color and after researching competitor platforms (images below) I combined it with darker surfaces and light text to ensure clarity and reduce eye strain in low-light.
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
Low-Fidelity Wireframe
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.
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.
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.
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 Workplace
The Workstation 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
Impact & Outcomes
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.
TFI Workplace
Designing a unified Workplace environment for managing a tear film analysis system.
Collaboration
1 Product Manager
1 Developer
1 Stakeholder
Tools Used
Introduction
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 workstation 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 Solution
1
Unified clinical workstation
A centralized workstation 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.
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.
Column Resize
Added resizable table columns to allow users to adjust column widths for better readability and a more comfortable data management experience.
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
I applied the AdOM brand color as the primary color and after researching competitor platforms (images below) I combined it with darker surfaces and light text to ensure clarity and reduce eye strain in low-light.
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
Low-Fidelity Wireframe
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.
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.
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.
All patient data displayed is fictional
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 Workplace
The Workstation 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
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.