Background

The NSS booking module, a core component of Ninesmart Product, is a platform offering comprehensive reservation services. It caters to offices, co-working spaces, clubs, and other venues that emphasize self-service.

During a system update, we saw an opportunity to expand its capabilities beyond simple venue reservations to reach a broader customer base.

Challenge

The original Booking System was designed specifically for room reservations using a tree structure for categorization. Items followed a hierarchical classification—for example, "Building A (Location) > Multi-functional Room (Room Category) > Speech Hall (Room Name)."

While effective for showing hierarchy, this structure limited the module to room reservations only. We needed to make the system more versatile to handle various booking types, including office spaces, hotel rooms, events, and classes.

Direction & Solution

To enhance the system's flexibility, we incorporated time as a filter element, enabling the same model to handle regular product orders and membership services.

1. Dual-layer filter tool

Using the dual-layer filter tool, 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 Management:
  Seamlessly handles diverse booking scenarios while offering easy backend configuration for administrators

• User-Centric Design:
  Intuitive two-step filtering process simplifies the booking experience across all types of services

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.

2. Tag base grouping

A tag-based grouping system replacing the rigid layered structure- Items can carry multiple tags

Benefits of Tag-Based Grouping:

1. Enhanced Flexibility:
   Items can be categorized in multiple ways simultaneously, breaking free from rigid hierarchical constraints

2. Improved Searchability:
   Users can filter and find items more efficiently using multiple tag combinations

3. Easy Maintenance:
   Administrators can easily add, remove, or modify tags without disrupting the entire structure

4. Scalability:
   The system can accommodate new types of items and categories without requiring structural changes

5. Future-Proof:
   The flexible architecture allows for easy integration of new features and requirements

In our revamp, we simplified the layered grouping structure. Taking inspiration from online marketplaces that manage numerous items, we implemented a tag-based system to organize and filter different items.

Each booking item can carry several tags, for example "meeting room", "multifunctional room", "Capacity: 5", "Size: 100ft²", etc.

Unlike the previous layered structure that restricted items to a single category, the tag 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.

During the design process, we worked closely with R&D developers to map the new tag system to the existing data structure. This thoughtful approach ensured existing customers could easily transition to the revamped system.

The Results

The redesign proved to be a significant success. By moving away from the rigid layered structure, our enhanced Booking module became truly versatile—seamlessly handling room bookings, membership redemptions, and class registrations. This flexibility not only exceeded our sales targets but also attracted a broader client base.

For example, 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.

Conclusion

The transformation of the NSS booking module demonstrates how rethinking fundamental structures can drive innovation. By implementing a flexible dual-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.