Localizing an E-Commerce App for an Improved User Experience
'Local Language Translation' is a project I completed during my time as a Product Designer at Daraz (Alibaba Group). Daraz is South Asia’s largest e-commerce marketplace, and operates its business in 5 countries including Pakistan, Bangladesh, Sri Lanka, Nepal, and Myanmar. Until 2021, the platform was only available in English despite the fact that a majority of the population in its operating countries displayed a preference to browse the internet in local language. This project aimed to address this gap in user experience by introducing a language toggle option to the platform, along with a fully localized (with local language support) shopping experience.
The User Problem
Daraz's Pakistan and Bangladesh ventures together comprise of 60% of its business. However, despite it being the leading e-commerce marketplace in both these countries, English was the only language that the Daraz app could be browsed in.
My team and I conducted a quick analysis of Facebook user statistics, which revealed that 60% and 80% of internet users in Pakistan and Bangladesh respectively preferred to use the internet in their native language. In tandem with this, an analysis of Daraz’s own userbase's behavior showed that 20-25% of search queries on the app were typed in either local script or Romanized local language (local language with English characters).
These statistics indicated that a rather large portion of Daraz’s user base's (and internet-using population's) needs were not being met with the English-only platform.
The Goal
The goal was to introduce a language toggle feature on the Daraz mobile app, website and mobile site, along with a fully translated end-to-end shopping experience in the respective country's native language.
A local language Daraz app would not only improve the user experience for current users, but would also make it accessible for new users to join the platform.
As the scope of the project was large and would require the commitment of frontend & backend technical resources for up to 4 months, we decided to focus our translation efforts in 2 countries before implementing this in the remaining countries- specifically, our 2 largest businesses in Bangladesh and Pakistan.
My role:
Product designer/owner & UX researcher
My responsibilities
I was responsible for ensuring the end-to-end delivery of this project, from managing stakeholders and timelines, conducting user research, collecting translations from business POCs, aligning engineering teams, outlining user flows and developing mockups for new local language screens, organizing QA testing and user active testing, and readying the product for launch.
Who were our users?
The user research we conducted before taking on this project, as described above under 'The User Problem', was exclusively secondary research where we analyzed statistics of the internet using population in Pakistan and Bangladesh, and the app behavior of our current user base. The main pain points addressed were:
Difficulty navigating and shopping in English as the pain point for current users- particularly those that aren't fluent in English.
Being unable to use the app at all due to the language barrier as the pain point for potential users that can not read English and communicate primarily in the native tongue.
Project Timeline & Defining the Scope
Our goal was to have the app, website and mobile site fully translated in Urdu and Bengali by the time of our annual mega-sale event "11.11". The following was the timeline for the project:
In a project kick-off meeting with all key stakeholders, we aligned that these were the tasks that would be accomplished by the end of October before our mega-sale event:
Language toggle switch on website, app and mobile site.
Translation of all text, icons and images on the homepage, DarazMall, dMart, DarazGlobal and the Fashion & Beauty channel into Urdu and Bengali.
Translation of all pages in the buyer journey including product display page, cart, checkout, confirmation, wallet and account pages.
English to Bengali translation algorithm to be developed and deployed after QC rounds. This will automatically translate 30 million product titles in Bangladesh.
Development and QC on search algorithm to register local language and romanized queries.
New user language select screens and app startup screens in local language.
Multi-language input fields on Seller Centre so that sellers can input their own translations rather than relying on algo translations.
Sketching the User Flow for New and Returning Users
Prior to the development of the local language option for Bangladesh and Pakistan, the app would launch in English by default. A series of onboarding screens would play in English before the user was taken to the app.
However, we now needed to revise the onboarding screens for new users to allow them the choice between using the app in English or local language.
A user flow had to be drafted for 3 user cases:
New user with valid SIM
New user without valid SIM
Returning user with or without SIM
My aim was to ensure that each user experiences as seamless a sign up process as possible, and would not need to swipe through screens irrelevant to them. A user with a valid sim, for example, shouldn’t need to see a country select screen when downloading and launching the Daraz app.
The same user flow as above (for users in Bangladesh without a valid sim card) is depicted below with the following draft mockups:
Start of Frontend Development & Translations
With the Product Requirements Document (PRD) presented and approved by all teams, we started ticking off each item on the MVP checklist, starting with the language toggle switch. Pictured below is what this switch looked like on the website and mobile site:
Perhaps the biggest challenge that this translation project posed was that text on the Daraz app could come from either of 3 different sources, so 3 tech teams were involved in bringing these translations to life:
Native app team
Front-end team
Back-end team
Image assets, such as the banner on the screen were to be made by our in-house graphic designers.
To achieve this, we had to :
Identify the source of each text element (front-end, native, etc). Since a lot of the website's infrastructure was built by the parent company (Alibaba)'s tech resources, we had to dive deep into historical documentations to trace down the developer of some of the oldest assets on the Daraz website.
Collect translations from the business POC for each asset and text element
Transfer these to the relevant tech team who owned that domain and could configure the translated text.
The page depicted below, for example, has text coming from 4 different sources, and so 4 teams were required to configure translation on this groceries page.
The User Flow for Toggling Language on the App
I recorded my screen below to showcase how the final language toggle is experienced by the user.
Following modern conventions for information architecture, we decided to place the language toggle switch under the 'Settings' gear icon which can be accessed from the 'Profile' page. The path taken by the user is then:
Any starting point > Profile > Settings > Language Select
Developing a Translation Algorithm for Product Titles & Product Descriptions
Text on the Daraz app/website can be categorized as either static (fixed, unchanging) or dynamic (inputted by sellers and subject to change).
Whereas static text includes all category names, channel names, icon labels, etc, dynamic text exclusively referred to product titles and descriptions that are input by sellers themselves.
While all the static text on the app was translated manually using the help of translators hired by the business POCs, we needed a solution for dynamic text to be translated automatically. For these, the data science team worked with us to train an algorithm that could translate product titles and product descriptions from English to Bengali or Urdu.
Since product titles and descriptions were the 2 main dynamic texts needing this translation algorithm, we conducted daily quality checks by having local teams (in Bangladesh and Pakistan) rate the machine-produced translations and record any notable errors, allowing the translation algorithm to improve every day until launch. By the end of October, we were able to achieve an error rate as low as 1.6% on product titles translated from English to Bengali. On the other hand, the algorithm for English to Urdu still needed more work before it could be launched.
Pre-Launch: QA and User Active Testing
With 1.5 months left before the scheduled launch of Daraz in local language, we enlisted the help of our QA teams to identify and report any translation bugs or gaps we may have missed. Our QA teams raised tickets for these bugs and assigned them to me, so that I could direct them to the relevant tech POC.
These tickets were being resolved at the same time as the final translations on the app were still taking place.
Once we had confirmed that QA had raised all the necessary tickets for the app, msite and website, we conducted UATs with our business POC to double check any language inconsistencies in the actual translations.
Launch Plan & Impact of the Project
After four months of work, we were proud to announce that the platform was fully translated into both Bengali and Urdu for users in Bangladesh and Pakistan.
As an experiment to gauge how users' received the newly localized app language, our project's stakeholders requested that we move existing app users in Bangladesh to the Bengali site upon their next launch of the app. The reasons for conducting this experiment in our Bangladesh venture were:
A whopping 80% of Bengali internet users expressed a preference to browse the internet in their local language (compared to 60% in Pakistan)
The English-to-Bengali product title translation algorithm was ready for launch (minimal error rate), while the Urdu algorithm still needed work.
The success of the above described experiment was not immediately apparent. Conversion rates for returning users did not change significantly. However, when we narrowed our analysis onto new users in particular, we saw an overwhelming rate of adoption (85%) for the Bengali site by new users, as well as a significant increase in conversion rate (18%) of new users as opposed to returning users. In Pakistan on the other hand, we saw a 6% increase in new user conversion rate following the launch of Daraz in Urdu.
The above numbers were enough to convince us of the success of our translation project, but we were of the mindset that there is a lot that can still be improved. For this, we decided to reach out to our users directly to hear about their experience with the localized app.
Post Launch: User Feedback
A few weeks following the launch of Daraz in Bengali and Urdu, we conducted phone surveys to gauge user satisfaction and feedback on the new local language experience. We chose phone surveys over circulating forms through push notifications so that we could hear directly from the user how they felt about the new local site. We wanted our users to be able to give open-ended feedback to a real person in a conversational flow, as opposed to the impersonalized written survey format.
I worked with customer research teams in Bangladesh to design the following conversational map, where 'BN' represents Bengali and 'EN' represents English. The phone calls were conducted in Bengali:
The four questions our phone surveys aimed to understand were:
User satisfaction with the local site
Ease of navigation to the language toggle options
User pain points with the new language option
The performance of the localized search algorithm
Results from the Post-Launch Phone Surveys
The surveys we conducted revealed key insights that would serve as our starting points for the next phase of the Local Language Translation project. These were the main takeaways:
The option to switch to local language was extremely well received in both countries, with Bengali users experiencing an 85% adoption rate of the Bangla language site among returning users.
Pakistani returning users preferred to stick with the English version of the site they were already using, but 20% of new users downloading the app chose Urdu as their preferred language.
Users in both countries preferred to type their search queries in English or romanized local language for 2 reasons:
English key words yielded more relevant search results
Local characters/script is harder to type in
100% of users responded affirmatively to being asked whether they were able to locate the language toggle option on the app. This was verbally demonstrated too.
The primary pain point users experienced was with the search results when typing in local language. This indicated that the local language search algorithm being developed in tandem with the localized app and site needed further tweaking and QC before it was relaunched.
Final Thoughts and Learnings
Local Language Translation for the Daraz app/website was the first UX project I did as a product designer, where I was entrusted with leading the project from start to finish and readying it for launch.
If I could summarize the biggest learning or takeaway I gained from the 4-5 months I spent on this project, it would have to be the collaboration and teamwork that was necessary to execute it. This project demanded great communication between multiple stakeholders and needed the expertise of many teams: tech teams based in China, resources from our parent company Alibaba, data teams responsible for developing the machine translation algorithm, business POCs to provide us with the translated texts, marketing teams to tease the launch date, QA teams to identify bugs on time, and product specialists to help us get to the root of problems- many of which I haven't even described here.
Simply put, it could not possibly be done without strong communication between the many teams that all had a role to play in this immense undertaking.
In the end, we were able to make Daraz- the number 1 online shopping solution in both countries- more accessible to hundreds of thousands of native speaking users in Bangladesh and Pakistan- an achievement soon to be replicated in our remaining three ventures.