Rebuilding Wayfair's most complained-about component into a 99-piece modular library that moved user satisfaction from 2.8 to 4.5 out of 5.
Tables are everywhere at Wayfair. Every supplier portal, admin tool, inventory system, and internal dashboard relies on them to present dense operational data. With 200,000 suppliers, agents, and internal users interacting with these tools daily, the quality of the table component had outsized impact on productivity across the entire organization.
Table v1 had become the #1 complaint in Wayfair's design help channel on Slack. That's not a minor UX annoyance, that's a systemic failure that was slowing down designers, frustrating engineers, and creating inconsistency across every internal product.
I was tasked with leading the v2 redesign: managing a team of 3 designers, running the research, architecting the component system, and delivering something that would work for every use case Wayfair teams actually needed, not just the ones we'd anticipated.
Before Table V1, the original simple table experience prior to the redesign. This early version lacked the flexibility, scalability, and component architecture teams needed across enterprise applications.
Before running user interviews, I conducted a competitive analysis of Material UI/React Table and IBM Carbon Design System, two industry references for best-in-class table implementations. The common thread between both: great design systems provide modular, composable components, not monolithic ones. You get lego bricks, not a pre-built house.
That reframe, from "one table component" to "a system of constituent parts", became the philosophical foundation for everything that followed.
I then conducted 10 contextual interviews over 5 days with designers and developers who used Table v1 regularly. Three themes emerged consistently:
That third point was particularly telling. The fact that the main workaround was "break the symbol and rebuild it manually" meant the component library wasn't actually being used, it was being referenced and then abandoned. That's not a documentation problem; it's a fundamental architecture problem.
User testing was conducted with 20 participants across five design sprints. Affinity mapping helped quickly synthesize feedback, identify recurring themes, prioritize opportunities, and align the team on the highest-impact improvements.
This reframe changed how we structured every deliverable. Instead of designing "a table," we designed cells, headers, row states, filter panels, action bars, sort indicators, column resize handles, individually, with clear documentation, and then demonstrated how they combined into compound patterns for the most common use cases.
The result: designers could assemble what they needed. Engineers could implement it prop by prop. And the system stayed consistent because the atomic pieces were the common language.
I organized 5 design sprints over 10 weeks, each targeting a specific table interaction pattern. Each sprint ended with user testing, synthesized in Miro via affinity mapping. Designs iterated between sprints based on direct feedback, with 20 participants total across the sprint series.
| Sprint | Focus Area | Key Output |
|---|---|---|
| 01 | Simple Tables & Basic Structure | Base atomic architecture, column sorting, cell states |
| 02 | Editing & Alerts | Inline editing patterns, alert and validation states |
| 03 | Filtering & Bulk Actions | Filter panel component, multi-select with bulk action bar |
| 04 | Customizable Columns, Quick View, Expandable Tables | Column config modal, expandable row pattern, side panel |
| 05 | Scrolling & Overflow | Sticky headers, horizontal scroll, frozen columns |
Each pattern below was tested with internal Wayfair designers across 5 sprints before being built into the component library.
Atomic Lego Pieces, foundational table building blocks including headers, cells, actions, alerts, pagination, and interaction patterns.
Low-Fidelity Prototype: Simple Table, early exploration focused on hierarchy, readability, and scalability.
Low-Fidelity Prototype: Table with Caption, testing supporting metadata, context, and content relationships.
Low-Fidelity Prototype: Selectable Rows, validating bulk actions and row-selection workflows.
Beyond designing the system itself, I helped create crystal-clear documentation explaining how to use Table V2, its atomic components, the six core table patterns, and compound examples demonstrating how teams could extend the system to meet unique user needs. The documentation included implementation guidance, interaction behaviors, accessibility considerations, DOs and DON'Ts, and examples for both designers and engineers.
Based on research feedback, teams needed confidence that they were using components correctly. We introduced reusable templates, plugins, and workflow accelerators that helped designers rapidly assemble tables while maintaining consistency across Wayfair's enterprise ecosystem.
Homebase EPD V2 Toolkit and supporting documentation used to scale adoption across product teams.
Download Usage Guidelines| Component | Before | After |
|---|---|---|
| Editing Table | 2.0/5 | 4.0/5 |
| Expandable Table | 2.3/5 | 4.5/5 |
| Row Selection | 3.0/5 | 4.0/5 |
| Overall Average | 2.8/5 | 4.5/5 |
| Users impacted | … | 200,000+ |
| Components delivered | … | 99 (85 atomic + 14 compound) |
This project also shaped how I think about design leadership. With two direct reports on the project, I had to split my time between doing the work and making sure the team was doing their best work. The most valuable skill wasn't the design itself, it was teaching junior designers how to think in systems, run research, and defend decisions with evidence.