Jul 2022 - Oct 2022 | Lokalise | Senior Product Designer

Redesigning Lokalise's
Marketing Content Management Page

Objectives

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.

Role

I closely collaborated with a Product Manager and 8 engineers, taking charge of user research, collaborative workshops, and end-to-end UX/UI design.

Outcome

Expanded Lokalise service to 7+ integrations, including Youtube, Google Play, and Typeform. Improved customer satisfaction rate by 11%.

Table of contents

Background

Research

Define

Ideation

Prototype

Test & Improve

Process overview

Background

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.

Focus on marketing tools, why?

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.

Research

Kicking off the project with journey mapping

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.

Main problems that we aligned on

Challenge #1

Non-intuitive field selection

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.

Challenge #2

Missing Import/Export Visibility

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/

Challenge #3

Lack of Translation Progress

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.

Research

Interview customers to validate journey map

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.

Main feedback from customers

☀️ What users love about current design?

  • Flexibility - Flexibility is important to our customers, as they appreciate the ability to update content or translations whenever necessary, and make changes to the live website directly.
  • Filters & search - Customers have mentioned that one big reason why they would use Lokalise instead of other platforms is that we allow them to filter and search for the content that they need to import easily.

🌧 What users hate about current design?

  • Finding content to import - Customers have mentioned that it’s very difficult for them to find content to import as the content table can contain hundreds of articles/blogposts.
  • Finding content to export - Customers have also mentioned that it’s difficult for them to find contents that are translated and ready to export.
  • Performance - Couple of customers have mentioned that the content gets corrupted when they import and export HTML-based content (i.e., Wordpress).

🏔 What can we improve?

  • Adding translation status - Having translation status will allow customers to identify whether the content has been imported to Lokalise and if the content is ready to be exported. With the support of filters, customers will be able to filter out content to import or export easily.
  • Better flow and navigation - We have noticed that the customers often don’t know when to click on the refresh button or when to click on import/export. Therefore, we should improve the navigation and make the experience easier to follow.

Research

Competitor analysis

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 and Shopify

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 and Webflow

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 and Shopify

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

Define

Ideation workshop

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.

The workshop process I designed (1.5 hours)

1. Ask the experts (15 mins)

We present the customer journey along with the CSMs, while asking the team to note down the pros and cons.

2. Group and decide the Problem (20 mins)

We look at the problems we noted down together, share and they vote for the ones that we believe are the most important ones.

3. Turning problems into opportunities (20 mins)

After identifying the top problems we wanted to address, we conducted an HMW exercise to explore how we could turn those problems into opportunities.

4. Ideate initial solutions (20 mins)

After reframing HMWs into solutions, we started to ideate on some initial solutions on what we can potential work on to help the users.

5. Vote on the solution (5 mins)

Finally, we vote again to decide on a few solutions to explore with.

Workshop on Miro

Fun fact #1

Who should be invited to workshops like this?

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.

Ideation

Crazy 8 exercise

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

How to make workshops fun and interactive?

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.

Design

Merging the ideas together - Prototyping fun!

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

To simplify the process of importing blog posts to Lokalise and improve the tracking of translations, we propose implementing a more efficient grouping system. This would eliminate the need for manually selecting each field and allow for easy monitoring of translation status directly within Lokalise.

Key Solutions 2 - Nav bar & Filter to filter out contents

To further enhance the user experience and make it easier for customers to manage their content, we have implemented a navigation bar that allows for filtering by status. This enables customers to view only the content that is in a specific stage, making it simpler to identify and take relevant actions on specific content.

Key Solutions 3 - Customizable columns

The last feature that I added enables customers to customize the columns displayed in our content app. This allows for a consistent interface across similar apps, while still accommodating to the unique data needs of each app. For example, WordPress users may prefer to see website titles while Contentful users may prefer to see blog titles. This flexibility improves the overall user experience by providing a tailored and personalized view of the app's data.

Test & improve

First round feedback from the CSM team

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:

Feedback from CSMs

“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

Improving the prototype

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

The previous percentage-based display of translation progress caused confusion as it was unclear whether it represented progress on the entire task or progress on a specific language. To address this, we have updated the design to directly show the number of languages translated out of the total number of languages. This change helps to clearly communicate the translation progress to users.

Key Solutions 2 - Simplified Navigation Bar

The previous navigation bar design consisted of 5 sub-levels, which caused confusion for users. Based on user feedback, we have removed the sub-levels and now only display the top level, making it easier for users to distinguish the different stages of translation.

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

Second round feedback from customers

After the improvements, we conducted 5 usability testing sessions with the customers and organized their feedback about the design. Some highlights are highlighted below.

☀️ What users love about new design?

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.

🌧 What users hate about new design?

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

Using data tools to identify the right customers to talk with

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

Final design improvements

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

During our interviews with customers, we discovered that they often struggled with the installation process and frequently required assistance from our customer success managers. In response, we have redesigned the flow and adjusted the layout of the installation process to make the instructions more user-friendly and easier to follow.

Improvements 2 - Filters that can be saved for future use

During our conversations with customers, we learned that they heavily rely on filters and search to quickly find targeted content for translation, such as high-traffic content. While we are not able to display traffic data within Lokalise, we have implemented the ability for customers to save frequently used filters, allowing them to more efficiently find the content they need.

Results

CSAT increased from 3.6/5.0 to 4.0/5.0 (Still collecting)

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.

Released to 7 more apps

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!

Happy customers/partner feedback

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.

Learnings

1. Collaboration with cross-functional teams is essential for successful product design

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.

2. The power of data-driven design

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.

Check other case studies

PipeRider: Data Observability Tool for Data Scientists

Check case study

Designing a User Feedback System to Improve Lokalise Messages

Check case study

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

Check case study

Ben Shih.

Work

About me

Blog

Resource

Made with ☕️ and 🐶 in 2023