To be able to collect inapproapriate translations easily and help customers to measure translation quality.
I led the design and worked together with the Product Manager and an external developer team to ideate on the solution.
The feature was never live (still planning to work on), but it inspired a lot of other features that we built.
Lokalise Message is a plugin app that works with customer relationship management (CRM) tools, such as Intercom, Zendesk, and Drift. It automatically translates conversations within messages, enabling customer service teams and customers to communicate in their native language.
Introduction video to Lokalise Messages
Lokalise messages rely on the API from Google Translate to auto-translate them. Unfortunately, just like with Google Translate, errors can occur in the translations. To ensure continued improvement of the translations, we need a way to identify and address these errors.
Problem #1
The first problem that we already know is that the quality of the translation is not good. Additionally, some customers also prefer to not translate everything as there might be specific terms that don’t need to be translated (e.g., Apple, CandyCrush, etc.).
Problem #2
Due to privacy reason, we also cannot retrieve what was translated wrong for our customers and we often need to ask them to send an email to us with a screenshot of the translation to know exactly what was translated. This increase a lot of effort for our customer support team and decrease our chances to improve our platform as we are lacking of data.
Fun fact #1
In my Figma file, I often include a Loom video where I share my work asynchronously. The interesting thing about this project is that we only met twice - at the beginning and end - and all other communication was handled through Loom videos and Slack messages.
Research
As the stakeholder of this process involve both our customers and our customer support team, I decided to work with the PM to interview both some customers and some of our colleagues to understand the pain from both end and see whether we would be able to develop a solution to solve the pain for both side.
What I wrote to my colleague
Interviewing my colleagues for insights
Research
While doing the interviews, since Lokalise Messages is a plug-in app that works on top of other platforms, I also spent some time looking into how other tools designed their plugin and see how we could improve.
Part of the workshop where I facilitated to help the team to visualize the ideas
Define
I organized the result of the interviews in a customer journey map format that clearly shows how the current workflow looks like and what would be the ideal workflow for them. The journey map here enables me and the PM to discuss together on the potential gap that we would like to tackle and solve.
Visualized user flow
Ideation
After the interview and competitor analysis, I came up with a first draft of designs to share with the team and discuss which version could help us to improve faster.
Design Option 1 - Allowing customers to submit feedback via Widget
Design Option 2 - Allowing customers to submit feedback via external webpage
Test
After the design is ready, I conducted a few rounds of usability testing with our customer support team and getting their feedback.
1. Able to report bad translation immediately
2. Prefer external webpage as widget is small and difficult to interact with
3. Prefer external webpage as it’s easier to attach screenshot and add additional contexts
1. Customer agents don’t use widgets often, and relies a lot on the notes/chat function
2. Will probably not use it often as it requires some additional effort to type
Design
During the testings, we receive feedback about the fact that customer agents don’t use widget often. Therefore, we decided to move towards the external website direction that allows customer to add context easier. On top of this, we also realize that customer agents also expect to have a way to submit feedback faster, without the need of adding context unless it’s a major error.
Improvement 1 - Allow customers to submit quick-feedback straight after a translation
Improvement 2 - Allow customer to report issue by using key commands
Improvement 3 - Improved the reporting page with more standardized option and improve design.
Test & improve
From talking to customers, we also realize that they would like to know how Lokalise Messages is increasing their team quality or decresing their support quality. Therefore, we decided to come up with an addinal visualized chart in the dashboard to allow admins to keep track of data.
Improvement - Allow customer team admin to visualize the translation quality.
Although the feedback system feature was never implemented, the design process and user research that went into it inspired the team to develop other features that unlocked new opportunities. For example, the report feature that was designed with Intercom notes and widget inspired the team to create a feature that allows customers to preview translations from different translation engines, such as Google Translate and DeepL.
As the services that VdoTok provides consists of complicated connection data, initially it was a big headache to present 50+ metrics in a webpage. To soothe this, I first tried to categorize different data into different levels and categories, and then come up with some ideas to visualize the data without taking up too much space.
As the end-users of this product are the developers, I worked closely with the developers in our own company during the design process. This ensured regular feedback from the developers to improve the design.
