{"id":6987,"date":"2020-09-18T10:43:13","date_gmt":"2020-09-18T16:43:13","guid":{"rendered":"https:\/\/boulianne.net\/design\/?post_type=portfolio&p=6987"},"modified":"2024-03-09T10:51:41","modified_gmt":"2024-03-09T17:51:41","slug":"contact-filter-planning-design","status":"publish","type":"portfolio","link":"https:\/\/boulianne.net\/design\/portfolio\/contact-filter-planning-design\/","title":{"rendered":"Contact Filter Planning & Design"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n
\n
\n

Contact Filter Planning & Design<\/h1>\n\n\n\n

ActiveConversion is a B2B SAAS application that digitally fingerprints people interacting with your marketing, qualifies them based on engagement levels, and provides avenues to nurture and engage with the most interested prospects.<\/p>\n\n\n\n

The Backstory<\/h4>\n\n\n\n

ActiveConversion was adding a new and integral feature to its flagship product – contact filtering. Thus far in the product, each core function you wanted to perform with a specific contact had a separate screen and reporting. Want to add a contact to a mailing list? See a contact\u2019s subscription status? Go to Mailing Lists. Want to see that same contact\u2019s engagement level? Go to Prospects. Or Leads, if they have a high level of engagement. Want to see which sales rep that contact is assigned to? Go to Leads, Prospects, or the Sales Rep screen.<\/p>\n\n\n\n

This new Contacts screen and filtering replaced four screens with one unified way to review and manage your contacts. Sounds great, right? Right. Not only would this make our users\u2019 experience with the product a lot simpler and more enjoyable, but it would also reduce development complexity as the previous screens will no longer need to be maintained. Because we were merging four screens into one, we still needed a way to view and filter contacts to perform the same functions as were available on the previous screens. This is where a contact filter comes into play.<\/p>\n\n\n\n

The Scenario<\/h4>\n\n\n\n

Our development team had already prototyped the new Contacts screen, along with a filter feature, in our staging environment. The product lead came to me for suggestions on how to improve the filter interface. He wanted to start implementing the changes as soon as possible, so I had to perform guerilla UX research and propose UI improvements in short order to get the most obvious challenges addressed. Here is what editing a filter looked like when I started working with the team on it:<\/p>\n\n\n\n

\"Contact<\/figure>\n\n\n\n

The Users<\/h4>\n\n\n\n

Before you can do any sort of user interface work, you need to understand your users and what they’re trying to accomplish with the interface.<\/p>\n\n\n\n

ActiveConversion is intended for business users involved with either sales or marketing. This maps out to marketing managers and coordinators, sales managers and reps, and VPs, directors, or leaders of these departments.<\/p>\n\n\n\n

Our team previously had made proto-personas for all of these roles, but in this case, I chose to use Intercom’s Jobs To Be Done method<\/a> to understand what our users need from the product. Although users\u2019 motivations, behaviors, and needs can be very diverse, at the end of the day each piece of software solves a problem by getting a specific job done for their users. These jobs are the same, or very similar, even when the motivation for doing the jobs might be different.<\/p>\n\n\n\n

Jobs To Be Done<\/h4>\n\n\n\n

Below are the 3 main types of users<\/strong>, along with the jobs users needed to accomplish via the new contact screen.<\/p>\n\n\n\n

\"\"<\/figure>
\n
Sales Manager<\/h6>\n\n\n\n
    \n
  • I want to know which leads are ready to assign to my team<\/li>\n\n\n\n
  • I want to know if my sales team is following up with the leads I give them<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n
    \"\"<\/figure>
    \n
    Sales Rep<\/h6>\n\n\n\n
      \n
    • I want to know what specific leads are interested in<\/li>\n\n\n\n
    • I want to know when specific contacts are ready to engage<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n
      \"\"<\/figure>
      \n
      Marketing<\/h6>\n\n\n\n
        \n
      • I want to import my contact lists so I have all my contacts in one place<\/li>\n\n\n\n
      • I want to be able to filter my contact list based on tags and activity<\/li>\n\n\n\n
      • I want to easily add contacts from my filtered list to specific email or nurture campaigns<\/li>\n\n\n\n
      • I want to export my filtered list with email opt-in status for my records<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n

        Planning & Discovery<\/h2>\n\n\n\n

        Since I\u2019m a regular part of ActiveConversion’s product team, I already had insight as to who was responsible for the project (the development team lead), who had approval power (the software architect), and who knew about the history of the product and why decisions were made (our president, myself). Since I\u2019ve been at the company and using the software for years, I already knew the target users (detailed above), product strategy, and success measures.<\/p>\n\n\n\n

        This made discovery quite simple: I needed to figure out what the feature needed to do (and why), apply it to my knowledge of our customer base and their goals, and then find the best way to achieve that in a short amount of time.<\/p>\n\n\n\n

        Planning Session<\/h4>\n\n\n\n

        I sat down with the development lead one-on-one to hash out what the feature was, what it was replacing, what it was supposed to do, and how long we had to work on it. He also ran me through what the team had implemented so far. The outcomes we wanted to achieve<\/strong> were:<\/p>\n\n\n\n

          \n
        1. Simplify the process of adding and editing contact filters<\/li>\n\n\n\n
        2. Improve and clarify the terminology used in the contact filters<\/li>\n\n\n\n
        3. Provide a heuristic review to identify potential issues with the current implementation<\/li>\n<\/ol>\n\n\n\n

          Gathering Requirements<\/h4>\n\n\n\n

          During the one-on-one meeting, I\u2019d noticed that there were a few critical functions from the screens we were combining that were either missing or hidden in sub-menus in the UI. So after our planning session, I ran a feature audit<\/strong> on which core activities each of the screens to be combined contained.<\/p>\n\n\n\n

          Prospects & Leads<\/strong><\/td>View most recent contacts based on engagement\/score, assign sales rep, tag, upload to CRM, add to an email list, add to a nurture email, show\/hide, watch, delete, show most recent first<\/td><\/tr>
          Contacts<\/strong><\/td>View contacts from all time, sorted by name. See if contact is subscribed\/unsubscribed, opt-in status, import or add single contacts, merge duplicate contacts<\/td><\/tr>
          Sales Rep Activity<\/strong><\/td>View contacts assigned to particular sales reps (or unassigned), which ones require followup, bulk assign contacts to specific sales reps, last lead & rep activity, add to nurture\/mailing list, show\/hide, watch delete, tag<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

          Defining Requirements<\/h4>\n\n\n\n

          After consolidating the above list and comparing to the existing implementation, there were two gaps<\/strong> we would need to address during this process:<\/p>\n\n\n\n

            \n
          1. The main screen needed to either add or bring forward the main activities our users would be looking to accomplish: upload contacts to a CRM, add them to a mailing list, import contacts, and sort by most recent activity\/contact name\/score.<\/li>\n\n\n\n
          2. The filters needed an option to view a specific date range and filter by which sales reps contacts were assigned to.<\/li>\n<\/ol>\n\n\n\n

            Between our planning session and the requirements gathered, I now had enough information to start researching.<\/p>\n\n\n\n

            Research<\/h2>\n\n\n\n

            I flipped through my burgeoning arsenal of research methods to find the best fit for the situation, based on the aforementioned constraints. Here are the two methods I chose for this project.<\/p>\n\n\n\n

            Comparative Assessment<\/h4>\n\n\n\n

            People develop usability expectations from the products they use every day. Our software gets benchmarked against these pieces of software even if they aren\u2019t directly competing with our application. This allows some freedom in competitive research in that we review not only direct competitors but also products with different intent but similar functionality.<\/p>\n\n\n\n

            I selected Pipedrive (our company\u2019s preferred CRM) and Google Drive for insight into current filtering methods. <\/p>\n\n\n\n

            Many of our core users use both applications regularly as does our internal team. This makes them ideal applications to draw ideas from for user interface, since familiar interactions feel more intuitive than new ones.<\/p>\n\n\n

            \n
            \n\t
            \n\t\t
            \n\t\t\t\"Visual\n\t\t<\/div>\n\t<\/div>\n\t\t
            \n\t\t\t\n
            \n\n\t\t\n\t\t\t