Table Component
A design system component introduced to unify experiences and enhance usability.
Our new design system required a reusable table component to manage the diverse complex use cases across the product.
Tables were previously created as needed, often including features found only in specific areas of the product. This posed the challenge of designing a reusable component that could support all the different functionalities users had in the live product.
The old product was outdated, had usability issues, and lacked consistency across platforms. I worked with the Senior Product Designer and the Director of UX to create a table component for our design system that unifies web, iOS, and Android experiences.
Role
Associate Product Designer
Responsibilities
UI, prototyping
Timeline
2021
Table Example Highlighting Required Features
Table Requirements
Collaborating with the Director of UX and Product Managers, I assembled a list of required features for this table component. This list includes both existing functionalities across the product and features aimed at enhancing usability.
Responsive design
Option to print table contents
Collapsible grouping
Different grouping options, subgrouping
Icons in table cells and group labels
Search function
Expanded row details
Pagination
Filtering
Sortable columns
Specs
I started by establishing the basic structure of the table, including padding, cell height, and alignment rules. Typography choices were made in collaboration with other designers during the development of the rest of the design system. We agreed that tables would always appear within cards, which could expand or collapse depending on what else was open in the dashboard.
An essential step in designing these tables to be responsive was deciding how the information would be displayed once a breakpoint was reached. Reviewing the existing tables and the information currently displayed helped me determine which column types would have fixed sizes and which would stretch or flex in the remaining space.
The Date and Time columns were always fixed in size because their content had a maximum width that remained constant. Priority was given to main titles, such as medication or note names, so I allowed these columns to expand based on their content. Other columns containing supplementary information, like physician names, data types, hospital specialties, and so on, would adjust their width according to the available space.
Component Variants
Full Size | Desktop
Responsive Sizing for Modules | Desktop
Tablet Cards
Mobile Cards
Reflections
Creating a reusable table component made it much easier to integrate different parts of the product into the new UI style. I collaborated with the Director of UX, product managers, and engineering teams to ensure all needs were met and designs aligned with technical constraints. Developers added the table to the component library, which helped maintain consistency and sped up the process of updating the old product.
This table component can be found in various areas of the Patient Keeper product, including:
Notes
Medications
Orders
Patient Visits
Radiology Reports
Problems/Diagnoses
Building this table component was challenging and time-consuming; however, I learned a lot about cross-functional collaboration and the importance of reusable components. This addition to our design system significantly improved our workflow and was pivotal to the product redesign.
Similar Projects
