Patient Management System (PMS)
Overview
The Patient Management System (PMS) is a critical web-based healthcare CMS used by clinics and hospitals to manage patient records, encounters, scheduling, billing, and communications. Originally built on Kendo UI 2014, the system had aged significantly in terms of design, UX standards, responsiveness, and accessibility. I was responsible for leading the complete UI modernization and migrating the system to Kendo UI 2024, incorporating modern design principles, accessibility standards, and scalable components.
Tools & Technologies:
- Kendo UI (2014 to 2024)
- JavaScript / jQuery
- HTML5 / CSS3 / SASS
- Figma (for design reviews and redlines)
- Browser DevTools, Postman, Git
⚖️ Project Complexity
The complexity of the PMS UI modernization can be broken into these major areas:
1. Sheer Module Depth (40+ Tabs and Submodules)
Each tab (e.g., Patients, Encounters, Summary of Care, PWB) contained numerous sub-tabs and deeply nested components:
Over 200 screens touched by UI updates
30+ distinct filters, multiple modals, reusable components
2. Visual Consistency Across Legacy Screens
The original PMS lacked a global style guide. Every section was built independently, which led to:
Varying button sizes, font styles, paddings
Non-standard tooltip behavior, alignment issues
Custom overrides conflicting with Kendo updates
Solution:
I created a component library and theme mapping from scratch based on Kendo 2024 Material Theme.
Unified all buttons, dropdowns, inputs, and alerts across the app.
3. Responsive Redesign from Fixed Layouts
Most layouts used table grids with fixed widths.
Required rewriting layouts using Kendo Flex/Grid,
TileLayout, andDrawercomponents.Introduced accordion panels, off-canvas filters, and sticky headers.
4. Accessibility Overhaul
WCAG compliance was non-existent.
I implemented semantic tags, ARIA roles, skip links, keyboard traps fixes.
Refactored forms to support screen readers and keyboard-only navigation.
5. Dropdown & Date Picker Regression Issues
Kendo 2024 updated its dropdown logic, causing:
Misaligned icons
Disappearing caret icons
Date truncation & tooltip overlaps
Solution:
Deep-dived into Kendo’s updated API, applied hotfixes using utility classes and shadow DOM investigation.
Logged bugs with Telerik and managed temporary overrides for critical regressions.
6. Z-Index and Modal Layering Conflicts
In multi-tab sections like SOAP Notes or Referrals:
Overlays and modals were opening behind containers.
Hover states clashed due to nested scroll containers.
Solution:
Standardized modal behavior with Kendo
Window,Dialog, andPopuplayering guidelines.Used consistent z-index stacking with a custom
z-index-manager.scss.
