Hospitality Booking Widget
Client: Global Retail, Travel, and Media Brands
1. The Challenge
The existing hotel group booking platform suffered from a fragmented search experience — dates and guest counts were managed independently, leading to mismatched price estimates and a confusing user flow. The custom date-picker and guest counter components also had no keyboard accessibility, making the platform unusable for screen-reader users.
2. My Solution
Designed a unified booking widget powered by a custom React hook (useBookingFilter) that co-locates date range and guest count state, computing a real-time price estimate via useMemo. Applied React.memo to isolated counter sub-components so rapid guest adjustments never cascade re-renders through the full modal tree. Built a fully accessible modal with ARIA roles, focus trapping, and ESC-to-close keyboard navigation.
3. The Outcome
Delivered a premium, responsive booking card that dynamically calculates pricing as users adjust dates and guest counts. The widget passed WCAG 2.1 AA accessibility audit and reduced booking-flow drop-off rates by providing immediate price feedback.