In May of 2020, I was asked to build out a vital feature for OmniSci users. As an analytics platform, our product allows users to create dashboards using vast quantities of data in a flash. However, the product was lacking a robust mechanism to sort, filter, and save list views of dashboards users create.
To understand how these features worked in the real world, I went to analyze how some leaders in “lists” solved this problem. I decided to study the UI patterns of Shopify, Notion.so and Facebook Ads manager.
After loads of research and diving into these interfaces, I was still struggling with how to “place” the different action interfaces, and bring a seamless experience to the current UI of OmniSci's dashboard manager.
The problem with the current UI, was that the Navigation and create new dashboard were in conflict from a hierarchy POV. The import and “add new Dashboard” Controls were nested next to the search bar, an organism that altered the view of the list below but did not add to it.
My solution to this problem was to bring visual clarity to these elements by placing them in their own separate locations. You can see from the image above, my plan was to nest these elements in a parent Child sibling manner. Navigation being the highest level, adding a new dashboard through importing or starting from scratch, and then the list view, with the search, filter, bulk actions, and saved view UI. I believe this to be a more helpful option for users and the law of common region can back me up on that.
Before jumping into Figma land, I spent a couple of hours sketching out the different organisms of my UI. This would help me save time when I jumped into Figma.
To make way for a less messy Figma experience later on, I entrusted myself to a few handy dandy user flows. This helped me further solidify the interaction and plan out the number of steps/screens I would need to design for in my primary actions:
After spending some late nights on this bad boy, I was happy to make it out the other side with a workable mock-up to share with the team.