The Problem

One of the primary actions a user will take in their boodleAI account is to upload a list of leads, which is called a 'Contact List.' Users can access all their uploaded lists from the Contact Lists page, which at the time, essentially acted as the home page of the platform (when users logged in, they landed on the Contact Lists page). As users began to upload more and more lists, they found that their Contact List Page was getting long and unruly, with no way to manage their lists to make it easier and quicker to find the one they needed. In addition, the only way to access older lists was to click through multiple pages until they landed on the page with the right list.

Original Contact List Page

original contact list drop shadow

The Solution: An Enhanced Contact Lists Page

boodleAI’s Product Manager came to me with a loose brief, which was that list management via tags was deemed to be the most suitable and least disruptive enhancement to the current experience. My task was to build on this brief by designing a tag system that would facilitate contact list management, as well as enabling the user to easily search for specific contact lists. The goal with each experience was to enable users to easily manage their lists and tags in the least amount of steps possible.

The Tags List

The biggest change made to the existing interface in my design was adding the Tags list on the right hand side. List management had been a frequently requested  feature by customers, which is why I chose to put this Tags list in a prominent position on the Contact List page (i.e. the home page). There was also a lot of white space not being used in the original Contact List page, so there was ample real estate for the Tags list without forcing the existing page elements to compete for space. The Tags list serves a double purpose as it is also a filtering function. When a user selects a particular tag from the Tags list, only contact lists with that tag will display. This helps the user to quickly sort their contact lists if they only want to work with those that have a certain tag and hide all the rest from view.

01a - Contact Lists - List View – 2

Adding Tags to Contact Lists

To add a tag to a contact list, the user clicks on the tag icon in the desired contact list to either select an existing tag, or create a new tag (which is done via a modal). If a new tag is created, it is automatically added to the particular contact list as well as to the Tags list on the right, where a user can view all existing tags. For this experience, I drew a lot of inspiration from Gmail's labels. Gmail offers a neat and straightforward labelling experience which I felt could be well applied to boodleAI's platform. Since this was a new design, it was helpful to have references to point the developers to with regards to how it should function.

02a - Contact Lists - List View - Add Tag - 1 – 1

Managing Contact List Tags

If tags were going to be introduced to the platform, it was necessary to include a way to easily manage those tags. The solution implemented was a side drawer which appears once 'Manage Tags' is clicked from the Contact List page. In the drawer, the user can search, edit and delete existing tags, or add a new tag. I chose the drawer for this case as the same pattern was already being used elsewhere on the platform. Re-using the pattern would result in an easier deployment for the developers, as well as showing the users something already faimilar to them and maintaining overall consisentcy.

04a - Contact Lists - Manage Tags – 2

Bulk Actions for Tags

A bar was added on top of the contact list section that contained bulk actions allowing heavy platform users to add or remove tags for many lists at once, or delete lists in bulk. The search bar was also placed here to make use of the white space, as well as idnicating to users its specificity - i.e. this search bar's purpose is to search for specific contact lists. Other search bar placements explored included the dark bar at the top of the page, and next to the 'Add Contact List' button. However these were ruled out as they may have indicated a more global search function, which might confuse customers and was not what the brief asked for.

05a - Contact Lists - Bulk Select All – 2
06b - Contact Lists - List View - Bulk Add Tag – REVISED
boodleai-logo-dark-font-alt

An Enriched Analytics Platform for Sales, Marketing, and Fundraising Teams

boodleAI is a SaaS startup that specializes in enriched analytics for sales, marketing, and fundraising teams. Their mission is to democratize data, making it faster and easier for all organizations to locate their best leads and prospects in any contact list. By using advanced data enrichment and insightful predictive analytics, boodleAI enables its users to achieve lifts in conversion, engagement, and retention rates.

As an interaction designer at boodleAI, I designed a number of new features and platform enhancements based on customer feedback.