About
The project is a design thinking process and involves more UX design than UI design as the design is already defined in the corporate design guidelines of the company. The project was completed during my UX/UI bootcamp at ironhack in Berlin. Blablacar is one of the world’s leading companies that takes its users from one place to another with the help of verified private individuals who offer the ride with their private cars, and that in more than 21 countries, so where is the problem?
All information in this case study is my own perspective and does not (necessarily) reflect the view of BlaBlaCar.
The Challenge
Find the simplest and most elegant solution
Consideration of existing cooperate design
Other functionalities should not be affected
Fig. 1. The original view of the journey details page (BlaBlaCars version of April 2022 in iOS view).
Fig. 2. Prototype of the journey details page with new translation function
My first impulse was — how can it be, that a “global operating company” has problems with a language and its translation within their application?
I had 4 days to find out and offer an implementable solution.
Process & Approach
1. Research
To better understand the problem, I researched various sources. The result: There are around 3.1 million people living in Germany whose native language is not German and who cannot read and write German properly. Of these, 30.2% were between 18 and 35 years old (LEO study in 2018).
Fig. 3. Desktop Research
Who are the users?
Users who live in a country whose language is not their mother tongue and who rely on public transport. Therefore, I focused my research on 25-35 year olds (the average age of BlablaCar users) whose mother tongue —in my case— is not German.
Initially, I was worried about developing a function that would work neither for the user nor for the company. So I sat down with my (inner) team and explored all the possibilities. I decided to use a Lean UX Canvas, which is actually intended to work with different departments within a company (Lean UX approach).
Fig. 4. Lean-UX Canvas
2. Empathize
To observe the users' behaviour directly, I started an contextual interview with the focus group, ideally BlablaCar users/ customers. And in case they didn't know the app yet, I wanted to show them the current user interface directly on my smartphone.
What’s your phone’s language setting?
- English
- Native Language
- German
- English
- Native Language
- German
So I conducted interviews with 5 people from a network who are expats living in Germany and don't speak German at all. I wanted to know exactly a.) what language setting they have in their phone, b.) if they have a workaround to solve the translation problem, and c.) why the descriptive text is so important when all the basic data about a trip (departure, price, number of persons etc.) can already be read in the app's system.
Fig. 5. Affinity Map
My survey showed that most users would translate the description text manually with a translation tool. Furthermore, I could rule out with confidence that a global language setting for the entire mobile application (within the app) would solve the problem. Because 100% of my focus users surveyed already use their phone and thus the BlaBlaCar app in their native language or in English, and yet the user description text cannot be translated.
If you use a workaround, which one?
3. Define
Fig. 6. Storyboard scenario 1 & 2
Fig. 7. User/ Customer Journey in six stages
One persona has emerged that has folowed thing in common with the entire focus group. They are all multilingual, mostly English and their mother tongue, confident in using translation programmes such as Google translate or deepl, and flexible in dealing with different private and public travel providers and also live a very eco-consciously life.
4. Ideate
Actually, I use such rough sketches mainly to test ideas on paper or to stimulate discussions in the team. But with users I could discuss also several options of my concept ideas and observe were a user would instinctively press to solve the “translate” problem. I'm not sure if this works equally well for testers with different backgrounds and technical affinities.
Fig. 8. Low-Fidelity Prototypes
Fig. 9. User Flow Chart (current)
5. Prototyping
The idea is that the translation is done in the language a user has already set on their phone, in my example Português. And I wanted to check the user reaction through a prepared split test.
Fig. 10. Translating with simple text-link
Fig. 11. Translate via workaround copy button
Fig. 12. Translating via select menu
It was very enlightening to be present during the user testing. It turned out that users almost instinctively wanted to copy the entire text by double-clicking it in order to translate it themselves with a small workaround because they expected native text control, as is familiar from digital text editing.
6. Testing
Most practical solution
After a initial round of feedback, I was able to further simplify the solution. Unfortunately, there is currently no 100% guarantee that a translation will always be correct. This is because dialect and nested grammatical forms, especially in German, are a major challenge even for AI control. From the user's point of view, the translation can also be done by a third-party provider. And I'm sure there is also an API for business solutions available.
Minimum requirement
A friendly reminder at the bottom of an input field for the profile and the travel description in the editor view could help to empathise with passengers. It doesn't solve our problem entirely, but a hint that there are travellers for whom German is a foreign language could be helpful in urban areas.
