Parsnip

| connecting brands thru partnerships

Parsnip is a platform that helps like-minded brands connect with each other around co-marketing activities. Today, Parsnip has been instrumental in connecting brands like Bare Snacks, Summit, Health-Ade Kombucha, and NPR. Currently, the Parsnip team is manually filtering and matching-making potential candidates through AirTable.

Objectives

—Design a search & filter interface for web
—Integrate a style guide provided by Parsnip's design team

Role

As a contract designer, I worked on this B2B project end-to-end with a team of other designers. During an 8-week period, we prototyped and refined our wireframes based off of a style guide provided by the Parsnip team. I tested our prototype with several brands & companies currently on the Parsnip platform to validate our designs. A full compilation of our research and findings can be found here.

Setting up the framework

Based off of data provided by Parsnip, users self-identified as one of five categories separated into tabs below.

After users signup or login, they arrive on the All tab where they can browse through a selection of featured companies, events, and more. The tab builds the infrastructure for understanding the various types of people on the Parsnip platform.

Users are able save potential connections for future reference via the interactive heart icon or dive deeper into the various profiles through the See All button.

Navigating search & filter

After inputting keywords into the search bar in the header, users are shown a list view of results with a filter bar on the left. The filter parameters are sourced from the information collected during the sign-in flow.

Grid vs. list

We transitioned to the list layout to provide users with more information. Our research shows that the more information users have, the more likely they would connect with others on the platform.

We made connecting actionable by embedding CTAs within the search results themselves. Clicking on the profile pictures allows users to view and in-depth profile.

skeleton screen

Refreshing only the results area on this screen as users modify their search parameters gives users the impression that they are making progress on the same screen.

Filter Bar

Initial key words are shown highlighted as tags in the word bank below the description. It also appears within the filter bar docked on the right.

Providing dropdown menus lets users choose the granularity of their search patterns while reducing cognitive overload.

Pagination

While scanning through results, users typically go from top to bottom, so there is a chance of skipping page navigation at the top. A more user-friendly approach is to displaying pagination at bottom.

Error states

Providing users with suggestions and recommendations makes drop off less likely. This motivates users to keep on engaging with the website.

Final Thoughts

This project had a lot of constraints at the get go. Since the style guide and brand overhaul was not in our scope, we were able to focus exclusively on the interaction and design of the search and filter feature.

We were giving the specifications for the color and font treatment near the end of our hifi phase. Had there been more time, it would have been interesting to have a deeper conversation about alignment and color use with the other design team. Other features to flush out would be a way for users save searches and how favorited results would be displayed.

Our presentation and recommendations were well-received by Parsnip. Eventually, they intend to monetize parts of the search & filter features on its platform for premium users. I'm excited to see this feature go live.