Designed a scalable interaction pattern for accessing supplementary table cell information that reduces clutter and provides teams with a reusable component.
INTERACTION DESIGN
SYSTEMS DESIGN
PROTOTYPING
Company
Lightspeed Retail
Role
Lead Designer
Skills
Interaction design
Journey mapping
Prototyping
Systems design
Systems documentation
Tools
Figma
Context
Across Lightspeed's table components, users often need access to supplementary information tied to specific data points. This contextual information is crucial for performing key tasks effectively.
Problem
The previous pattern, which used icon buttons or text placed next to the data point, created visual clutter and became ineffective when a cell contained multiple pieces of information. It led to a poor user experience and did not scale well for more complex workflows, particularly in data-dense interfaces like reporting tables.
Solution
Designed a new, scalable pattern called Expandable Cells that declutters the interface while allowing users to access additional details on demand. The grey corner icon indicates the cell is interactive, and on hover, the cell highlights to reinforce this interaction. I led solution discovery and collaborated with Design Systems and stakeholders from impacted domains to ensure alignment across shared components and use cases.
Impact
This new design pattern improves the user experience by reducing visual clutter and making it easier to access relevant context within data-dense tables. It helps users focus on the task at hand while still having the option to view additional details when needed.
Beyond the immediate UX benefits, the component is designed for scalability and flexibility. It equips other designers and teams with a reusable solution, enabling faster delivery of complex features and workflows wherever supplementary data information is required, particularly in areas like inventory and reporting.
The most complex scenario occurs in product lookup, when a cell contains both inbound inventory and product locations.
In reporting, the pattern is now able to be scaled to multiple columns.