Background:
Globally Translate is a translation app that allows users to translate as well as use maps while traveling. When traveling, users can use the camera scanner to detect items and translate them into the language of their choice. They can also use the map to get directions to the location, as well as translate the buildings, stores, and signs.
Project Goals:
My goal for the project was to understand what users might want and need in a translation app while traveling. I wanted to make an app that helps with typical daily tasks while traveling. The use of translation applications can effectively break down language barriers and ensure that speakers of various languages can communicate with one another.
Design Process
Research
Research Goal
My research goal is to comprehend and discover users' desires, needs, and frustrations when using a translation app while traveling. Because my app includes a travel and translation feature, I'd like to learn about their typical travel process and how the translation app can assist them. Following that, I'd like to decide what features to include in the app based on what features users typically use while traveling.​
Shall We Look At The Competitor Analysis?
When compared to one another, iTranslate, Microsoft Translator, and Go Translate each have their own set of strengths and weaknesses.
​
While they are not a travel translation app, the app itself can be used for traveling and having a conversation with someone who speaks a different language. All of the direct competitors have the necessary features to assist users in translating words into another language, whether via microphone, camera, or keyboard.
Let's Understand the Users!
I conducted six interviews with people who frequently use translation apps when traveling.
​
When asked which translation data input method the participants use the most when they travel, they answered that they use camera/scanner translation the most.
All 5 participants (83.3%) selected camera/scanner translation as a data translation data input method they use the most.
Most participants think this is important when using a translation app:
ACCURACY
OFFLINE ACCESS
EASY ACCESS
USEFUL FEATURES
CAMERA SCANNER
Based on all of the responses, I noticed that many people would ask for help getting to a location.
Some participants, however, stated that they would like to figure out how to get to the location before seeking assistance. This includes everyday tasks like reading food menus, attempting to read signs, and reading object descriptions.
I started to research other Map Apps:
I got some ideas from Apple Maps and Google Maps while analyzing them. There were a few flows and features from each app that I wanted to incorporate into Globally Translate because of how simple it is to navigate to a location.
​My Goal after User Research
My goal for this project is to assist users in using Globally Translate in a variety of other ways while traveling. During my user research, I discovered that many users enjoy using the camera scanner when traveling or performing any other general activity that requires translation, such as reading a menu in another language. Another issue that users have is that they want to ask other people about the destination and how to get there when they are traveling. They would usually prefer to figure it out for themselves before asking about the destination, which is why I decided to include the map feature.
Define
Who is Alex Lopez?
Alex Lopez is a user persona created based on the goals, needs, and frustrations of the participants. He enjoys traveling and prefers to arrive at his destination without much translation assistance from others.
Sitemap
The homepage displays all of the features that are required based on the user's situation.
_edited.jpg)
Task Flows
There are two task flows: getting to a location using a map and translating/detecting the language/object using a camera/scanner translation.
.png)
User Flow
The user flow depicts the path that users could take to complete the two tasks.
Design
Logo
In the beginning, I created a lot of logos for Globally Translate. With the assistance of my mentor and friends, I was finally able to choose the logo. I chose this logo because most people said it's clear that it's a translation logo.
Color Palette
I picked various shades of green. I chose the color green to represent a serene and energizing travel image. Green is a color that is found all over the world, so I thought it would be ideal for the Globally Translate App.
.png)
Mid-Fidelity Wireframes
I created mid-fidelity wireframes after sketching some possible low-fidelity wireframes. The first line depicts the homepage as well as the path to the camera/scanner translation. The map to get to the live view is shown in the second row. I researched other map apps to learn more about them while creating the mid-fidelity wireframes.
Hi-Fidelity Wireframes
As I added more information, I had to change a few things to make the flow easier for the users. I was going to use orange as the CTA color at first, but I noticed how it clashed with the green color, so I just used different shades of green.
Test
Onto Usability Testing!
Now that high fidelity and prototype is ready, there are two tasks I’ve asked the participants to finish.
Task 1
Camera Scanner
You visited Japan but don't speak the language. You're out shopping and have no idea what you're looking at. To detect the object, use the camera.
​
​
Task 2
Map
You want to use the map to navigate to the next destination, which is an attraction. However, you are unsure of which attraction to visit. Please continue.
You want to go to Tokyo Tower because it's nearby and a popular tourist attraction in Japan. Please continue to learn about Tokyo Tower and begin navigation when you are ready.
During the walk, live view navigation provides real-world directions. To get directions to your location, select the live view.
After Usability Testing
Based on my observations and the feedback from the usability testing participants, I made a few adjustments that were of the utmost importance. Here's what I changed:
Homescreen
Before
.png)
Problems: Misclicks were common among users looking for the camera icon. A participant also asked what the distinction was between chat and conversations. The more I looked at it, the more confused I became.
After
Solutions: I changed the dictionary/phrases to camera after some users pointed out that they first looked at the navigation bar when looking for the camera icon. I changed the chat to message and the conversation icon to make a clear distinction.
Location Page
Before
Problems: According to the heatmap path, the majority of people clicked on the "see all photos" button before the "Directions" button. A participant suggested adding an icon for "directions" to make it more visible and consistent.
.png)
Before
Problem: There is no button to view additional reviews.
After
.png)
Solutions: I switched the “Directions” tag with “See all photos” button. I also added an icon to “Directions” button.
After
.png)
Solution: I added the “See All Reviews” button.
Route Method
.png)
Before
Problems: When asked to use the walk method, four testers deviated from the expected path. They chose the walk method by clicking on the map route rather than the transportation method section.
.png)
After
Solutions: By adding a heading under each icon, I made the transportation method more visible and accessible.
Final Takeaways
I observed how crucial the positioning of CTAs and buttons is for accessibility. I observed throughout the user testing how the positioning of the button can affect whether users are able to complete the tasks. I also noticed that where the icons are located on the navigation bar can affect whether users are able to complete their tasks. I have realized that it's crucial to distinguish between meanings clearly when using words and certain types of images. I've seen users abandon a task because they couldn't find the feature or button they were looking for.
Next Steps
If I had more time, I would conduct more research directly on the map, because when users were asked to find the fastest route, they naturally clicked on the routes on the map rather than the navigation button.
.png)
