top of page
Cover 2.png

Multilingual Module - Engagely.ai

Engagely offers a platform for businesses to create their own chatbots, voice bots, and social media bots. Initially, the default language for all content in the chatbot was English. However, as the chatbot was being used by many companies in Asia and accessed by people speaking various regional languages including Mandarin, Arabic, and almost all Indian languages, there was a need to develop a multilingual chatbot.

About

My role

Interaction Design
User Experience Design
Visual Design
Collaboration with engineers

Tools & Technologies

Adobe XD

Duration

1 month

Problem Area

How to ensure accurate translation of content for Engagely's chatbot across multiple languages and test the translations before deploying the chatbot to prevent errors and potential business losses.

Working Backwords

Who?

Primary User: Business botmakers
Secondary User: Business endusers

Why?

  • No way to see the content being translated by Google API.

  • Semantic gaps in the language used by end users

What?

Translated content before
deploying the chatbot

How?

  • Increase in multilingualengagement by the secondary end users

  • Positive feedback from the primary users about the ease of use

Solution

To address the challenges faced by using the Google Translate API for creating a multilingual chatbot, a solution was needed to enable bot makers to check and edit translations before deploying them on the chatbot. However, the large volume of content, including multimedia, made it impractical to show everything in a single page.

Small Talk 1.png

To overcome this challenge, I proposed breaking down the multilingual modules into parts based on how the portal was perceived by users and designed. For example, failure messages, forms and form elements, and user journeys were separated into different parts. The bot maker could then select the language in which they wanted to see the translations. The original English text would be shown on the left, and the translated content on the right. This allowed the user to edit the translated content as necessary. For multimedia content, a corresponding multimedia file in the regional language could be uploaded. This solution improved the testing process and minimized the risk of errors, ultimately leading to better chatbot performance and avoiding potential business losses.

Library_UploadImage 1.png

This was the initial solution for replacing multimedia files in regional language.

Usability Testing

Usability testing was done on the initial recruited and tested by me. The participants were the actual bot makers who were our business partners
No. of participants = 5

Evaluation of Usability Testing

After deploying the multilingual chatbot feature and conducting UX testing, it became clear that there was still a heavy burden on the user to search for content that they wanted to translate. This was especially problematic as new content was constantly being added and updated, leading to a need for frequent translation checks.

Small Talk Evaluation.png

To address this, I implemented a new feature that allowed users to only view recently added content. This significantly reduced the load on the user and allowed them to focus only on the most relevant content that needed to be translated. This helped to save a considerable amount of time and effort by avoiding the need to search through content that had already been translated. Ultimately, this solution improved the user experience and made the multilingual chatbot more efficient and user-friendly

Evaluation of Usability Testing

The attachment icon was not understood by users which was aimed to replace the content in English to the one in regional language. So, I changed this to make it more clear and made it a button which says Replace Media.

Library Evaluation.png

Redesigned Visuals

After conducting usability testing, I worked on redesigning the elements by using the user feedback (negative and positive) that aligns more with users’ needs

Final Solution: ‘View Recently Added’ toggle button

To match the user's need, I added a toggle button for recently added content which would show content added only after the last  save of the platform to increase searchbility of translated content and update it manually

Recently Added.png

Final Solution: Replaced the 'attachment' icon with a button

To match the user's need, I added a toggle button for recently added content which would show content added only after the last  save of the platform to increase searchbility of translated content and update it manually

Multimedia Replace Button.png

Evidence of Accomplishment

This was one of the most complex problems that I have had as there were no established practices that were used as well a lot of technical difficulties. The solution was deployed and used by many companies across the Asia Pacific region

The solution led to an increase in multilingual engagement by the secondary end users by 45%.
The solution also helped the primary users, the bot makers, who gave a lot of positive feedback about the ease of use and found that eased the process of multilingual chatbot testing as well.

bottom of page