WhatsApp Translation is an added feature that allows users the ability to translate received and sent messages so users can stay even more connected across the world without leaving the app platform.
Role: UX/UI Researcher and Designer
Duration: 80 hours
Tools: Sketch, Whimsical, Marvel
Team: Self Directed, with Guidance from Mentor
PROJECT BACKGROUND
The idea for this project surfaced one day while I was copying and pasting a text from WhatsApp to Google Translate. I had been doing this for so long that I even developed muscle memory for this action! Being that I am a UX/UI designer I knew there had to be a better way and I was looking forward to researching this further.
PROBLEM
WhatsApp is one of the easiest ways to stay connected to anyone anywhere in the world. It is completely free and identifies each user by a phone number eliminating the need to search for usernames. WhatsApp clearly makes an effort to constantly improve features keeping it the most used messaging tool in the world. That being said, how is it possible that there is no way to translate messages without leaving the app? I began speaking to people about their experiences and found that others were having the same problem.
SOLUTION
WhatsApp Translation is a feature that is built into the WhatsApp app and can be used to translate incoming and outgoing messages within a conversation. Also included are some bonus learning and editing tools such as the ability to save words for further study, highlighting specific text for direct word to word translation, and audio playback for pronunciation.
I began this design challenge by setting up my allotted time of 4 weeks on Trello. As I do with every UX design problem, I divided my process into five general sections. Then under each section I listed all the concrete steps I needed to take to complete that section of my process. Where I could, I listed the type of outcome and deliverable I would create so that I had physical tasks to work towards. I also set deadlines for each task by working backwards from my final project due date. I used the dates as a rough timeline to keep myself on track.
1.
EMPATHIZE
Research Plan
Once I got my timeline organized I was ready to start the design process. I drafted a research plan to organize my goals and methods and define my participants.
Research Goals
Analyze messaging apps that have translation features
Analyze translation keyboard differences
Define target users
Explore methods WhatsApp users are using to translate
Discover any user pain points with translation keyboards and/or translation messaging platforms
Identify if users would benefit from translation feature in WhatsApp
Market Analysis
Market research and statistic analysis show that WhatsApp is the most popular app in the world and is in the number one spot for global messenger apps with 200 million more users than FB Messenger. That being said, it is a wonder that WhatsApp does not have a translating feature.
Interviews
I conducted four in-depth interviews with individuals living in Israel who need to interact on a daily basis with people who speak English, Hebrew, and Arabic. The interviews revealed that currently iPhone users are copying and pasting into Google Translate to translate messages. Android users are unaware that they can set up Google Translate as a shortcut within the WhatsApp app and even when trying to do so, are unsuccessful. One Android user reported success using the SwiftKey keyboard that uses Microsoft Translator software to translate messages.
Competitive Analysis
After performing a competitive analysis on keyboards with translation features I learned that iPhone users can’t benefit in the same way that Android users do when using SwiftKey or the Google Translate shortcut.
Currently the best option for iPhone users is to download external keyboards such as Gboard (Google Keyboard) or iTranslate. The problem with these options is that external keyboards have a different feel than what IOS users are accustomed to. For example, there is a gear icon to change languages and instead of the return key there is an arrow and period. With iTranslate, there is no autocorrect making it quite frustrating to type anything
I also analyzed two messaging applications that are specifically meant for translating. Slatch has a really informative tutorial. A user can translate any message both incoming and outgoing by tapping the message. More options can be accessed when holding down on the message. Viber uses Google Translate to translate messages but you can’t translate outgoing messages. It also only limited to a number of languages and is not completely free.
Summary
From my research, I concluded that there are actually two opportunities here for UX design. One would be adapting the IOS keyboard to include a translation feature. The other would be to build a translating feature directly in WhatsApp. Since this project started with my frustrations in WhatsApp I chose to go with the latter.
2.
DEFINE
Empathy Map
I translated the data I acquired through the above research methods into an empathy map. I reviewed each participant’s responses and organized them into categories. This tool helped me to understand my users needs. The categories included Doing, Thinking/Feeling, Hearing, and Seeing. I also included users pains and gains. From there, I was able to find patterns which were translated into insights, helping me define the user’s needs.
Insights
Users don’t always understand every word in a text message they receive from people who speak a different language than them.
iPhone WhatsApp users are frustrated with the extra step of copying and pasting into another app to translate for either incoming or outgoing messages.
Users want to be able to send messages to a recipient in the recipients primary language without copying and pasting.
iPhone WhatsApp users that use Gboard report it not having the same feel as the IOS keyboard that they are used to.
All WhatsApp users that use Gboard for translation say they still have to copy and paste to translate incoming messages.
Needs
Users need a way to translate received messages that they don’t understand without using an external keyboard..
Users need a more fluid and faster way to translate incoming and outgoing messages.
Users need to be able to write messages in their primary language and have it translated to their recipients primary language.
iPhone WhatsApp users need a method of translation that uses the IOS keyboard.
Users need a faster way to translate incoming messages without copying and pasting
Persona
Let’s meet Ben! Ben is the reference point that I used throughout the project in order to create user centered design. I created Ben to help me better empathize with the target user. Ben’s persona is based off consistent and relevant data collected from my research.
“ I use WhatsApp all the time to stay in touch with family, friends, and business partners. ”
Ben is 30 years old and recently moved to Israel from Los Angeles with his wife and son. His primary language is English and he also knows some Hebrew from years of learning it in school. He has many friends and co-workers who speak mostly Hebrew and while he understands most of the conversations he has, there are occasions where he doesn’t understand as well as he would like to. He is always looking to improve his level of reading and writing Hebrew and has therefore enrolled in language classes. When Ben isn’t working you can find him at home with his family, getting drinks with his friends, or searching Amazon for the best deals.
Being that Ben speaks English fluently, he is well sought-after by companies in Israel who are looking to expand their market across the sea to the United States. Ben is a fast learner and a really great problem solver. He is good with technology and can recover any lost file. He has an Android phone and an Apple computer so he is well versed in both operating systems.
Ben uses WhatsApp all the time to stay in touch with family, friends, and business partners. He currently uses the copy and paste method to translate words in messages that he doesn’t understand. When given alternative translation methods such as the Google shortcut, he strongly felt there had to be a better way that was more intuitive.
Ben still hasn’t found a successful, fluid, and easy way to translate messages without interrupting his conversation flow. As mentioned earlier, he is taking Hebrew classes and now finds himself interested in translations not solely for the purpose of communication but to sharpen his language skills.
Goals / Needs
Wants an integrated way to translate messages
Wants to communicate with Hebrew speakers
Needs a tool that won’t add unnecessary time
Pain Points
Too many steps
No solution solves all problems
Interrupted flow in conversation
Motivations
Better communication
Improve language skills
Foster better relationships
Defining the Scope
To add a seamless translation feature to WhatsApp for the IOS operating system that allows for translation of incoming and outgoing messages. Bonus feature: To implement language learning tools.
3.
IDEATE
Next step was the ideation phase in which I began planning the interactive structure of the app.
Product Roadmap
First, I created a product roadmap to determine which features to include when building the app. I prioritized features based on how critical they were to the goal of adding a translation feature to the WhatsApp interface.
Translate received message
Translate sent message
Play audio of message
Select word for direct translate
Remember word for further study
Menu Navigation
Next, on Whimsical, I created a site map of just the items that would need to be added to the settings menu to support the translation feature. This would include a Language tab and a Remembered Words tab.
Task Flow
Then, I created the map below which shows the tasks that are available to the user from the chat screen of any WhatsApp conversation. The map displays what happens when a user taps once, twice, or holds down an individual message.
Tapping once is a new feature that will enable the user to switch between languages on sent and received messages.
Double tapping or holding down on a message will display a similar menu to the current menu with an added selection option that will allow users to remember, lookup, or copy a specific word or words.
I also removed the info and reply options as that can currently be accessed by swiping right or left on the message respectively.
User Flow
Finally, I mapped out the two possible user flows a user would encounter when using this feature. Creating a map like this helped me to remain user centered when designing each individual screen of the prototype. For this user flow it was crucial that I not only thought about the user flow for received and sent messages but that I also considered the language background of each user involved.
As the key states, green segments are part of the sending/sent message flow and lime green segments are part of the received message flow.
Ben can either send a message in a language he knows how to speak and/or write in.
Ben can send a message in a language he does not know at all.
4.
DESIGN
IOS Functionality
I did a short study on Apple’s Accessibility Guidelines so that I had a better understanding how to apply consistent IOS functionality for increased user predictability and learnability.
WhatsApp Brand Message
● Global Communication
● Real Time
● Reliability
● Connection
● Sharing
Low-Fidelity Sketches
Sketching a few different versions helped direct me towards designing better wire-frames and prototypes.
Received Messages Version 1
Here, the user translates the message from the thumb-menu and enters translation mode which then allows the user to play the message and or change the language. There is also a shortcut to Google Translate. (I removed this later because I didn’t want the user to have to leave the app or rely on Google Translate at all.)
If the user selects a word, a sub thumb-menu appears with the options to copy a selected word or words, remember for future reference, and get alternative translations if the current translation isn’t enough. (I tried this idea in a tab layout and then decided to return to this design with the only difference being a horizontal vs vertical menu)
Received Messages Version 2
Version 2 removes the Google Translate shortcut, replaces it with a highlighter icon in case the user doesn’t know they can select specific words. If the user selects the highlighter icon they enter “edit mode” and the copy and remember icons are now active and can be used to select, copy, and remember words.
Sent Messages Version 1 & 2
The Sent Message Versions 1 & 2 are equally acceptable options that if allotted more time would each be tested for usability preferences.
Version 1
This version is similar to Google Translate where the user types and can see their message on the opposite side. Languages can be detected and or selected from a menu.
Version 2
This version takes a top bottom approach where the text being typed is below an an actual preview of what the message will look like when sent. The low fidelity wireframe follow these two approaches while the final prototype is yet another approach that will be explained later.
Low-Fidelity Wireframes
The low fidelity wire-frame here was designed based off the version 2 of both sent and received messages.
Here is a prototype used to briefly test the low-fidelity wireframes.
High-Fidelity Wireframes
For the high-fidelity wireframe I made a few tweaks including a thumb nav when selecting a specific word. There was so much back and forth with selecting a specific word because WhatsApp currently doesn’t allow a user to select a specific word in a message. Therefore, I had to assume that a user wouldn’t know that that capability was available.
To address this I tried two options:
I made the highlighter icon an editing mode
I made a tabs on the message itself. The tabs include different states include reading, highlighting, audio, and exit mode. This can be seen in the prototype below.
Received Message
Here are the wireframes for a received message that uses the highlighter icon to enter the edit mode and select words to copy and remember.
Sent Message
Here are the wireframes for both versions of sending a message.
5.
PROTOTYPE
Initial Prototype Mockup
This prototype is the version that was used during testing. It uses the tabs on received messages to distinguish between the different states including reading, highlighting, audio, and exit. For sending a message, it uses the top bottom translation where the user sees their message above the text input box. I used Marvel to build this full user flow prototype
6.
TEST
Usability Testing
Once my prototype was ready, I recruited potential users to test it out. I was able to find 5 users 4 males and 1 female all in their 20’s and 30’s. All tests were conducted in person and each test averaged about 20 minutes.
Tasks
Translate a received message
Send a translated message
Find the meaning of the word קשה
Remember or copy a word
Enter and exit the translation mode
Results
I sat next to each user and marked down feedback as they were moving through the prototype. Below is a summary of the input i received.
Insights
All users were excited by the idea of a translation feature and were surprised it didn’t already exist.
One user stated “This is so cool! Wait, you designed this? I can message all my colleagues that speak Spanish!”
Most users were confused about the purpose of the editing tab, they felt it was overwhelming.
One user voiced that the sent message felt more integrated and fluid than the received message.
Recommendations
There should be an more obvious way to show that text can be translated
Replacing the editing tabs with something more simplistic
Have the message translate after it has been sent
Switch more easily between translated and original language instead of an on/off or enter/exit mode.
7.
ITERATE
Full Revision
The feedback I got let me know that the tabs systems was overwhelming and likely unnecessary. Therefore for this next version I eliminated the tab menu, made the ability to translate just a simple tap away, and used flags to connote language. Sending a message is as simple as selecting the language and typing a message without the busyness of seeing the translation.
The icon for language would always be visible on the screen so that users know this feature is now available.
Final Prototype
This prototype includes the entire user flow from translating a received message to sending a translated message,
SUMMMARY
Reflections
I really enjoyed this project because I had the opportunity to make something great even greater. I find this to be a really hard thing to do as many times people look at great and obvious inventions and wonder why they didn’t think of it on their own. I’m sure others have thought of adding a translation feature to WhatsApp before but I m grateful to have had the opportunity to be proactive about it. I had a lot of fun and was motivated to iterate because I didn’t want this to just be an idea, I want this to become a reality to help myself and users across the world stay communicate and understand each other better.
Next Steps
Test new prototype
Explore built in IOS keyboard translating feature
Expand on audio feature
Consider WhatsApp Desktop
Address ability to edit message that was already sent but not translated properly
Translating voice notes
Translating during audio phone conversation
Continue to test & iterate
Challenges
With this project I felt that one of the most challenges aspects was working within an apps branding guidelines. This forced me to explore user learnability and predictability. I also know that my goal is to work for a great company and therefore I will have to know how to work within a structure, so I am happy I got that experience here.
Some of the frustrations I had were with prototyping because it was difficult to truly test functionality. Even after explaining the limitations of the testing prototype, my users reported that the app felt so real they were confused when they couldn’t use the keyboard to type a real message.
Lessons Learned
For this project I created so many versions and iterations of flows, sketches, and wireframes to truly nail down a polished product. The reason for that is because further along in the UX process I had concrete explanations and reasons as to why things worked and didn't. I was also able to explain to my users why suggestions they had that I implemented either worked or didn’t work creating user awareness and better feedback.
This project and the content presented here is speculative and for educational purposes only. I am not affiliated with WhatsApp.