Duration
3 months
Role
Product Designer
Tools
Figma
Google Doc
Jira
Confluence
Collaborators
Designers
Project Managers
Web Engineers
QA Engineers
Context
Suzy’s design team lacked a standardized table component, leading to inconsistent designs, inefficient workflows, and engineering misalignment. As the primary IC, I designed a scalable, user-friendly table component alongside structured guidelines and educational resources, ensuring seamless adoption by designers and developers.
Impacts
Impact was measured by comparing pre- and post-implementation data, tracking time saved in design workflows, reduction in adoption errors, faster QA reviews due to standardized components, and improved time-to-market by eliminating redundant work.
%
Design speed
%
QA process
%
Component adoption errors
%
Product time-to-market
These impacts were achieved by table components that are…
✹ Project Overview ✹
Missing a reliable table component
Before this project, Suzy’s design system lacked a consistent, reusable table component. Each designer built tables their own way, leading to inefficiencies in both design and development.
After reviewing existing design assets, gathering cross-functional feedback, and attending handoff sessions, I refined the problem into four key “How Might We” (HMW) objectives, "HMW" design table components that are:
Scalable
Supporting the development both legacy and future use cases.
Prescriptive
Providing clear, intuitive guidance for adoption and collaboration.
Inclusive
Considering various viewports and user needs.
Interactive
Enabling realistic prototyping and user testing.
Components, guidelines, and advocacy
I designed the table components using an atomic design approach, paired with comprehensive documentation and advocacy efforts to ensure successful adoption.
Components
Documentation
Advocacy sessions
Continue scrolling to view component detail breakdown.
✹ Deliverable highlights ✹
(1) Three table components
Categorized by data display orientation and sorting direction, I designed three table components that serves as the source of truth for designers to design all kinds of table experiences.
Row table
Column table (Vertical sorting)
Column table (Horizontal sorting)
(2) Documentation and advocacy
I collaborated with UX and engineering team to draft clear text-based guidelines alongside a town hall presentation and 1:1 support sessions to help designers and engineers adopt the new component smoothly. The combination of guidelines and communication helped us to implement "product-centered" component adoption instead of "design system policing".
(3) Design token and variables
Leveraged Figma’s 2023 variables update, which enable design tokens being natively used in Figma. I fully attaching table with alias and component-specific variables, reducing component detachment errors and enabling quick table size adjustments.
Product enhancement comparison
The true success of this table component isn’t just in its design, but in how it enhances product quality. Two comparisons of the table feature before and after implementation highlights the impact of standardized design on usability, efficiency, and consistency.
Reflection
This project transformed how Suzy’s design team approached tables—turning an inconsistent, manual process into a scalable, efficient system that improved speed, accuracy, and collaboration. By combining component design, documentation, and education, I ensured that this solution wasn’t just a one-time fix, but a long-term, maintainable asset for the entire team.
🗒️ Final words
I would love to share the whole picture with you. If you have any trouble accessing the slides above or want to learn more about my approach, please reach out to me via LinkedIn or email. I’d love to have an in-depth conversation about this project.