Table components
Components designed to improve consistency and scalability.
Site update in progress 💡
I'm currently upgrading my portfolio, improving both visuals and content presentation. Please bear with any temporary inconsistencies. Feel free to reach out if you'd like to discuss anything in the meantime!
Eric Cheng, Jan. 2025
Duration
3 months (2023)
Team
Experience Design
Product Management
Web Development
QA
Role
Product Designer
Tools
Figma
Leonardo Color
Jira
Confluence
Problem
Key to over 30% of features, tables on Suzy were extremely inconsistent. The lack of cohesive consideration caused design confusions, slow design-to-development process and high vulnerability to project pivots. Overtime, more stakeholders sacrificed table quality over speed, and more than 60% of end-users found table content illegible.
Objective
Improve and maintain Suzy table consistency with quality.
Ensure and promote future-proof table design adoption with efficiency.
Measure of success
Iteration throughput
More design iterations archived in given sprint or faster turnaround time responding to project pivots.
Time to market
A faster release speed from design-development handoff to QA approval.
Table UX quality
Improvement in Suzy table user satisfaction focusing on information legibility across devices.
Solution
I delivered three standardized table components supporting key display formats with consistent cell units (swappable content), cohesive table layouts (interaction-ready), and improved responsiveness. By providing Figma expertise, I empowered designers and engineers to efficiently create and scale consistent, high-quality table experiences.
x
Faster design speed
%
Improve team satisfaction
x
Faster QA time
%
Increase user satisfaction
Scroll down for full story
How might we
How might we help the Suzy product team to deliver and scale table designs with consistency, efficiency and quality?
Understand problem
Learning from the team
Fragmented standards
There were no shared rules to guide the Suzy table design due to low business demand, a situation that is no longer relevant.
Lack of adaptability
A lot of table projects released under-considerate because time constrain to scale thoroughly.
We need
A single source of truth for the team to develop tables with.
A cohesive rule set up to scale the table for prospect use cases.
Discovery
Audit
Top-down
I focused on the macro level of existing table designs. Learn from first hand experience of designers' decision flows and draw high-level table categorization.
Bottom-up
Starting with micro level cell units, I categorized cell type in relationship to content variations as well as micro scope of table interaction and responsiveness decisions.
Align
We refined the solution not only to solve existing problems but also count for the future, updating the planning tree graph summarized from the audit on improvements and ensuring scalability. We took away with an actionable design vision.
Comparative research
I compared similar table components for B2B SaaS business, with our vision, and identified ideas that could inform and enhance our design process. This ensured our solution is well-informed, efficient, and aligned with best practices.
Table components
Cells
I consolidated table cell design into three variants, worked with designers to streamlined styling and aligned with engineering on token application. These fundamental units ensured design consistency, efficient scaling and flexibility.
Rows & Columns
The row and column components simplify table creation by providing pre-designed options, reducing repetitive tasks. Rows optimize scalability with memory-efficient variants, while columns include pre-made content setups for faster implementation, enhancing efficiency and consistency.
Tables
I designed three table components in a consistent style. Each component integrates clear design guidelines and a property panel tailored to designers’ workflows. These designs address current and future project needs, improving table consistency, maintaining quality, and promoting efficient, future-proof adoption.
Implementation
Delivering component value
I maximized business value of the component by making it easy for stakeholders to implement. To achieve this, I led onboarding and advocacy efforts with designers, established version control standards with component users, and set up a Slack channel to streamline communication about updates. Additionally, I coordinated a bi-weekly feedback survey to gather input from all stakeholders, enabling iterative improvements to the component.
Outcome
Platform wide table improvement
Within 1 quarter of table components release, we refreshed 100% tables with the new design, streamlined the visual and experience consistency, and received immediate positive responses from users.
Adoption on new projects
100% designers immediately adopted new designs to 3 new projects, we iterated 2 times more design options with faster time to market. I was actively involved in the design and development process to collect feedback to keep component refinement for consumers’ habits.
"I am so grateful we have these table components right on time. They freed me from duplications, brought consistency. I finally feel like we are working as a team and able to focus on the design."
-Kaye K. , Senior UX Designer
Learnings and reflection
Solve complexity through incremental steps: Breaking down complexity into smaller, actionable steps enables efficient problem-solving.
Effective communication builds consensus: Communication bridges cross-functional team understanding, inspires ideas and workflow efficiency.
Win as a team: Work with empathy, curious to learn expertise from other team members can empower collaboration and drive success.
