One of Lokalise's 2022 missions is to develop a diverse app ecosystem with numerous integrations for our customers to use. This project is a crucial component in achieving our objectives.
I closely collaborated with a Product Manager and 8 engineers, taking charge of user research, collaborative workshops, and end-to-end UX/UI design.
Expanded Lokalise service to 7+ integrations, including Youtube, Google Play, and Typeform. Improved customer satisfaction rate by 11%.
Lokalise is a platform that enables localization of content into over 150 languages. One of Lokalise's objectives in 2022 was to integrate more marketing tools, including WordPress, Contentful, Shopify, and Marketo, to expand the platform's reach and enable more users to localize their content, such as blog posts and company landing pages.
Lokalise is commonly used for translating marketing content, specifically blog posts, through content apps such as WordPress and Contentful. However, the current design poses significant UI and UX issues, requiring users to perform multiple manual tasks, like content searching and translation tracking on separate software. Our plan is to address these issues to improve the customer experience.
Current design of the content management page
How we leverage 'data'?
Our quantitative data shows that many marketing users are interested in our app's integrations based on the onboarding rate, but they churn quickly after trying them out. We believe that the interface's difficulty and integration installation issues are major causes. We need to improve the app's usability and streamline the integration process to retain more users.
To effectively tackle the appropriate problem, I conducted a workshop product managers and customer support management to gain a deep understanding of our customers' workflow and gather feedback on their current experience. Through this, we were able to define our objectives and formulate hypotheses to validate through further customer engagement.
Journey mapping session on Miro.
Interested in getting the template? Click here.
The user might have to select multiple keys (fields) in order to import “One single blog post“ - This make users frustrated as they might forgot to import or export parts of the blog and they will need to redo it again.
The user cannot know whether the content has been imported or exported previously. Often need to keep an extra document (e.g., Confluence page) to keep track of what has been imported or exported/
The user cannot track the progress of the translation in the management page, and often need to visit the editor page (or the task page) to track the progress of the translations.
To ensure the accuracy of our hypotheses from the journey mapping session, we conducted customer interviews to validate the identified customer journey and pain points. These interviews provided valuable insights and allowed us to gain a deeper understanding of the workarounds currently being used by our customers.
Before moving on to the ideation stage, I conducted research on existing tools and competitors that offer similar functionality. This research revealed valuable information, such as the following:
Crowdin utilizes an interchangeable interface to manage the import/export process of translations. Users can easily select and export content to Crowdin, and then import it back to Shopify once the translation is complete.
Localize requires users to manually embed a code snippet on their website. Once embedded, Localize automatically imports all content and organizes it into phrases (or "keys" in our case). Users can then perform translations directly in Localize and the website will automatically update once the user publishes the changes.
Weglot has a similar approach to Localize, with the added benefit that for Shopify users, there is no need to manually embed code. Users can simply authorize their account via OAuth and manage all translations in Weglot. These changes will be published directly and synchronously to Shopify.
Full competitor comparison and collections on Miro
After we have some initial insights about the customer and how other competitors solve the problem, I facilitated a workshop with the team, including the Product Manager, CSM, Engineering manager, and engineers, to review customer insights and analyze competitors' solutions. Together, we walked through the customer journey and identified the problem we wanted to solve as a team.
We present the customer journey along with the CSMs, while asking the team to note down the pros and cons.
We look at the problems we noted down together, share and they vote for the ones that we believe are the most important ones.
After identifying the top problems we wanted to address, we conducted an HMW exercise to explore how we could turn those problems into opportunities.
After reframing HMWs into solutions, we started to ideate on some initial solutions on what we can potential work on to help the users.
Finally, we vote again to decide on a few solutions to explore with.
Workshop on Miro
Fun fact #1
The rule of thumb is to at least get a product-representative (PM/PO), design-representative (Designer), customer/user-representative (Customer itself, CSMs, User Researchers), and 2 engineering-representative from front-end and back-end. The ideal size is also 5-8 people to make sure that the workshop can be under control.
After the first day of the workshop, all participants were assigned homework to use any tool they preferred to visualize the solutions generated during the session. This could include sketches, wireframes, or any other method they found suitable. At the end of the process, we collected and reviewed six unique ideas from different team members to make a final decision.
Initial design of the content management page
Fun fact #2
Long and boring meetings is the worst thing that can happen in any company, so I always try to make the workshops I plan more interesting so people don't get sleepy. On the example above, I did this by adding a picture of a cat from one of our coworkers. It's a small thing, but it can make people smile and feel more relaxed.
After conducting research and workshops to identify and define the problem at hand, my role as a Product Designer is to bring the solutions forward by prototyping the UI and UX on the screen. This allows for testing and feedback from both colleagues and customers. Here are the initial prototypes we have developed.
Key Solutions 1 - Better grouping and status for translation
Key Solutions 2 - Nav bar & Filter to filter out contents
Key Solutions 3 - Customizable columns
Test & improve
As a B2B company, the cost of conducting user testing can be high. To minimize potential mistakes and improve details, we first gather feedback from our internal customer-facing team before testing with actual customers. Here are some feedback we received from the team:
“what does "waiting for review" mean here? Is it applicable only if there is a revision task created or always there if the revisions is enabled for the project in general?”
“Looking good! It will definitely be a welcome improvement once polished. Some customers don't translate all articles to all languages, but prioritise according to traffic or perceived importance. In the standard flow, items that are actually ready for export would be showing as in progress I suppose. Some people might get confused at first if not onboarded to the new logic. PS: Arabic, not Arabian?”
“I like this much more than the current version. Had the same questions as Paul.% completion - tricky part. Not every article has to be translated even into all languages of the project. Ideally, I would like to see a flow, where content is 1. imported and plugged into a translation/revision task in one go. Then % completion can be based on a task progress.But I guess it's out of scope now, and I doubt there is better way to calculate progress at this stage.”
Test & improve
Based on feedback from internal stakeholders, we have made a series of improvements to our design. These changes have helped to refine and enhance our prototype, making it more polished and ready for presentation and testing with customers.
Improvement 1 - Improved Translation Status Display
Key Solutions 2 - Simplified Navigation Bar
Average number of languages?
As I worked on improving the design for displaying translation status, I also analyzed our customer data to determine how many languages they typically work with. Because the average number varies across different use cases and customers, I decided to avoid designing for tracking a low or high number of languages. Instead, I opted for a middle-ground solution that shows the number of completed languages, with a tooltip that displays more detailed information whenever the user needs it.
Test & improve
After the improvements, we conducted 5 usability testing sessions with the customers and organized their feedback about the design. Some highlights are highlighted below.
Customers are mainly happy with the translation status they can see in the table. They are also satisfied with the stages (available for import, translation in progress, ready to export) as that allows them to clearly identify what the stage of the content is.
Customers mentioned that the installation process can be improved as often they will need to ask for help when installing the content apps. In addition, they also mentioned that the UI would be more powerful if we can also help them to identify whether the content is a new content or a recently updated content.
Fun fact #3
When I first joined Lokalise, the research recruitment process was not efficient. Typically, designers had to reach out to relevant sales or customer success managers to identify potential interviewees. However, my strength in data querying allows me to directly use analytical tools like Heap to identify customers who are actively using the specific features that I am testing. This approach ensures that I am speaking with relevant and qualified participants for research.
Test & improve
Based on customer feedback, we have further refined our design to enhance the user experience and address previously overlooked details.
Improvement 1 - Redesigned installation process
Improvements 2 - Filters that can be saved for future use
Here’s a loom describing the final design and how the final implementation looks like (in progress).
Initial design of the content management page
The new design has helped us to reach a higher CSAT score because it allows customers to easily find the information they need and navigate the app with ease. The nav bar feature has been particularly well-received, as it gives users the ability to track translation status at east. This has led to an increase in user engagement and satisfaction.
With the new design being released, it also makes us easier to integrate more apps with the scalable design. Up to 2023, we have released 7 more apps including Typeform, Google Play, Youtube, Marketo and many more!
The customers, business partners, and integration users have all given a positive reception to the new design, citing improved navigation and a better user experience.
Collaboration with our product manager and engineering team was essential for ensuring that our design solutions were feasible and could be implemented effectively. Involving customer success managers also provided valuable insights that helped refine our designs.
Leveraging data analysis tools like Heap allowed for more efficient research participant recruitment, as well as identification of patterns in customer behavior. By analyzing the data, we were able to gain a more in-depth understanding of customer needs and behaviors, leading to more informed design decisions.
PipeRider: Data Observability Tool for Data Scientists
Designing a User Feedback System to Improve Lokalise Messages
From Idea to Launch: Designing an AI-Enabled Scheduling App with OrganAI