AccountView's Activity Feed

The activity feed is a sortable, filterable list of portfolio transaction within LPL's AccountView product. Together with my product, research, and development partners, we iterated and refined a much needed revamp, that drastically improved its usefulness and customizability.

Viewing density and row truncation toggles in action.

There was a lot of low hanging fruit in terms of organization and visual optimization. The priority of sorts and filters based on user behavior, the order of columns and the presentation of the table data. And as with many enterprise products, navigating the contraints that come with a complex codebase and various API integrations.

The potentially extreme variance of certain data like the transaction descriptions and symbol labels led to an out-of-the box solution with a new "row trunctaion" toggle. A user can be casually reviewing their latest transactions, or in need of more scruity for tax purposes. The facet row (filters and sorts) easily accomodate a range of different possibilities.

Annotated designs in support of development.

Viewing transactions sorted by accounts.

Complexity solved up front, to make things simple for the user.

Sizing logic for table cells, all rooted in CSS properties. The lack of which previously resulted in a very ineffient use of space.

Typography treatments to normalize rough data feeds and meet accessibility requirements.

Annotations for custom table style variables.

Because we work so often with data-rich tables, I created custom table variables in our design system and CSS files. These "super semantics" as I like to call them, give added semantic clarity to designers consuming them, and developers/QA referencing them. General typography styles can sometimes have ambiguous usage guidelines and being specific in this case ensures our tables stay consistent and compliant.

"Super semantic" table styles in our CSS.

Many factors contributed to the successful launch of the updated Activity page. Despite not being initally scoped, I determined that several enhancements would make it go above and beyond, and we got the job done.

Detailed, developer-ready deliverables, CSS, basic HTML support, feedback and support from all stakeholders, and an amazing developer all contributed to this page launching on time and with praise from the higher ups.

< back to work view next project >