filter modal mockup.png

Passport Contact Search

 

 Passport

A marketing intelligence platform for internal company use.


outline_person_black_48dp.png

Role

UX/UI Research + Design

outline_access_time_black_48dp.png

Time

8 weeks

outline_create_black_48dp.png

Tools

Sketch, Invision, JIRA, Trello, Abstract


Overview

SlashdotMedia wanted to redesign one of their main products, Passport. Passport is a internal company used marketing intelligence software that helps generate leads. The first page of the software to be redesigned was the Contact Search Page. This page allows users to create lead generation lead lists with granular targeting filters. The search functionality is supported through Elasticsearch. The redesign was done for a platform migration from jQuery to ReactJS.

Business Goals

The Challenge

Design for responsive web.

Redesign the Contact Search Page for Passport.

The Process

As the sole designer, I was responsible for all UX/UI processes from UX research to development handoff. I implemented a lean UX process with rapid prototyping and updates based on user feedback.

UI Responsibilities

UX Responsibilities

  • Develop fidelity wireframes.

  • Implement responsive design.

  • Interaction design.

  • Perform a heuristic evolution of the existing page.

  • Conduct user interviews and user testing.

  • Information architecture.

  • Collaborate with development team.


Research

Heuristic Evaluation

I worked closely with the product owners and users to understand their pain points, wants, and needs.

passportorignial.png

Contact Search Page

At first glance, the page is extremely cluttered and confusing to navigate. It is difficult for the user to understand where to start on the page.

Filter widgets are not ordered in the order they are most used. For example, the Social Engagement widget is in the top row when it is rarely or never used.

Artboard Copy.png

Job Title Filter Modal

Inconsistent UI: Spacing, alignment

Some of the presented options and UI is confusing such as the Include/Exclude drop down, (X) for sorting, red + button for deleting, Add/Remove All, etc.

User Insights

User Interviews + Usability Testing

I conducted user interviews to research their use of the software. Furthermore, I observed them using the product.

Screen Shot 2019-04-01 at 4.01.57 PM.png

Ideation

Design Principles

Styling for a Cohesive Product Family

We utilized components from the client-facing software style guide to create a the style guide for the internal use software. We wanted the internal style guide to eliminate any “waste” (stuff that is purely marketing/eye candy). We want both products to look like they are related or from the same family. However, the goal of each is slightly different and serve different user groups. Internal uses don’t need extra “fluff”, and should focus more on efficiency.

Simplifying the User Interface

For the redesign I wanted to simplify the pages by only displaying the elements that are most utilized in the search.

Concept Development

After defining the goals and processes of the project, I sketched out concepts on paper. I reviewed these concepts with development and product owners to clarify and narrow down the concepts.

Job Filter Modal

Screen Shot 2019-03-21 at 2.45.19 PM.png

Filter Component Concepts

Contact Search Page

Contact Search Page Concepts

Wireframes

Job Filter Modal

wireframes_filtermodal.png

Contact Search Page

User Testing

A/B Testing

Job Title Filter Modal - Filters Component

filterA.png

Concept A

This concept uses radio buttons for filter options.

Concept B

This concept uses a drop down menu for filter options.

Job Title Filter Modal - Results Component

Concept A

resultsB.png

Concept B

Key Takeaways

Simplify

It was evident that the design must be simplified, and not cluttered.

Clarify

The software must be designed to be clear and easy for a new user to use. For example, every button must be clear in purpose and useful to the user.


The Final Product

I worked closely with developers to finalize the design and implement it.

filterJobTitles.png

Job Title Filter Modal

Contact Search.png

Contact Search Page


Results & Key Takeaways

Bridging the gap between designers, developers, and the user

The challenge to create collaboration between departments was a profound problem during this project. The original design was created by developers with no input from users or a UX designer. Creating an environment of constant collaboration between product development and users was key during the design process. We were able to pinpoint a number of pain points in the current design, and was able to eventually create an efficient, methodological, design.

Designing within limits of a front-end framework

One of the challenges we faced was the limitations that using ReactJS brought forth. During the design implementation and developer handoff, we were presented with a number of roadblocks that we were able to work around after spending time problem solving. For example, the framework for the tables presented issues with sizing limitations and loading the results inside the table the way that we wanted. Eventually, we were able to find solutions to customize the code and make the design come to life.