In the beginning of 2020, the Product team has decided to adopt a self-serve model that relies on the product itself as the primary driver of company growth. Self-serve means the entire customer journey can happen without any human support. New customers can sign-up and easily figure out how to use Saleswhale software on their own. If executed right, this strategy can help us to decrease time-to-value for the customers, increase customer satisfaction and expansion.

While all of us were excited with this new strategy, we can't simply turn Saleswhale into a self-serve ready software within a short period of time. Hence, we have to split the large project into a series of smaller features, so that the team can develop and deliver them one-by-one. This project, Salesforce Integration Setup, was part of the self-serve roadmap.

From our Ideal Customer Profile (ICP), one of the key decisions in buying a software is the ability to integrate it with their existing CRM platforms. In our case, it is Salesforce. SFDC is their main source of truth for their data, as simple as that.

Hence, to be able to attract more new customers to use Saleswhale products. We need to be able to allow Saleswhale to fit into their existing tech ecosystems.

This Integration feature is mainly designed for Saleswhale customers who are relying on Salesforce for their customer management. Their typical responsibilities are launching online campaigns, measuring and creating post-launch reports. For this case study, we will simply call them Marketing Managers.

Here at Saleswhale, we have adopted our own version of remote Design Sprint, a 2-day workshop which turns winning ideas into prototypes.

Without going into too much detail, I will only share some important output from the design sprints. The team has managed to identify the core user flow and also main user stories for this project.

Snippets shown below are the User Test Flow and the Storyboard steps. They served as important guides for me to craft the detailed design screens.

We visualised the new Integration page where Marketing Managers can connect their Integrations, and also configure the settings on the same page. To do that, we make sure the body copy are clearly explained and jargon free, so that they won't get confused while going through the process.

In short, the new designs give the user everything they need in one place. If they need to change something, they can simply click one of the tabs and update it on the spot.

We want the customers to focus on completing each tasks without being overwhelmed with unrelated information.

To achieve that goal, we've decided to apply the Accordion UI pattern for the new designs. One of the main advantages of accordions is that they allow customers to get the high level view before focusing on the details.

The animated gif image below is our legacy design for setting up Salesforce Integration. As you can see, users have to navigate from one page to another to complete the process.

The first step to setup Salesforce (SFDC) Integration with Saleswhale is to add Saleswhale Package to their SFDC.

Before this, our Customer Success managers have to guide our customers add this package through video calls. We want to remove this hand-holding step completely from this design. However, as expected, we faced a few challenges.

Without going into the technical constraint details, Saleswhale cannot give immediate statuses update after adding the package. Ideally, we want the customers to see, "Package successfully added!' message immediately.

Due to the underlying technical complexity, we are unable to deliver such experience, at least for this version. Apart from that, customers also need to navigate away from Saleswhale to add the package in Salesforce sites.

After done adding, they have to manually navigate back to the Saleswhale site to continue the rest of the steps. We cannot do an auto-direct page and detect if the package has been added.

We want to leverage this new setup experience for other similar integration apps. This is because our customers also use other platforms/services to manage their campaigns and leads activity. And with these new designs patterns in place, it will be less work for the team!