editcompanymockip.png

Passport Company Edit

 

 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

3 weeks

outline_create_black_48dp.png

Tools

Sketch, Invision, JIRA, Abstract


Overview

The Operations department wants to redesign a page within the company database portal that allows the user to access and modify company data information.

Business Goals

The Challenge

The company edit page should allow a faster, easier process that will increase productivity.

Redesign the Company Edit Page for Passport and merge the functionality of the Company Batch Edit Queue page. The Company Batch Edit Queue page allows the user to review potential "matching companies” and classify the items as an alternate, child, or parent company. We also need to add a new functionality of creating a new company.

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 high-fidelity wireframes.

  • Interaction design.

  • Perform a heuristic evolution of the existing page.

  • Conduct user interviews and user testing.


Research

Heuristic Evaluation

The Company Edit page and Company Batch Queue page are two separate pages.

passportorignial.png

Company Edit Page

The page is organized inefficiently, having to click each header to edit that option. There are no visual cues to tell the user that the header should be selected.

Artboard Copy.png

Company Batch Queue

Lacking ability to recategorize items quickly.

User Insights

User Interviews + Usability Testing

The product owners wanted to be able to use this page to both search and edit an existing company, and create a new company. In order to create an organized interface, I had to research what information users collect in order to create a new company, and what data points are grouped together in their research process.


Ideation

Design Principles

Visual Hierarchy

This page combines 3 different main functionalities that must be clear and distinct. The user should be able to see that you can search for a company to edit, fill out a series of blank options in order to create a new company, and edit the company names. The interface had to be organized so that users could differentiate their tasks.

Simplifying Choices

We want to reduce the functionality of having to select each option in order to edit it.

Concept Development & Wireframing

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.

Company Batch Queue

Screen Shot 2019-05-28 at 4.43.47 PM.png

Company Batch Queue Edit Concepts

Artboard2.png

Company Edit Page

wer.png

I simplified options by grouping the options into three different categories - Basic Information, Contact Information, and Business Information.

search option.png

User Testing

A/B Testing

Company Search Concepts

After user testing, we modified the option tabs so that all the information used to create a new company was in the first tab. Then, several concepts were developed regarding the search option, in order to decide which allows a quicker understanding of both options of creating a new company and also being able to search for and edit an existing company.

searchA.png

Concept A

Clear directions of what functionality is available on this page.

searchB.png

Concept B

Changing the search button to “Search Companies,” to clarify what the search functionality is used for.

searchC.png

Concept C

Headlining the search box and signaling that the company information will load in the box below it.

Company Batch Queue Modal

conceptA.png

Concept A

The user will be able to edit one category at a time: other, child, and parent.

conceptB.png

Concept B

The user will be able to edit items into any of the 3 categories, or replace the master company.


The Final Product

A clean and simple interface that integrates multiple functionalities.

basicInformation.png

Company Search/Edit Page

In this screen you can edit the page, and also easily navigate back to the page to create a new company. The user can also navigate to the company batch queue modal via the company names button.

company names.png

Company Batch Queue Modal

In the modal, the user is able to recategorize the matching company items by selecting and moving them to the new category that it belongs.


Results & Key Takeaways

Business Values vs. Implementation Complexity

One of the challenges of this project was the functionality of recategorizing items. The product owner wanted to be able to select multiple items and then “drag and drop” them into a new section. However, there was pushback from development due to the complexity and amount of time it would take to implement this new functionality that is not found in any of the other pages in the software. In the end, we came to the conclusion that the value of the “drag and drop” does not equate to the amount of time and work it would take to implement such a feature, and we would instead use alternate functionality to move items from one box to another.