list management reimagined_

The Problem

One of the primary actions a user takes 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 Contact Lists, they found that their Contact List Page was getting long and unruly. There was no way to quickly locate specific Contact Lists (that weren't on the first page) or easily manage them. Additionally, the only way to access older Contact Lists was to click through multiple pages until they landed on the page with the right one.

Original Contact List Page

original contact list drop shadow

The Solution: An Enhanced Contact Lists Page

boodleAI’s Product Manager provided me with a loose brief:

Design a tag system for contact list management. This was deemed to be the most suitable and least disruptive enhancement to the current experience by upper management.

My task was to design a tag system that would:

  1. Facilitate Contact List management
  2. Enable the user to easily search for specific Contact Lists
  3. Enable the user to manage their Contact 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 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 conducted an analysis on how other products facilitate tag creation. I ended up drawing 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 from Gmail to give the developers with regards to functionality.

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 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 familiar to them and maintaining overall consistency.

04a - Contact Lists - Manage Tags – 2

Bulk Actions for Tags

A bar was added on top of the Contact Lists 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 indicating 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 users 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.