May 2022 - June 2022 | Lokalise Messages | Senior Product Designer

Designing a User Feedback System to Improve Lokalise Messages


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.

Process overview

What is Lokalise Messages and how it works?

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

The top 2 problems we need to solve

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

Customers are complaining about the quality of translation

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

We have no way to get what exactly was translated for them...

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

My PM is 8 hours ahead of me, how did we work?

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.


I started by interviewing our customer support team

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


Then I did some competitor reviews

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


Result - Workflow and Painpoints

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


Initial design proposal

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

Since Lokalise Messages provides a widget on all platforms that we integrated with, one solution that I provide is to allow customers to report any translation bug via widget. This way, the customer won’t need to leave the tool that they are using and can report more conveniently.

Design Option 2 - Allowing customers to submit feedback via external webpage

Another option that I came up with is to allow customers to click on a Improve feedback button on the widget and that will lead them to an external webpage, which allows them to provide additional information as well as more context.


Testing with support agents

After the design is ready, I conducted a few rounds of usability testing with our customer support team and getting their feedback.

☀️ What users love about new design?

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

🌧 What users hate about new design?

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



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

As customer agents focus on the chat for the most time during the work, we realize that adding an extra option right inside the translation message might be easier for the agents to submit feedback if needed.

Improvement 2 - Allow customer to report issue by using key commands

In the case where the customer agent would like to submit a feedback, we also added an option for them to use key commands to submit feedback faster.

Improvement 3 - Improved the reporting page with more standardized option and improve design.

After interviewing the customer support team and getting some additional data, I improved the page by having some default option for the most-frequently reported issue, with pre-filled fields so that agents won’t need to submit too much information when they report the issue.

Improvement 3.1 - Case when formatting is wrong

Improvement 3.2 - Case when translation is not working

Improvement 3.3 - Case to handle all other feedback

Test & improve

Final improvement

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.


The feedback system feature was never live, but inspired many other features that were built

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.


1. Everyone is a designer

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.

2. Work closely with engineers

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.

Check other case studies

Redesigning Lokalise's Marketing Content Management Page

PipeRider: Data Observability Tool for Data Scientists

From Idea to Launch: Designing an AI-Enabled Scheduling App with OrganAI