Table Redesign
Problem
As a financial platform, Altruist relies heavily on table UI/UX for key features. The table component, largely unchanged since the platform's early days, is struggling to keep up with Altruist’s growing and evolving UI/UX. Its lack of accessibility and unclear scrollable areas have led to user confusion and frequent complaints. Advisors have also highlighted the need for customizable functionality, such as data manipulation, to better support their workflows.
Solution
Introduce a border around all our tables (new pattern which was also applied for filters and buttons), update colors to be more accessible, explore scrolling gradient to better indicate horizontal and vertical scrolling, bolded first column for more focus, new UX patterns for saved searches and filtering. This involved lots of UI exploration and internal testing to find the most impactful direction. I created new components in Figma within our design system so it was accessible for other designs to reference as a table template.
Impact
This new table component streamlined the design process by allowing designers to quickly integrate and customize templates directly into their files. For example, I considered different designers' preferences —such as working with rows or columns—to make sure it was easy to use. The updated table UI aligns seamlessly with the platform's overall design, and advisors are thrilled with the enhanced functionality, allowing them to stay within the feature and limiting workarounds outside of the app. While it’s surprising how much thought went into redesigning tables, this project was a rewarding opportunity to think systematically and improve a critical, widely used component.
