Salesforce Integration 

RelPro intro

Overview

RelPro needed a feature that lets users update a lead or a contact in Salesforce by merging with RelPro data and updating into a single cohesive record.  RelPro originally enabled users to update their Salesforce data without deduping, a process to ensure similar records are not duplicates. If RelPro found a profile with the same name, users either updated the profile or created a new one. Therefore, users couldn't sort out multiple profiles with similar names, and Salesforce ended up having duplicates with inconsistent data. The new feature informed users if the individual or company profile page they are viewing already exists as a lead or contact in Salesforce, while displaying potential matches, letting users select the profile they want, thus keeping the CRM clean of duplicates. 

My role: Competitive analysis, user research, synthesis, wireframing, prototyping and strategy

Timeline: 3 weeks

Tools: Adobe XD and Axure

Overview

RelPro needed a feature that lets users update a lead or a contact in Salesforce by merging with RelPro data and updating into a single cohesive record.  RelPro originally enabled users to update their Salesforce data without a deduping process. RelPro found a profile with the same name and users either updated the profile or created a new one. Therefore, users couldn't sort out multiple profiles with similar names, and Salesforce ended up having duplicates with inconsistent data. The new feature informed users if the individual or company profile page they are viewing already exists as a lead or contact in Salesforce, while displaying potential matches, letting users to select the profile they want, thus keeping the CRM clean of duplicates. 

My role: Competitive analysis, user research, synthesis, wireframing, prototying and strategy

Timeline: 3 weeks

Tools: Adobe XD and Axure

Process

The Salesforce project was broken down to two parts: a deduping process for a company and a deduping process for a individual. I tackled the main deduping process for a company then expanded to individuals while refining design details, so that both processes can have consistent navigation and UIs. 

The Process

The Salesforce project were broken down to two parts; a deduping process for a company and a deduping process for an individual. I tackled main deduping process for a company and expanded to individuals while refining design details, so that both process can have consistent navigation and UIs.

Salesforce Integration image 1

Project Goal 

RelPro originally had a feature that helps users to overwrite Salesforce data with RelPro data. However, users who consistently search for leads and prospects easily created duplicates in Salesforce, and the original feature didn't let users review their data in Salesforce and choose the right data to overwrite. The key to the new feature was helping users to see Salesforce data and make quick decisions on what to update. 

 

The Project Goal

RelPro originally had a feature that helps users to overwrite Salesforce data with RelPro data. However, users who consistently search for leads and prospects easily create duplicates in Salesforce and the original feature didn't let users to review there data in Salesforce and choose the right data to overwrite. The key to the new feature was helping users to see what's sitting in their Salesforce and make a quick decisions on what to update. 

user flow@2x-100

Ideation

When the deduping process begins, there are a few possible scenarios:

  1. The profile a user finds in RelPro doesn't exist in Salesforce
  2. The profile was matched before and needs to be updated and
  3. There are multiple profiles in Salesforce and the user needs to decide which profile needs to be matched.

I mapped out the possible scenarios and sketched out ideas for displaying the matching status and guiding users to a new matching process.

Ideation

When the deduping process begins, there are a couple of scenarios: the profile a user finds in RelPro doesn't exist in the Saleforce, the profile was matched before and needs to be updated and there are multiple profiles in the Salesforce that the user needs to decide which profile needs to be matched.  I mapped out the possible scenarios and sketched out ideas for displaying the matching status and guiding users to a new matching process.  

Sketches

Incorporating Business Requirements

The original matching process had filtering options as below. During my initial design process, I was advised to follow the existing drop downs and the labeling methodology. Also, I was asked to display RelPro's data next to the Salesforce data in order to emphasize the richness of RelPro's data.  

Incorporating Business Requirements

The original matching process had filtering options as below. During my initial design process, I was advised to follow the existing drop downs and the labeling methodology. Also, I was asked to display RelPro's data next to the Salesforce data in order to emphasize the richness of RelPro's data. 

Incorporating feedback@2x-100

Initial Designs

I focused on making the process simpler and more digestible for users. I created simple modal screens to show if the profile was previously matched or not. For presenting duplicates, I created a full screen to show a list of possible matches. For the matching process, I created a table to show status, Salesforce data and RelPro data with the filtering options requested by stakeholders. 

Initial Designs

I focused on making the process simpler and more digestible for users. I created simple modal screens to show if the profile was previously matched or or not. For presenting duplicates, I created a full screen to show a list of possible matches. For the matching process, I created a table to show status, Salesforce data and RelPro data with the filtering options requested by stakeholders. 

Matching Status

Matching Process

Matching Process

Test with Users

I reached out to three users with the help of the customer success team and asked for feedback on the matching screens. I found that users hardly used the drop down and they were confused by the existing labels. I needed to remove some UI elements in the matching screen. 

Test with Users

I reached out three users with the help of our customer success team and asked for feedback on the matching screens. I found that users hardly used the drop down and they were confused by the existing labels. I needed to remove some UI elements in the matching screen. 

drop down for deduping process

Iterations

I went through multiple iterations and the main change was displaying the matching status in a drawer intead of a modal screen. I needed to provide the same experience for every matching status and created a drawer to display different amounts of information without changing the layout. 

Iterations

I went through multiple interations and the main change was displaying the matching status in a drawer intead of a modal screen. I needed to provide the same experience for every matching status and created a drawer to display different amount of information without changing the layout. 

Iteration for status

For the review process, I removed all the filtering options that confused users. I looked through all the data that can be transferrable from RelPro to Salesforce and found that the data was not long enough to require filtering options. I created a simple table in a modal screen.

For the review proceses, I removed all the filtering options that confused users. I looked through all the data that can be transferrable from RelPro to Salesforce and found that the data was not long enough to require filtering options. I created a simple table in a modal screen.

Iteration for matching

Where should RelPro's data be displayed? 

Where should RelPro's data be displayed? 

Next Iteration for Matching Process-final

We went through a lot of discussion on the placement of RelPro data and the option for users to personalize data after overwriting. I gathered all the feedback from the customer successs team and stakeholders and modified the screen:

1) We placed the RelPro data on the left since users need to review RelPro data first before making a decision on whether they would update or not.

2) We let users modify the data once they push RelPro data to Saleforce, so that they can fill the unavailable data or keep their own terminology. 

We went through a lot of discussion on the placement of RelPro data and the option for users to personalize data after overwriting. I gathered all the feedback from Customer Successs Team and stakeholders and modified the screen:

1) We placed the RelPro data on the left since users need to review RelPro data first before making a decision on whether they would update or not.

2) We let users modify the data once they push RelPro data to Saleforce, so that they can fill the unavailable data or keep their own terminology. 

Design Details

Once the overall design and navigation for the deduping process for companies were finalized, I expanded to the deduping process for individuals and refined design details. In order to decide how to highlight different data from two sources, I asked five users to walk through a short prototype to figure out which option was more intutitive for them to understand the differences. Unlike what I expected, users easily understood two sources have different data with a simple color highlight without any labeling. 

Design Details

Once the overall design and navigation for the deduping process for companies were finalized, I expanded to the deduping process for individuals and refined design details. In order to decide how to highlight different data from two sources, I ask five users to walk through a short prototype to figure out which option was more intutitive for them to understand the difference. Unlike what I expected, users easily understood two sources have different data with a simple color highlight without any labeling. 

Test Screen 3- Option D Copy

Finalize and Deliver

After deciding all the design details,  I organized all the screens by scenario and added annotations. The deliverables were created in Google Slides, so that developers can leave comments and update the changes real-time. 

https://files.acrobat.com/a/preview/4ce043cf-2bc9-42f2-837a-fa0a36f39caa

Finalize and Deliver

After deciding all the design details,  I organized all the screens by scenario and added annotations. The deliverables were created in Google Slides, so that developers can leave comments and update the changes real-time. 

https://files.acrobat.com/a/preview/4ce043cf-2bc9-42f2-837a-fa0a36f39caa

Task Flow (Individual Profile)

Task Flow

Flow Chart

Annotations (Individual Profile)

Annotations

Final Screens (Individual Profile)

deduping-revised

Reflection

Organize, organize

This project was one of the first projects that required a lot of design debates and development efforts. There were a lot of changes and requests while working on the design, and it was challenging to keep track of the process. I learned that it is essential to be organized by documenting every discussion, label folders properly and make sure everyone is on the same page.

Dig hard

In the start-up world, things move very fast and a lot of business requirements are not officially defined and documented. Therefore, it is very important to gather business requirements and stakeholders' preferences as much as possible in advance, so that your designs don't get shifted after spending a significant time for designing and focusing on users' feedback. Designers always need to keep the balance between user goals and business goals. 

Customer success team is your best friend

For a B2B company, all the interaction with users are professionally managed by a customer success team. They understand every detail of each contract, how each user uses the product and what goals and frustrations they have. Even though designers do not have many opportunities to meet users directly and conduct a full user testing for every iteration, the customer success team can provide valuable feedback through their experience and find you perfect candidates for user testing. Designers need to be flexible in gathering information and keep a great relationship with the customer success team. 


Reflection

Organize, organize

This project was one of the first projects that required a lot of design debates and development efforts. There were a lot of changes and requests while working on design and it was challenging to keep track of the process. I learned that it is essential to be organized by documenting every discussion, label folders properly and make sure everyone is on the same page.

Dig hard

In the start-up world, things move very fast and a lot of business requirements are not officially defined and documented. Therfore, it is very important to gather business requirements and stakeholders' preferences as much as possible in advance, so that your designs don't get shifted after spending a significant time for designing and focusing on users' feedback. Designers always need to keep the balance between user goals and business goals. 

Customer Sucess Team is your best friend

For a B2B company, all the interaction with users are professionally managed by a customer sucess team. They understand every detail of each contract, how each user uses the product and what goals and frustrations they have. Even though designers do not have many opportinities to meet users directly and conduct a full user testing for every iteration, the customer sucess team can provide valuable feedback through their experience and find you perfect candidates for user testing. Designers need to be flexible in gathering information and keep the best relationship with the customer sucess team. 


I’m a lifelong learner who always tries to be a better designer than yesterday. If you need a collaborator on your project or just want to discuss UX/UI with me, feel free to contact me. 

I’m a lifelong learner who always tries to be a better designer than yesterday. If you need a collaborator on your project or just want to discuss UX/UI with me, feel free to contact me. 

email icon 60 x 60
linkedin icon white 60×60