Challenge
Through thorough discussions and data analysis with product managers and developers, we identified several pain points that required optimization.
Previous version:
🧨 Inconsistent styling across table
🧨 Redundant and duplicate functionality
🧨 Poor responsive design
🧨 Overcrowded data presentation
🧨 Limited scalability for future needs
Research and Testing
Benchmarking for Best Practices
To design a more intuitive and scalable table system for the admin dashboard, I started by conducting competitive and comparative benchmarking. I analyzed how modern admin platforms structure their data tables—focusing on layout, interaction patterns, and usability best practices.
During this research, I highlighted reusable UI components that were most relevant to our booking system, taking detailed notes on how other platforms handle complex data types, sorting, filtering, inline editing, and responsiveness. These insights provided a strong foundation for defining our own design principles.
Defining UX Considerations
Next, I synthesized my findings into a list of key UX considerations for data tables, covering aspects such as:
Content hierarchy (labeling, column grouping)
Alignment and spacing (visual rhythm and readability)
Copywriting and tone (clarity, actionability)
Interaction feedback (hover states, loading indicators, error states)
This helped me identify opportunities to improve clarity, reduce cognitive load, and increase efficiency for admin users managing large volumes of data.
Cross-functional Validation
Building on that, I created a Table Type & Data Type Guideline—a systematized reference that mapped different types of content (e.g., strings, Date, tag/label ) to their appropriate UI patterns. This ensured consistency and scalability across the platform.
Finally, I collaborated closely with the R&D team to validate this system, ensuring that the proposed structure aligned with the technical architecture and real data structure. The guideline became a shared reference that informed both front-end development and future design iterations.
The direction & Solution
We implemented a comprehensive approach to address these challenges.
Data Type Standardization
We marked clear properties for each category and defined specific attributes, enabling team members to quickly locate the correct components for their table needs.
🐛
Transforming the unstructured
table system
🦋
Well-organized table and
data type catalog.
Component Library Development
With customizable table elements. For each Table Element, I developed a fully-featured version that could be simplified by adding or removing functions as needed for different scenarios.
🎉
Easily modifiable Figma components
🎉
Clear handover instructions for developers
🎉
Design considerations for all scenarios
Enhanced User Experience Features
The table page now offers multiple filters for easy result searching. Users can select multiple records for batch actions, and the document export and customize table display features enable better data organization.
🌟
Advanced filter and search
🌟
Batch processing function
🌟
Document export
🌟
Customized Table display
Integration with Ant Design Library:
We chose to use the Ant Design Library as our table design system foundation to optimize efficiency and results.
This library allowed us to customize both visual design and functionality while creating a more flexible Table component.
🌟
Simplifies the development process
🌟
Ensure the deliverable quality
Conclusion
This successful revamp not resolved the table component issues but also established a foundation for system-wide improvements for all the NineSmart product.
