Tools for brands to localise their customer support
I designed the tools that enable brands to provide customer support to their users in their language.
Helpshift . 2018-19
Tools for brands to localise their customer support
I designed the tools that enable brands to provide customer support to their users in their language.
Helpshift . 2018-19
Tools for brands to localise their customer support
I designed the tools that enable brands to provide customer support to their users in their language.
Helpshift . 2018-19
The Problem
* Helpshift's customer brands have users from all over the world but they could create automated content in only one language (mostly English). * With the launch of Custom Bots, the number of automated messages sent to the users increased drastically. To be able to talk to their users in multiple languages, brands were creating multiple bots that did exactly the same thing, just in different languages. * The number of distinct bots that brands were creating multiplied with the number of languages they supported. This made management of bots a nightmare. If the brand made changes to a bot, they would have to do it for all the supported languages.
* Helpshift's customer brands have users from all over the world but they could create automated content in only one language (mostly English). * With the launch of Custom Bots, the number of automated messages sent to the users increased drastically. To be able to talk to their users in multiple languages, brands were creating multiple bots that did exactly the same thing, just in different languages. * The number of distinct bots that brands were creating multiplied with the number of languages they supported. This made management of bots a nightmare. If the brand made changes to a bot, they would have to do it for all the supported languages.
* Helpshift's customer brands have users from all over the world but they could create automated content in only one language (mostly English). * With the launch of Custom Bots, the number of automated messages sent to the users increased drastically. To be able to talk to their users in multiple languages, brands were creating multiple bots that did exactly the same thing, just in different languages. * The number of distinct bots that brands were creating multiplied with the number of languages they supported. This made management of bots a nightmare. If the brand made changes to a bot, they would have to do it for all the supported languages.
It was a no-brainer that we had to solve this localisation puzzle if we were going to enable brands to scale their support operations worldwide and if we were going to increase our Custom Bots adoption.
It was a no-brainer that we had to solve this localisation puzzle if we were going to enable brands to scale their support operations worldwide and if we were going to increase our Custom Bots adoption.
It was a no-brainer that we had to solve this localisation puzzle if we were going to enable brands to scale their support operations worldwide and if we were going to increase our Custom Bots adoption.
My Role
Lead designer through end to end process: discovery, user research, requirements, design, testing, support through launch. I partnered with a product manager and a team of 5 engineers to deliver on this project.
Lead designer through end to end process: discovery, user research, requirements, design, testing, support through launch. I partnered with a product manager and a team of 5 engineers to deliver on this project.
Lead designer through end to end process: discovery, user research, requirements, design, testing, support through launch. I partnered with a product manager and a team of 5 engineers to deliver on this project.
The UI styleguide for the Helpshift dashboard was already set up by our Design Team Lead, Bhargava. More than an exercise in visual design, this was a system and interaction design challenge for me.
The UI styleguide for the Helpshift dashboard was already set up by our Design Team Lead, Bhargava. More than an exercise in visual design, this was a system and interaction design challenge for me.
The UI styleguide for the Helpshift dashboard was already set up by our Design Team Lead, Bhargava. More than an exercise in visual design, this was a system and interaction design challenge for me.
Defining Success
* If we did it right, brands would be able to have end-to-end conversations with their users in any supported language.
* If we did it right, brands would be able to have end-to-end conversations with their users in any supported language.
* If we did it right, brands would be able to have end-to-end conversations with their users in any supported language.
* A single bot would be able to converse with users in any supported language. As a result, the number of copies of these bots in multiple languages would reduce drastically and it would be much easier for brands to manage and make changes to these bots.
* A single bot would be able to converse with users in any supported language. As a result, the number of copies of these bots in multiple languages would reduce drastically and it would be much easier for brands to manage and make changes to these bots.
* A single bot would be able to converse with users in any supported language. As a result, the number of copies of these bots in multiple languages would reduce drastically and it would be much easier for brands to manage and make changes to these bots.
There are two parts to the localisation puzzle
1. Enabling brands to create content in multiple languages from a single entity, like a bot.
1. Enabling brands to create content in multiple languages from a single entity, like a bot.
1. Enabling brands to create content in multiple languages from a single entity, like a bot.
2. Mapping the correct translation to the language that the user is talking in.
2. Mapping the correct translation to the language that the user is talking in.
2. Mapping the correct translation to the language that the user is talking in.
Text Templates
To enable brands to create content in multiple languages, we designed Text Templates. A Text Template is essentially a bundle of translations of a text, tied together with a unique ID. Every Text Template has a default (or source) language.
To enable brands to create content in multiple languages, we designed Text Templates. A Text Template is essentially a bundle of translations of a text, tied together with a unique ID. Every Text Template has a default (or source) language.
To enable brands to create content in multiple languages, we designed Text Templates. A Text Template is essentially a bundle of translations of a text, tied together with a unique ID. Every Text Template has a default (or source) language.
Using
Text Templates
Text Templates are consumed by input fields where Support Admins create automated content for their users. One example of this type of fields is the pre-defined Greeting Message that a user sees when they initiate a conversation with the brand.
Text Templates are consumed by input fields where Support Admins create automated content for their users. One example of this type of fields is the pre-defined Greeting Message that a user sees when they initiate a conversation with the brand.
Text Templates are consumed by input fields where Support Admins create automated content for their users. One example of this type of fields is the pre-defined Greeting Message that a user sees when they initiate a conversation with the brand.
A "translation" icon near the right edge of any such field indicates that you can insert a text template there. The Admin always has a choice to write plain text in the field. Just because we were introducing a new capability, we did not want to affect how brands that wanted to provide support in just one language, were using the system.
A "translation" icon near the right edge of any such field indicates that you can insert a text template there. The Admin always has a choice to write plain text in the field. Just because we were introducing a new capability, we did not want to affect how brands that wanted to provide support in just one language, were using the system.
A "translation" icon near the right edge of any such field indicates that you can insert a text template there. The Admin always has a choice to write plain text in the field. Just because we were introducing a new capability, we did not want to affect how brands that wanted to provide support in just one language, were using the system.
Discovery
We had to make it really easy for the Admin to find the right Text Template and insert it in the the right field. We designed a Text Template Widget that lets Admin search Text Templates and preview all the translations of the content before they insert it in the field.
We had to make it really easy for the Admin to find the right Text Template and insert it in the the right field. We designed a Text Template Widget that lets Admin search Text Templates and preview all the translations of the content before they insert it in the field.
We had to make it really easy for the Admin to find the right Text Template and insert it in the the right field. We designed a Text Template Widget that lets Admin search Text Templates and preview all the translations of the content before they insert it in the field.
Previewing Content before inserting a Text Template
To make sure that they're inserting the right Text Template, Admin can preview the source content and all the translations. The preview pane shows the number of translations in the Text Template and a way for them to switch languages to view content in any supported language. A Text Template can be inserted into a field by just clicking it's title.
To make sure that they're inserting the right Text Template, Admin can preview the source content and all the translations. The preview pane shows the number of translations in the Text Template and a way for them to switch languages to view content in any supported language. A Text Template can be inserted into a field by just clicking it's title.
To make sure that they're inserting the right Text Template, Admin can preview the source content and all the translations. The preview pane shows the number of translations in the Text Template and a way for them to switch languages to view content in any supported language. A Text Template can be inserted into a field by just clicking it's title.
Once a Text Template is inserted...
In case the Admin want to change the content of the inserted Text Template, they can click the edit button on the preview pane. It opens up the Text Template in a new tab where they can edit the content.
In case the Admin want to change the content of the inserted Text Template, they can click the edit button on the preview pane. It opens up the Text Template in a new tab where they can edit the content.
In case the Admin want to change the content of the inserted Text Template, they can click the edit button on the preview pane. It opens up the Text Template in a new tab where they can edit the content.
The content of the inserted Text Template can still be viewed by hovering over the Text Template Token. The reason for designing this capability was to draw a parallel between entering plain text into a field and inserting a Text Template. When a plain text is input into a field, you can see the exact content that field holds. We had to provide the same capability with Text Templates, in all languages.
The content of the inserted Text Template can still be viewed by hovering over the Text Template Token. The reason for designing this capability was to draw a parallel between entering plain text into a field and inserting a Text Template. When a plain text is input into a field, you can see the exact content that field holds. We had to provide the same capability with Text Templates, in all languages.
The content of the inserted Text Template can still be viewed by hovering over the Text Template Token. The reason for designing this capability was to draw a parallel between entering plain text into a field and inserting a Text Template. When a plain text is input into a field, you can see the exact content that field holds. We had to provide the same capability with Text Templates, in all languages.
Editing Text Templates
In case the Admin want to change the content of the inserted Text Template, they can click the edit button on the preview pane. It opens up the Text Template in a new tab where they can edit the content.
In case the Admin want to change the content of the inserted Text Template, they can click the edit button on the preview pane. It opens up the Text Template in a new tab where they can edit the content.
In case the Admin want to change the content of the inserted Text Template, they can click the edit button on the preview pane. It opens up the Text Template in a new tab where they can edit the content.
Detecting User's Language
Our AI team designed a mechanism to detect the language the user is conversing in, based on their first message. We could have just fallen back to device or browser language but detected language is more accurate. It also gave us way to localise email conversations. Since there is no device or browser language available in case of email, detected language becomes the only way to localise the email conversations.
Our AI team designed a mechanism to detect the language the user is conversing in, based on their first message. We could have just fallen back to device or browser language but detected language is more accurate. It also gave us way to localise email conversations. Since there is no device or browser language available in case of email, detected language becomes the only way to localise the email conversations.
Our AI team designed a mechanism to detect the language the user is conversing in, based on their first message. We could have just fallen back to device or browser language but detected language is more accurate. It also gave us way to localise email conversations. Since there is no device or browser language available in case of email, detected language becomes the only way to localise the email conversations.
The brands can choose to set the detected language as the language of the conversation and any content or messages are sent in the detected language.
The brands can choose to set the detected language as the language of the conversation and any content or messages are sent in the detected language.
The brands can choose to set the detected language as the language of the conversation and any content or messages are sent in the detected language.
Localisation of the Support Experience
The Helpshift support conversation is not a live-chat scenario. The user is rarely ever talking to a human on the other side.
The Helpshift support conversation is not a live-chat scenario. The user is rarely ever talking to a human on the other side.
The Helpshift support conversation is not a live-chat scenario. The user is rarely ever talking to a human on the other side.
Brands have automated major parts of their support conversation with Custom Bots and other pre-defined messages.
Brands have automated major parts of their support conversation with Custom Bots and other pre-defined messages.
Brands have automated major parts of their support conversation with Custom Bots and other pre-defined messages.
Since these messages come from different parts of the system and multiple Bots, we had to make sure that the conversation with the user happens in one language that the user is comfortable with.
Since these messages come from different parts of the system and multiple Bots, we had to make sure that the conversation with the user happens in one language that the user is comfortable with.
Since these messages come from different parts of the system and multiple Bots, we had to make sure that the conversation with the user happens in one language that the user is comfortable with.
Multi-lingual Custom Bots
Helpshift Custom Bots are a series of rule-based conversational steps. Support Admin define the bot messages and the reply options that their end users see and interact with.
Helpshift Custom Bots are a series of rule-based conversational steps. Support Admin define the bot messages and the reply options that their end users see and interact with.
Helpshift Custom Bots are a series of rule-based conversational steps. Support Admin define the bot messages and the reply options that their end users see and interact with.
To localise Custom Bots, we enabled Admin to insert Text Templates into bot messages, reply options and any other content that the end-users would see. Admin can also preview the entire conversation in multiple languages before they publish the bot. This made it possible for the same bot to converse with users in multiple languages.
To localise Custom Bots, we enabled Admin to insert Text Templates into bot messages, reply options and any other content that the end-users would see. Admin can also preview the entire conversation in multiple languages before they publish the bot. This made it possible for the same bot to converse with users in multiple languages.
To localise Custom Bots, we enabled Admin to insert Text Templates into bot messages, reply options and any other content that the end-users would see. Admin can also preview the entire conversation in multiple languages before they publish the bot. This made it possible for the same bot to converse with users in multiple languages.
The demo below illustrates how a Custom Bot step consumes Text Templates.
The demo below illustrates how a Custom Bot step consumes Text Templates.
The demo below illustrates how a Custom Bot step consumes Text Templates.
Since a Custom Bot can consist of many steps, we wanted to make it easy for Admin to track if they have inserted Text Templates in all the steps. To solve this, I designed a Translation indication system that tells the Admin the localisation status of a step and guides them how to completely localise it.
Since a Custom Bot can consist of many steps, we wanted to make it easy for Admin to track if they have inserted Text Templates in all the steps. To solve this, I designed a Translation indication system that tells the Admin the localisation status of a step and guides them how to completely localise it.
Since a Custom Bot can consist of many steps, we wanted to make it easy for Admin to track if they have inserted Text Templates in all the steps. To solve this, I designed a Translation indication system that tells the Admin the localisation status of a step and guides them how to completely localise it.
The Impact
* I designed a modular system for enabling localisation of the support experience that would play well with all the other entities in the system. * By making our Custom Bots multi-lingual, we were able to reduce the number of bots that our customers had to create by ~90%. * Text Templates is the way for brands to localise their support experience and has been readily adopted by our customers.
* I designed a modular system for enabling localisation of the support experience that would play well with all the other entities in the system. * By making our Custom Bots multi-lingual, we were able to reduce the number of bots that our customers had to create by ~90%. * Text Templates is the way for brands to localise their support experience and has been readily adopted by our customers.
* I designed a modular system for enabling localisation of the support experience that would play well with all the other entities in the system. * By making our Custom Bots multi-lingual, we were able to reduce the number of bots that our customers had to create by ~90%. * Text Templates is the way for brands to localise their support experience and has been readily adopted by our customers.
Let's build something together.
Let's build something together.
Let's build something
together.