Improving data clarity and interaction at scale
As our product matured and customer expectations grew, the limitations of our existing data table component became increasingly apparent. It lacked key usability features, offered poor data comprehension at scale, and had inconsistent interaction patterns. Particularly in high-density workflows like reporting and analysis.
Through prior usability testing, we uncovered common pain points: unclear sorting, confusing link affordances, limited comprehension on long tables, and no support for sticky headers or adjustable density. Product teams were focused on feature delivery, so our team took on both the design and implementation of the new data table to accelerate adoption and reduce fragmentation.
This was a strategic opportunity to elevate a core component aligned with our goal of scaling a premium, practice-ready experience.
Objective
Redesign and implement a powerful, consistent, and scalable data table component that would:
Support the company's strategic lever of growing our premium product offering
Support better data comprehension and usability at scale
Improve affordances for key table interactions (sorting, selection, expanding)
Reduce friction in table-heavy flows like reports and bulk actions
Enable consistency across product teams and reduce future implementation overhead
Challenges and Goals
The old table lacked critical features like sticky headers, adjustable density, and consistent sorting indicators
Interaction affordances (like expandable rows and scrolling cues) were unclear or inconsistent
Past usability testing highlighted that multiple links per row created confusion
Visual hierarchy for totals and grouped data was weak, making interpretation difficult
Teams couldn’t prioritise this work, so we had to take on implementation ourselves to ensure adoption
The component needed to be flexible enough for reports and index views.
Solution
We redesigned the Data Table as a robust, high-utility component optimised for dense data and complex workflows.
Key features included:
Sticky headers for better orientation in long tables
Density controls allowing users to toggle between standard and compact views based on preference or task
Improved sorting affordance, including visible indicators and clearer interaction feedback
Monospace numbers to enhance number alignment and readability
Enhanced expandable rows to improve affordance and comprehension
Bold visual divider for totals, making them easier to identify
Scrolling affordance via edge indicators and scroll prompts, helping users discover horizontal scroll on narrow viewports
Refined row selection affordance, supporting both individual and bulk selection with better visual feedback
Link affordance improvements, based on testing: underlines only on hover and single-link rows to reduce noise
Fully responsive and accessible, with a focus on keyboard and screen reader support
Process
User insights & audit
We leveraged past usability testing and conducted a full audit of table usage across the product. Common challenges included loss of context while scrolling, inconsistent selection behavior, and visual ambiguity for totals and nested content.Design & prototyping
I led the redesign of the component, working across teams to account for all use cases. Prototypes were created to validate changes to affordance, density, and interaction patterns.Testing & validation
We tested key hypotheses:Users struggled with multiple links in a row. This was confirmed, and we limited to a single primary link.
Users preferred density control in complex reports. This was confirmed.
Clearer sorting icons and sticky headers increased speed of use – validated with strong feedback. Testing also surfaced near-term opportunities (like sticky column headers) which are in our roadmap.
Implementation & documentation
Our team built the component in full, given product teams' capacity constraints. We delivered full documentation on FreeStyle, including usage examples, accessibility guidance, and configuration rules to drive consistent adoption.
Outcome
📈 Improved data comprehension:
Sticky headers, monospace numbers, and better spacing helped users retain context and interpret information more confidently.
🧠 Clearer interaction patterns:
Sorting, selection, scrolling, and expandable rows were easier to discover and use, with strong user feedback during testing.
🎯 User validation:
Testing confirmed that link reduction and improved affordances reduced confusion, particularly in table-heavy views like reports.
🧩 Adoption-ready:
With full implementation and documentation, product teams are now set up to use the new table component without additional effort.
💪 Premium product alignment:
The final result is performant, accessible, and scalable. Aligned with the expectations of sophisticated users and larger practices.
🤝 Cross-functional delivery:
Our team designed, built, and delivered the component in close collaboration with engineers and researchers, demonstrating strong ownership and strategic impact.
Overall outcome
…