LINE

Background
LINE is the number one messaging application in Japan and is available in 17 languages. It was originally founded due to the 2011 Tohoku Earthquake, as a way to disseminate news. Nationwide, there are currently 86 million active users. Globally, there are 182 million users. Users can exchange messages, images, audio, and videos, post updates on their timeline, shop via LINE Pay, an electronic wallet, and so on. It is also a news distributor and media streaming service, providing users with access to daily articles, more than 70 million songs, manga, videos, games and more.

Problem
While LINE is offered in 17 languages and is used around the world, they have yet to integrate a translation feature into their mobile app. Currently, there is only a translation feature limited to the desktop application. There are also indirect methods to translate messages including:
‍
1) Switching out of the app and copying and pasting messages into google translate.
2) Looking up individual words in dictionaries manually, or electronically.
3) Adding a “Translation Bot” as a friend, where you can send messages to this Bot, receive translated messages from it, and then copy and paste these messages into your desired chat.
4) Adding a “Translation Bot” into your chat. For example, if you are talking to a friend, you would need to add the translation bot as a third person to the chat and it would automatically translate all of the messages.

Solution
I designed a translation and transliteration feature for incoming messages, as well as a translation feature for outgoing messages.
‍
_{* Please note that this project was conducted in January 2022, when there was no existing in-app translation feature.}

Duration
6 weeks

Role
UX Designer
‍
Tools
Figma
Whimsical
Otter.AI
Notion

Preview of Features

Problem: Absence of a quick, in-app tool that allows users to quickly translate incoming messages.

Solution: A feature that triggers a translated message with one click

Problem: Language learners don't want just a mere translation, but also want to know how to pronounce words/phrases.
‍
Solution: A transliteration feature, that allows users to see the message in romaji (roman alphabet), as well as furigana (hiragana)

Problem: Users want to translate outgoing messages as well. (In particular, for this project, users translate outgoing messages from Japanese to English to confirm that their message is accurate.)
‍
‍Solution: Designing a tool that lets the user translate outgoing messages into the language of their choice

Problem: Users want to translate outgoing messages as well. (In particular for this project, users translate outgoing messages from Japanese to English to confirm that their message is correct.)
‍
‍Solution: Designing a tool that lets the user translate outgoing messages into the language of their choice

Research

In order to design effectively, I first had to understand the domain of translation and messaging apps. Here are some of key insights:

After WeChat, LINE is the second most popular Asia-based messaging app, with 167 million monthly active users in Japan, Taiwan, Thailand and Indonesia
There is a growing demand for translation software due to more people migrating to different countries in search of a better life
According to a survey conducted in December 2020, close to 58% of smartphone users in Japan send between one to 10 LINE messages per day

Next, I conducted a competitive analysis and features analysis, focusing on the strengths and weaknesses of existing translation apps on the market.

Competitive Analysis

User Interviews

Next, I interviewed seven participants; five females and two males, in their 20s and 30s. All interviewees were LINE users, and had lived or traveled abroad before. I created an interview script as a reference, which can be viewed here.
‍

Main Findings

7 out of 7 currently find translating messages tedious due to needing to switch in and out of multiple apps, copying and pasting, editing/deleting parts of the message, or adding Translation bots as friends in the app, etc.
6 out of 7 expressed a preference for targeting specific words, sentences and messages.
7 out of 7 participants used to translate 80% or more of messages received, and tended to translate entire sentences more when they were first learning the language, whereas more advanced learners prefer translating specific words, etc.
5 out of 7 strongly believe that transliteration/furigana or some kind of information on the reading is a necessity (information about pronunciation).
4 out of 7 agreed that while they prefer targeting specific words, translating the whole message would also be convenient- and that the ability to communicate is more important than language learning.

"It would be useful for foreigners living in foreign countries, locals who want to speak with foreigners, and language learners."
‍- L, Japan, 22 
"Translating feels like a chore, when it shouldn't. If an in-app translation feature existed, it would save me time from having to go back and forth between multiple websites and apps."
- S, Canada, 29
“Even as an advanced Japanese learner, sometimes there are words I don’t know, or days when I don’t feel very confident with my Japanese"
- M, 30s, Japan
"I translate to check my understanding cause I don’t trust my Japanese, and most of the time I’m just too lazy to read all of the characters.” 

- G, Canada, 25

Define

Affinity Map, Persona and Storyboard

I then created an affinity map below to help me visualize and identify similarities across the participants. Synthesizing my findings, I built a persona: Jake, and drew a storyboard with him as the main character to guide my next steps.

A snippet of my affinity map. Click on the image to view the full version.

Storyboard Context: Jake is relaxing watching a movie when he receives a text message in Japanese from his friend. He is an advanced Japanese learner, but experiences times when his Japanese "feels off" and forever considers himself a learner. He also likes to double-check his comprehension to avoid misunderstandings

Project Goals

After, I brainstormed the goals of the business, user and technical side, as well as technical restraints. Doing so allowed me to picture the overall vision of the end product.

Site Map

I could now start thinking about what pages the website would contain. I mapped out the pages and listed the rough details of each page as well.

Ideate

Hi-fi Wireframes and Wire Flow

Due to time constraints, I dove straight into creating high-fidelity wireframes. I checked the LINE UI guidelines and continuously referenced the LINE app on my phone to ensure my designs were consistent with LINE's branding. I then took the screens I made and arranged them into a wireflow. This was extremely helpful in helping me organize and visualize the user flow before moving on to prototyping.
‍

Prototype & Test

Responsive Prototype

Once I finished wireframing, I made a clickable prototype based on my wireflow. Check out a preview below!

Usability Test

Now it was time to test the prototype! I asked participants to conduct tasks based on three scenarios to uncover whether the prototype met their expectations. View the full test outline here

Once again, I organized the findings into an affinity map to help me visualize the data. There was a lot of positive feedback, as well as pain points and suggestions. I then arranged the suggestions in terms of instances and risk/cost. High priority items were ones that occurred multiple instances across participants. You can check out the full report here.

"You could put the translation button below the messages because it’s more intuitive"
- H, Canada, 26
“It’s very easy to use and consistent with LINE’s functions and visuals.”
- L ,Japan, 22
“Don’t make info bubble clickable. If I want to, I can go to the settings myself.”
- K, America, 26
"It's counterintuitive- you're taking the user away from the goal"
‍- G, Canada, 25

A snippet of my affinity map. Click on the image to view the full version.

Revisions

After conducting the usability test, four main pain points became evident:

Users want onboarding instructions
Although all users were familiar with LINE, and successfully located the translation button for incoming messages, 2 out of five mentioned wanting further instructions, or an animated arrow pointing towards the new feature to make it user-friendly for first time users as well. Furthermore, All users were confused by the information bubble when trying to translate outgoing messages. Most of them didn't read or understand how the message was worded, and thought they made a mistake when they clicked it and it led them to the settings page.
More intuitive translation button
Although all users were familiar with LINE, two mentioned wanting a more intuitive translation button. They wanted to be able to easily access it, without always having to hold and press down on the message.
The translation page was confusing Users found the translation page overwhelming, with too many buttons.
Not all users are familiar with the term, "transliteration". Two users did not know what "transliterate" meant, but understood after they completed the task.

Here were some of the key changes that I made after revisions:

Findings

Edge Cases

In order to account for potential errors, I thought of an edge case.

Translate multiple messages

If there are several incoming messages that the user wants to translate, it may become cumbersome having to click the translation button for each message. In this scenario, the system will detect that there are multiple messages that are not written in the user's default language, and thus give the user the option to translate multiple messages.

Reflections

What I learned

Users may want something, but not be aware of the technical restraints. For example, after conducting user interviews, it became clear that users thought it would be really nice if they could highlight specific parts of a message. However, after talking to an engineer, as well as looking at other messaging apps, it became evident that messaging apps would first need to introduce a new global feature that would allow users to select specific parts of a message.
Don’t be too ambitious. The goal should be to produce a MVP. When I did my user interviews, people suggested various things such as translating speech to text, selecting specific words and hovering over words which would show translations. Initially expected to create simple feature that would translate incoming messages. As the project grew more complex, I had to take a step back and remind myself that realistically, a new feature wouldn’t be so compound right off the bat. In reality, the feature would have continuous iterations and improvements.
UX is about validating your assumptions, or reevaluating them. Initially, I hadn't considered creating a feature to translate outgoing messages as well. But after user interviews, I learned that users also wanted that, and so I adapted my project moving forward.

Challenges I faced

There were two target demographics for this feature: advanced language learners, and beginner language learners/those with knowledge of the second language in question (in this case Japanese). However through my user interviews, I was able to determine that the goal to communicate was most important, and that language learning geared tools (such as transliteration) were "nice to haves"
There were a lot of technical restraints to consider and work into this project. This helped me reshape my design process, and it was very insightful to speak with engineers who also enjoyed chatting about my project!

What I would have done differently

When I first started this project, I was coming from the biased perspective of someone who is an advanced learner of Japanese. However, needs and pain points differed based on the user’s level of Japanese. Due to time constraints, I interviewed people with differing Japanese abilities. However, everyone agreed that the priority was a communication tool over a more detailed language learning tool. That said, if I could do this project again, I would have followed a more narrow criteria for interview participants such as "only beginner-intermediate Japanese learners", etc.

Next Steps

Conduct another usability test to confirm whether users pain points users were effectively resolved.
Incorporate a feature that allows you to select and translate specific parts of a message
Check the accuracy of translations (technical restraints)