Contents
Newsletter robot
Enjoying the read?

Don't miss our next article

You will probably know that feeling of despair you sometimes get from your workplace apps. It's as if they were designed to actually make your life harder. 🤨😩

Oftentimes your only hope for help is posting on a community forum, or maybe being friends with Bill Gates. 😉

Even applications that have a pleasant and modern UI can grind the gears of their power users. It's just hard to make a UI that has an easy learning curve, but is also packaged in such a way that a power user reaches everything in under two clicks.

Our problem explained

At our own company we were starting to get annoyed with our CRM. We use Hubspot, a perfectly serviceable app that we have lots of good things to say about.

However the way we use Hubspot, the workflow for qualifying our daily new Sales leads is a little tedious. We start with the above list of new contacts that need to be qualified.

Unfortunately it's not enough to just look at the people in the grid to filter them, so we need to open each contact one at a time and look at their full record.

Each record takes a few seconds to navigate to and back from

As you can in the video above, loading a contact's record takes around 6-10s. Multiply this by the number of records we get every day, and you quickly spend a half hour every morning waiting for screens to render.

Once on the record's page you see why we need to do it this way.

We collect some (de-personalized) usage metrics for how each contact uses our software. This is called PQL, and we use this qualify the lead and send targeted communications.

I hope I'm not boring you, but the process is that – in order to make our decision – we need to scan all the sections and the timeline in the middle (shown in green).

In the best case, when all goes well and the contact is very interested, we have to make a total of four clicks (shown in yellow) to qualify the contact and return to the main list and look at the next contact.

Suffice it to say that we weren't quite happy with this setup. Earlier I said, that your only hope for help is to post to a community forum. But actually, that isn't your only option.

How we solved it

Like almost every SaaS app, Hubspot offers an API. This allows you to read out and write back into your Hubspot data in a way that's secure, fast and standardized across the industry.

This allowed us to create an Adaptive Card that condenses all the things we wanted to see into one view. The end product is a scrollable list that shows you an Adaptive Card for each contact in Hubspot.

We have implemented a tab into the Card; it starts with the timeline of activities but you can switch to the contact details for further inspection.

There is even a row of in-line actions along the bottom that let you either update the status of the contact, delete them or send them an email.

All of this was pretty easy to put together in just 3 steps:

Step 1: Add Hubspot

We started by adding the correct Connector from the App Directory.

You can see from the listing that this Connector comes with a few default Cards, which is a great start. But for our purposes we wanted to make a completely custom Card, which we do with an Adaptive Card.

Step 2: Make your own Adaptive Card

You can create new Adaptive Cards from the Cards menu.

Once in the Card Designer, before you do anything else, you just want to click on Pick a Connector and select that Hubspot Connector we made in step 1.

Just select the correct endpoint/service from the Connector and then, once you close the modal, you will see actual Hubspot data in the Sample Data Editor section of the Card Designer.

We have a whole guide on how to use the Adaptive Card designer, but basically you just create your layout by dragging elements in from the left and then use data binding to insert the live data into the layout.

If you want to copy our tabbed Card layout, you can just copy-and-paste the below code block and insert it into the Card Payload Editor section of the Card Designer.

{
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "ColumnSet",
"spacing": "Medium",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "${thumbnail}",
"$when": "${length(thumbnail)>0}",
"width": "40px",
"spacing": "None",
"horizontalAlignment": "Center",
"style": "Person"
}
]
},
{
"type": "Column",
"$when": "${length(thumbnail)>0}",
"width": "stretch",
"height": "stretch",
"horizontalAlignment": "Center",
"spacing": "Small",
"items": [
{
"type": "FactSet",
"facts": [
{
"title": "${title}",
"value": "**${description}**"
}
],
"$when": "${if(title, true, false)}"
},
{
"type": "FactSet",
"facts": [
{
"title": "${email}",
"value": "**${description}**"
}
],
"$when": "${if(title, false, true)}"
},
{
"type": "TextBlock",
"text": "${requested}",
"wrap": true,
"fontType": "Default",
"size": "Large",
"spacing": "Small"
},
{
"type": "FactSet",
"facts": [
{
"title": "Created ${ago}",
"value": "Current status: ${lead_status}"
}
],
"spacing": "Small"
}
]
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": "${link}",
"id": "open-contact-${id}"
}
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "180px",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "180px",
"id": "cmdTab1",
"items": [
{
"type": "TextBlock",
"text": "Activities",
"weight": "Bolder",
"size": "Medium",
"horizontalAlignment": "Center"
}
],
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cmdTab1",
"cmdTab1Selected",
"cmdTab2",
"cmdTab2Selected",
"tab1",
"tab2"
]
},
"isVisible": false,
"separator": true,
"minHeight": "25px",
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "180px",
"minHeight": "25px",
"items": [
{
"type": "TextBlock",
"text": "Activities",
"color": "Accent",
"id": "cmdTab1Selected",
"size": "Medium",
"weight": "Bolder",
"horizontalAlignment": "Center"
}
],
"verticalContentAlignment": "Center",
"selectAction": {
"type": "Action.ToggleVisibility"
}
}
],
"spacing": "Medium"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "180px",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "180px",
"minHeight": "25px",
"items": [
{
"type": "TextBlock",
"text": "Details",
"size": "Medium",
"weight": "Bolder",
"horizontalAlignment": "Center"
}
],
"id": "cmdTab2",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"cmdTab1",
"cmdTab1Selected",
"cmdTab2",
"cmdTab2Selected",
"tab1",
"tab2"
]
},
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "180px",
"minHeight": "25px",
"items": [
{
"type": "TextBlock",
"text": "Details",
"color": "Accent",
"size": "Medium",
"weight": "Bolder",
"horizontalAlignment": "Center"
}
],
"id": "cmdTab2Selected",
"isVisible": false,
"horizontalAlignment": "Center",
"verticalContentAlignment": "Center",
"selectAction": {
"type": "Action.ToggleVisibility"
}
}
],
"spacing": "Medium"
}
],
"verticalContentAlignment": "Center",
"height": "stretch"
}
]
}
],
"spacing": "Medium",
"verticalContentAlignment": "Center",
"horizontalAlignment": "Center"
},
{
"type": "Container",
"id": "tab1",
"spacing": "Medium",
"items": [
{
"type": "TextBlock",
"text": "🔌 ${active_integrations} active integrations",
"wrap": true,
"size": "Large",
"$when": "${active_integrations != ''}"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "50px",
"items": [
{
"type": "TextBlock",
"text": "Time",
"wrap": true,
"horizontalAlignment": "Right",
"weight": "Bolder",
"isSubtle": true
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "49px",
"backgroundImage": {
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAIAAAC0rgCNAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAEElEQVQYV2NoaGigHW5oAADAuiQBWxz13QAAAABJRU5ErkJggg==",
"fillMode": "RepeatVertically",
"horizontalAlignment": "Center",
"verticalAlignment": "Center"
},
"items": [
{
"type": "Image",
"url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4xNkRpr/UAAAAbUExURf///4CAgICAgICAgICAgICAgICAgICAgICAgK5UnXcAAAAIdFJOUwBMVIePw/f799S5VQAAAD9JREFUGNNjYKAtYAxLFYBzLDo6muESHUAAk2IFcQKgHDYQJwHKYQdxCrApYwJxFGDGeXR0tMDtYQovVaCxvwAJCxPcs9XnIAAAAABJRU5ErkJggg==",
"width": "35px",
"spacing": "None"
}
],
"spacing": "None",
"bleed": true
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Activity",
"wrap": true,
"weight": "Bolder",
"isSubtle": true
}
],
"verticalContentAlignment": "Center"
}
]
}
],
"minHeight": "150px"
},
{
"type": "Container",
"id": "tab2",
"isVisible": false,
"spacing": "Medium",
"items": [
{
"type": "TextBlock",
"text": "📇 Contact details",
"wrap": true,
"weight": "Bolder"
},
{
"type": "FactSet",
"facts": [
{
"title": "Email",
"value": "${$root.email}"
}
]
},
{
"type": "TextBlock",
"text": "🌎 Origin",
"wrap": true,
"weight": "Bolder"
},
{
"type": "FactSet",
"facts": [
{
"title": "${source_label}",
"value": "${source}"
},
{
"title": "${ip_country_label}",
"value": "${ip_country}"
},
{
"title": "${first_page_seen_label}",
"value": "${first_page_seen}"
}
]
}
],
"minHeight": "150px"
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ToggleVisibility",
"title": "Update status",
"targetElements": [
"lead-update-status-${id}"
]
},
{
"type": "Action.Submit",
"title": "Delete",
"id": "delete"
},
{
"type": "Action.OpenUrl",
"title": "Message",
"url": "${link}/?interaction=email"
}
]
},
{
"type": "Container",
"isVisible": false,
"id": "lead-update-status-${id}",
"style": "emphasis",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "New",
"value": "New"
},
{
"title": "Contacted",
"value": "Contacted"
},
{
"title": "Interested",
"value": "Interested"
},
{
"title": "Under Review",
"value": "Under Review"
},
{
"title": "Demo",
"value": "Demo"
},
{
"title": "Convert",
"value": "Convert"
},
{
"title": "Unqualified",
"value": "Unqualified"
}
],
"placeholder": "Update Lead status to",
"id": "status"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"spacing": "Small",
"actions": [
{
"type": "Action.Submit",
"title": "Update",
"id": "update"
}
]
}
]
}
]
}
],
"bleed": true
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}

Step 3: Use it

Once that is done you can just open the Assistant and the Card will be on your Board. Alternatively you could teach the Card some Utterances in the Designer first.

Utterances are like a catalog of ways the users could ask for this Card with natural language. If you train it just a few different variants, like What are my sales leads? or Show me my Hubspot contacts, then you could ask your chatbot for the Card.

The chatbot is available for many different applications, e.g. MS Teams or your Intranet.

The same Card can be used in MS Teams (enable here)

Bottomline

Even though the use case for this is, of course, very specific to our organization it shows you all of the strengths that making your own chatbot offers. It's a simple way to connect various applications to a common interface, and due to Adaptive Cards allows you to customize interactions and layouts completely to suit the use case at hand.

The number of clicks we talked about in the beginning (to open individual contacts' records, as well as within the contacts page to qualify them) has been dramatically reduced. The number of tabs or page refreshes necessary to work through contacts has gone from several dozens down to zero.

All-in-all, even though it may not be a perfect solution, it was a great improvement for our team and took us all of an afternoon to create, which is more than made up for through the time savings in the future.

~

I hope this guide showed you how easily you can improve the user flow for your applications and make your power users more productive and efficient. Is there a use case you would like to simplify? What challenges do you face that an Assistant could help your users master? Let me know in the comments below.

Author portrait

Article by Henry Amm

I’m the Senior Director for the Digital Assistant Platform. Prevously gained 6 years of experience as an Intranet consultant. Fluent in German.

Make your Assistant Build your free AI-powered Digital Workplace platform in minutes, with our free forever plan. Digital Assistant logo Yes please
Author portrait

Article by: Henry Amm

I’m the Senior Director for the Digital Assistant Platform. Prevously gained 6 years of experience as an Intranet consultant. Fluent in German.

Join the discussion

Avatar placeholder
This field is required.
This field is required.
This field is required.

0 responses

Be the first to leave a comment!