Procurement Platform Interface Modernization
Procurement Platform Interface Modernization from JSF to React
The HRS eRFP platform, also known as the HRS procurement or sourcing platform, is a comprehensive solution developed by HRS Group to streamline corporate hotel procurement processes.
UX Design
Cloud
Hospitality
Client profile
The HRS eRFP platform, also known as the HRS procurement or sourcing platform, is a comprehensive solution developed by HRS Group to streamline corporate hotel procurement processes. This platform enables efficient communication between corporate clients and hotel suppliers, facilitating tasks such as submitting bids, managing negotiations, and selecting suitable accommodations.
Main challenges
The customer-facing application was built using legacy JSF framework, which resulted in:
• Limited flexibility in UI/UX design
• Performance bottlenecks
• Poor maintainability
• Difficulty in implementing modern features
Performance issues
Dense data rendering issues:
• The interface shows a large grid with multiple columns and complex data
• Each row contains numerous data points, calculations, and icons
UI/UX & limitations
Information Overload
• Multiple metrics, percentages, and values crammed into single rows
• Small, hard-to-read icons and numbers
• Complex tooltip system that overlays critical information
Poor Information Hierarchy
• All data points appear with equal visual weight
• Critical business metrics blend with secondary information
• Difficult to quickly scan and find important information
• Status indicators (green/red dots) are small and easy to miss USA
Front-end modernization solution
The core technology stack was migrated from JSF to React 17 (later upgraded to React 18), and incorporated Redux for state management, Redux-Saga for side-effect handling, and Next.js for server-side rendering capabilities. Architecture Improvements:
Architecture Improvements
• Component-Based Structure
• Developed reusable component library
• Implemented micro-frontend architecture for gradual migration
• Created feature flags system for controlled rollout
• Performance Optimizations
• Implemented code-splitting
• Added lazy loading for improved initial page loads
• Utilized React.memo for component memoization
• Applied useMemo for computation optimization
• Initial data rendering optimization: achieved ~80ms per row load time
• SEO Enhancements
• Server-side rendering for critical pages
• Dynamic meta tags implementation
• Structured data integration
Technical implementation details
State Management
The solution included a centralized Redux store utilizing Saga middleware for complex operations and optimized state updates for performance.
Component Architecture
The front-end architecture followed atomic design principles, utilizing a shared component library and a modular styling system.
Loading Optimizations
Performance was optimized through dynamic imports, route-based code splitting, and asset preloading strategies.
Measurable ourcomes
The platform upgrade delivered substantial improvements in both performance and development efficiency.These measurable outcomes demonstrate the significant impact of our strategic technology investments.
Performance Improvements
• 50% reduction in initial page load time
• Successful handling of 300% increased data load
• Optimized rendering performance (80ms per row)
Development Efficiency
• 40% faster time-to-market for new features
• 50% reduction in feature integration time
• Improved code maintainability through component reuse
This modernization effort successfully transformed the user interface while maintaining system stability and improving overall performance metrics.
Download extended use case in .pdf