Localizer

Enhancing the Translation Management Experience

Localizer is an in-house web application developed by GrapeSEED India to simplify the storage and management of translated text strings from over 45 applications and websites into 20+ languages. This case study outlines the process of redesigning the app and improving Localizer's user experience to address the challenges faced by GrapeSEED employees in storing, organizing, and accessing translated text strings.

UX Research ・ Wireframing ・ UI Design ・ User Testing ・ Front-end Development

Understanding the purpose of Localizer

GrapeSEED is an English oral language acquisition program for children. It offers over 25 applications and websites used by schools, teachers, students, and parents worldwide. The need for translating web and app content into over 20 languages is critical for its global reach. Additionally, GrapeSEED’s 20+ in-house applications, used globally by its employees, require translation to facilitate ease of use in non-English speaking regions.

Translating multiple apps into different languages is a challenge for GrapeSEED. The apps are initially created in English, and translators translate the text strings for different pages and sections. Developers then incorporate these translated strings into the apps for specific countries.

To address the need for storing and managing translations in different languages, the GrapeSEED team developed Localizer. Translators can store translated strings in Localizer, and developers can easily access them. The app has been a success and is now used by over 1000 GrapeSEED employees worldwide.

Old Version of Localizer

Problem Statement

GrapeSEED faced significant usability issues with Localizer due to the lack of a dedicated designer during its development.

Complex and Cluttered Interface: Users, especially those who are not technically inclined, struggle with the complex and cluttered interface of Localizer. This leads to difficulty in navigating and finding specific apps or translation strings.
Absence of In-App Collaboration Tools: There is no way for users to collaborate, discuss, or comment on translations within the app. This lack of communication tools creates barriers in workflow and teamwork.
Inefficient Search Functionality: Finding specific translations is time-consuming due to the cluttered layout, navigation issues, and lack of a robust search function.
Steep Learning Curve for New/Non-technical Users: The app, initially built with developer-centric terms and concepts, is challenging for new, particularly non-technical, users, failing to cater to its predominant user base of non-technical translators.
Lack of Bulk Actions: The current process of managing translations is inefficient, as users have to save or delete translations one by one, which is time-consuming.

Possible Solutions

The project aimed to address these challenges and improve Localizer's usability:

Redesign User Interface: Simplify and declutter the user interface to make it more intuitive, especially for non-technical users. Implementing a more streamlined design can significantly improve the user experience.
Incorporate Collaboration Tools: Integrate features like comment sections, discussion threads, and real-time collaboration tools within the app. This would facilitate better communication and teamwork among users.
Improve Search Functionality: Enhance the search feature to allow users to quickly and easily find the specific translations they need. Implementing filters and advanced search options could greatly reduce the time spent on searching.
User-Friendly Onboarding Experience: Add in-app guidance or tooltips explaining some of the more complex features or terms. Create a more accessible onboarding process with tutorials, guides, and simplified documentation to help new users navigate through Localizer more comfortably.
Introduce Bulk Action Features: Develop functionality that allows users to perform bulk actions on translations, such as bulk saving or deleting, to enhance efficiency.

Discover Phase - Research

Qualitative Research.

I interviewed six GrapeSEED employees who use Localizer almost every day. This group included a couple of developers, three translators, and a product manager. I conducted the interviews over video calls using Microsoft Teams. It was all about how they use Localizer, the good, the not-so-good, and everything in between.

I got a real sense of the different experiences across roles, especially when it came to finding translations, learning to use the app, and working together as a team.

Here are a few general questions that I included in all the interactions -

Can you briefly introduce yourself and your role at GrapeSEED?
How frequently do you work with translated text strings in your role?
Can you describe your experience with using Localizer so far?
Walk me through the process you currently follow for managing translated text strings without Localizer.
What challenges do you face in the current workflow when dealing with translations?
Are there any specific challenges when managing or updating translated strings?
How easily can you find and access the translated text strings you need within Localizer?
Did you find it easy to learn how to use Localizer when you first started using it? Can you describe any specific challenges or hurdles you encountered during the initial phase?
What aspects of Localizer do you find most helpful in your daily tasks?
How do you currently collaborate with other team members (translators, developers) using Localizer?
Are there any communication gaps or challenges you face when working with translated text strings and Localizer?
On a scale of 1 to 10, how would you rate the overall user-friendliness of Localizer?
Are there specific features or functions within Localizer that you find difficult to use or confusing?
Looking ahead, what changes or enhancements would you like to see in Localizer to better support your workflow?

Quantitative Research (Survey)

After conducting all the interviews, I had a clearer picture of what was going on, but I knew these views might just be the tip of the iceberg. Localizer is used by around a thousand employees across various countries, so I wanted to see if others were facing similar issues.

To get this broader perspective, I set up a survey with 13 questions. These were based on what I learned from the interviews. I used Google Forms for this and got responses from 364 people! This helped me see the larger patterns and understand if there were any other issues we hadn't talked about in the interviews.

User insights from the survey

We got a great response from the survey - 364 employees pitched in, which was fantastic. This gave us a lot of information to work with. It was really useful because it confirmed the problems we heard about in the interviews and also showed us some new issues we hadn't seen before.

Mixing these personal stories from the interviews with the survey numbers really helped us understand what's going on with Localizer, and it set us up well for the next steps.

Define Phase

User Personas

I wanted to form a deeper understanding of our user's goals, needs, experiences, and behaviors. So, I created 3 personas which include 2 translators and one developer. They were based on user interviews and surveys, and I kept updating them throughout the project as I gathered more data.

Empathy Maps

To gain a deeper understanding of user behaviors and decisions, I utilized the Empathy Mapping Method. An empathy map is a collaborative visualization that helps articulate our knowledge about a specific type of user. It allows us to externalize user knowledge, create a shared understanding of user needs, and facilitate decision-making.

User Journey Mapping

Based on the User Research I have created a Customer journey Map is to better understand the crucial Pain Points, challenges, mindset and overall journey which user may encounter while using Localizer. And list down the opportunities.

Information Architecture

Design Phase

Wireframing

Using Figma, I quickly designed a few Low-Fi Wireframes trying out different layouts for the translation page. Once the Low-Fi Wireframe was finalized and approved, I kept improving the design of that wireframe by adding more details to it.

Lo-Fi Wireframe

Hi-Fi Wireframe

Usability Testing

At this stage, the wireframes were defined enough for some user testing. So, I created a fully functional prototype using Figma.

The First Round of Testing

In the first round, I tested the prototype with five employees to evaluate how user-friendly the application was. The test was conducted over Microsoft Teams video calls, where I observed how they navigated through the application.

The employees appreciated the new layout of the Translations page. They were happy with these changes:

New App and Menu layout (most of them liked this)
The new Discussion Forum
The option to delete multiple translations at once
The option to save all the translations at once

Here are some pieces of feedback I received:

Search Bar Accessibility: The search bar in the header allows users to switch between apps, sections, or translations and to search for what they want. However, users have to go all the way to the top of the page to use the search function. Switching between apps, sections, and translations is also time-consuming.
Resistance to Navigation Changes: Some employees are not technical and found learning to use the old version of Localizer very difficult due to its cluttered interface. However, they had gotten used to it and did not want the navigation to change because they remembered the positions of the apps they worked on. They were concerned that the changes would make finding those apps take longer and affect their workflow.
Prototype Limitations: Almost all of them mentioned that the input fields on the translation page were not functioning and they wanted to see them work in the prototype, as the main function of Localizer is to input translations.

Changes Considering Feedbacks

In this prototype, considering the feedback received in the first round of testing, I made the following changes.

New and Improved Prototype:

The problem with prototyping in Figma or any other prototyping tool is that you can’t create functional input fields.

So, for the second round of tests, I decided to create a real website as a prototype. My past experience as a front-end developer came in handy. I developed the website using React and the Next.js framework, the same technology used by the developers at GrapeSEED for all their web apps. It took longer than creating a prototype in Figma, as I had to code everything, but it was worth the effort.

Open the website

Separate search bar for Apps, Sections, and Translations

I created a separate search bar for apps and sections and placed it directly above the respective menus to make it more accessible and reduce the time it takes to reach it. I implemented the same approach for translations.

Option of pinning apps

I introduced a new feature in the App Menu that allows users to pin the apps they use most frequently. The pinned apps will appear at the top of the app list. This feature is particularly useful as I found that a translator typically works on 3 to 4 apps at a time. By pinning these apps, they can access them more easily, saving a significant amount of time.

The Second Round of Testing

After I made these changes, I started the second round of testing. The employees liked the new prototype a lot. They were really happy with the changes.

I got more feedback from them:

Employees wanted an option to upload reference images and screenshots in the discussion forum chat. This was something they could do in the old Localizer. Managers used it to upload pictures showing the changes they wanted. But in the old system, to see the image, you had to open it in another tab and keep switching between that tab and the Localizer. This was hard and took a lot of time. They wanted an easier way to see both the picture and the translation table at the same time.

So, I added a way to upload pictures in the Discussion Forum chat. And to solve the problem of continuously switching tabs, I came up with a new feature -

Split Screen View

This feature allows users to open an uploaded image in a split-screen view. In this view, they can see the Image and the translations table on the same screen. It also hides everything else that's not important. There's also a button to maximize the split-screen view, hiding everything except the picture and the translations table.

I talked to the developers and the project manager of Localizer to see if we could really make this feature. They liked the idea and said yes.

So I implemented this feature in the prototype website.

Continuous Testing and Final Adjustments

Following the introduction of the split-screen view, several more rounds of testing were conducted. Each round brought us closer to a design that met the user's needs and expectations. The split-screen feature, in particular, received high praise for its utility and user-friendliness.

Disucssion Forum

Pinning Apps

Split-screen View

Other Pages

My Involvement in Website Development

My previous experience as a front-end developer greatly benefited me in this project. It not only enabled me to effectively communicate with the developers but also helped me to get involved in the development of the final website.

The development team was so impressed with the prototype website that they decided to use it as the foundation for the final website and involved me in the design team. It definitely needed some improvements, so I worked with the front-end developers to finalize the front-end part of the website and the back-end developers worked on connecting the existing database with the website using APIs and creating new APIs for the discussion forum.

The prototype website was built on React and Next.js framework, which is the same technology employed in all GrapeSEED web apps. Therefore, connecting the backend data API keys to the prototype website was a seamless process. Although I have limited knowledge of backend development and creating APIs, I played a role in finalizing the website as a front-end developer. But during this phase, I learned a lot about Backend Development.

Bridging the gap between Design and Development:

My familiarity with front-end development enabled me to serve as a bridge between the design and development teams. This proved invaluable in ensuring that the design vision was accurately translated into the final product. It also facilitated smoother communication, as I could understand and relay technical aspects and constraints effectively to both sides

Learning and Growing as a Developer:

This project was an enriching experience that expanded my knowledge and skills in front-end development. It challenged me to step out of my comfort zone and delve deeper into the technical aspects of web development. The opportunity to contribute to both the design and development stages of the project was not only immensely satisfying but also highlighted the importance of a multifaceted skill set in the field of UX design.

Results and Impact

The comprehensive redesign of Localizer led to remarkable improvements in both its functionality and user experience, yielding significant results:

Increased User Satisfaction: Post-launch surveys showed a remarkable 56% increase in user satisfaction among GrapeSEED employees, underscoring the success of the redesign in meeting user needs.
Streamlined Translation Tasks: The streamlined interface and new features such as the split-screen view and discussion forum reduced the average time taken for translation tasks by 40%.
Enhanced Navigation Efficiency: The introduction of the app and section navigation layouts, along with the app pinning feature and a more accessible search bar, decreased the time required to locate specific translations by 35%.
Improved Communication: The new discussion forum with the image upload feature and split-screen view received overwhelmingly positive feedback for facilitating better communication and clarity in translation tasks. It also reduced the need for multiple applications for communication with the team, further decreasing the overall time for translation tasks.
Innovative Split-Screen View: The split-screen view feature was particularly well-received by the development team for its innovative approach to solving a common workflow issue.

Business Impact

Efficiency in Workflow: The enhancements in Localizer directly contributed to a more efficient workflow, leading to a reduction in the time-to-market for multilingual content across GrapeSEED’s applications and websites.
Increased Productivity: The improved user experience and efficiency gains from the redesign contributed to a notable increase in the GrapeSEED team's productivity, positively impacting the company's operational efficiency.

Learnings

The journey of redesigning Localizer was rich in insights and learnings, highlighting several key aspects of UX design and project management:

User-Centric Design is Paramount: The primary takeaway from this project was the importance of centering the design process around the user’s needs. Feedback from GrapeSEED employees was invaluable in shaping the redesign, demonstrating how user input can significantly enhance the usability and functionality of a product.
Iterative Testing is Crucial: The phased approach to usability testing, with multiple rounds of feedback and adjustments, was instrumental in refining the product. This iterative process not only helped in identifying and resolving issues but also in fine-tuning the features to better align with user preferences.
Adaptability in Design Approach: The switch from a Figma prototype to a fully functional React and Next.js website highlighted the need for flexibility in design tools and approaches. This adaptability was key in creating a more accurate and interactive representation of the final product.
Technical Limitations as a Catalyst for Innovation: Encountering technical limitations, such as the inability to create functional input fields in Figma, led to innovative solutions like the development of a real website as a prototype. This reinforced the idea that constraints can often lead to creative problem-solving.
Cross-Disciplinary Collaboration Enhances Outcomes: Working closely with the development team and leveraging my front-end development skills proved to be a significant advantage. This collaboration ensured that the design was both feasible and aligned with the technical capabilities and constraints of the existing systems.

In conclusion, the Localizer project was not only about redesigning a tool but also about understanding the dynamics of user interaction, the importance of cross-functional collaboration, and the continuous process of learning and adapting in the field of UX design.

Conclusion

The Localizer redesign project exceeded initial expectations, delivering a robust and user-friendly platform that significantly enhanced the translation process for GrapeSEED. The project's success demonstrates the profound impact of user-centered design in creating solutions that not only address user needs but also contribute to broader business objectives. This case study serves as a compelling example of how thoughtful design and development can lead to meaningful and measurable improvements in both user experience and business efficiency.