Challenge
The original Booking System was designed specifically for room reservations using a tree structure for categorization.
Items followed a hierarchical structure：
Building A
(Location)
Multi-functional Room
(Room Category)
Speech Hall
(Room Name).
This structure limited the module to room reservations only.
Research and Testing
Document Clarification
At the beginning of the project, our team spent time reviewing the documentation of the legacy booking system. Since the system had evolved over time, many functions and data flows were unclear or undocumented.
By carefully analyzing how each feature was connected to user data—such as reservations, availability, and scheduling logic—we were able to extract the most relevant information and build a solid foundation for the redesign process.
Reverse engineered service flow diagram
To better understand the system’s complexity, I reverse-engineered a detailed service flow diagram. This diagram mapped out every key step, from login to booking confirmation, and helped uncover unclear decision points, redundant logic, and opportunities to simplify the user journey.
This diagram became a critical reference for collaboration across design, PM, and engineering teams.
Visualize the user experience
Once we clarified how the legacy system functioned, we focused on understanding the existing service experience from a user’s perspective. I created a comprehensive user journey map that covered the entire booking process—from initial search to order checkout and post-booking review. We structured it into three main phases:
Searching Phase
Ordering Stage
Post-Booking Review
This journey map helped us identify key pain points in the experience, including Inconsistent approval logic， unclear error feedback and confusing booking types.
To deepen our understanding, we defined two main user scenarios:
Goal-oriented users – those who know exactly what they need (e.g., booking a meeting room with specific requirements such as time, location, and features).
Exploratory users – those who are unsure of what they need (e.g., looking for an event or class to attend without specific preferences).
For the first scenario, we found that success relied on clear item labeling, availability indicators, and a strong search and filter system. Prioritized item display logic also played a key role in helping users find suitable options quickly.
In the second scenario, we discovered a major usability issue within the existing booking module. Because of its hierarchical structure, users had to repeatedly backtrack between groups when browsing items. While this wasn’t a problem when there were only a few items, it became frustrating once the system scaled to over 50+ items.
Site Mapping for Feature Redesign
Based on these insights, I created a functional site map to visualize the system architecture and identify areas for improvement. The map included both user-facing features and backend admin tools.
To support cross-functional communication, I used color coding to highlight which areas would be redesigned. This helped streamline discussions with PMs and developers, align expectations, and ensure that everyone had a shared understanding of the system structure.
For this redesign phase, we focused only on the user-facing flows, using them as the foundation for improving usability and reducing friction in the booking experience.
Direction & Solution
Based on the project requirements and our analysis of the current booking platform, I proposed the following solution.
In this revamp, we make the system more flexible to handle various booking types, including office spaces, hotel rooms, events, and classes.
To enhance the system's flexibility, we add the double layer filtering & tag base Grouping to enabling the same model to handle regular product orders and membership services.
Feature 1 | Dual-layer filter 🌟
By this feature, you can quickly narrow down options to find your ideal product.
It could help the system:
Smart Navigation
🎯
Combines time-based filtering with tag-based refinement for efficient and precise search results
Flexible Adjustment
📁
Combines time-based filtering with tag-based refinement for efficient and precise search results
1st Layer Filter
The first layer includes three types of filters: Location, Date/Date Range, and Time/Time Range.
This recommended filtering system allows time-based filtering that can be applied to any time-sensitive product items, such as venue bookings, course reservations, and seasonal ticket purchases.
2nd Layer Filter
The second filter layer contains several tag types: text tags, numerical data, configured numbers, item configurations, and global configurations.
Clients can easily manage these tags for their items through the backend interface.
Feature 2 | Tag base grouping 🌟
We implemented a tag-based system to manage and filter numerous items. It replacing the hierarchical structure, that means Items can carry multiple tags .
Benefits of Tag-Base Grouping:
Enhanced Flexibility
🤸🏾
Items can be categorized in multiple ways simultaneously, breaking free from rigid hierarchical constraints
Improved Searchability
🔍
Users can filter and find items more efficiently using multiple tag combinations
Scalability
🧩
Administrators can easily add, remove, or modify tags without requiring structural changes
Unlike the previous layered structure that restricted items to a single category, the tag-base grouping system allows items to belong to multiple categories simultaneously. For instance, a meeting room can be tagged as both a multi-functional room and a lecture room.
Result & Conclusion 🎉
The redesign proved to be a significant success. seamlessly handling room bookings, membership redemptions, and class registrations. This flexibility not only exceeded our sales targets but also attracted a broader client base.
The booking module was adapted into a venue booking platform for both an NGO and a luxury clubhouse in Hong Kong, as well as a membership redemption system for a Web3.0 game project.
Moreover, the booking module was combined with other modules and implemented across websites, mobile apps, tablets, and kiosks, ultimately being sold to a large real estate developer in Hong Kong.
The transformation of the NSS booking module demonstrates how rethinking fundamental structures can drive innovation.
By implementing a flexible double-layer filter system and tag-based grouping, we created a solution that eliminated system constraints while expanding business opportunities. This project exemplifies how thoughtful UX design combined with technical considerations can create significant value for both businesses and users.