Full Spread-01.png

Common Conversations Mobile Translation Application

Project Concept

Common Conversations is a mobile translation app specifically designed to support college students studying abroad. The app helps students communicate common phrases, like asking for directions, while gaining an understanding of the language. The app offers go-to questions and suggests common phrases to respond, and will record what the other person is saying to translate a response. This makes the conversation possible, all while helping the student talk to the locals. For instant communication, the student can simply record their question and the app will match it to the best phrases to use. The app can respond with an audio translation if the user prompts it to, and it offers a large library of complex phrases for students to socialize. With this app students can search specific words like, “bathroom”, and the app will formulate suggestions. By breaking down common questions, students can learn the basics for communicating in a foreign country just by repeated use of this interactive tool. The new mobile app makes it easy to ask a question, view and identify proper phrases to use, and translate a message instantly.

 

Common Conversations is a tool that helps students become more independent while they immerse into a different culture. This app gives students control of these conversations, providing a better overall experience, and an opportunity for students to learn basic language while they study abroad. Common Conversations mobile translator app empowers students to take control of their own learning. This app promotes social engagement and interaction.

Scenario

Imagine you're a college student who has landed in Spain for your International studies course,. You've downloaded the Common Conversations app in order to be able to communicate with locals who speak the Spanish language. while you study abroad. The app will make it easier to ask basic questions and to translate common conversations throughout the day. Common Conversations is a tool that helps students become more independent while they immerse into a different culture. This app gives students control of these conversations, providing a better overall experience, and an opportunity for students to learn basic language while they study abroad.

Design Objective

Common Conversations wants to change travel and give students the tools they need to fully immerse into a multi-cultural opportunity while studying abroad. We want to create a user-friendly experience by simplifying the task flow to execute translation on the spot, on-the-go! 

 “It’s one thing to be able to listen and observe, it’s another when you can truly articulate the message and communicate a response. Even some of the most common conversations are impossible to have in multi-language environments. There’s too much time spent trying-to-translate, and not enough conversation.”

The Challenge

It’s a big task for college students to travel internationally, let alone the added stress of not knowing the language you’re about to encounter. So often we waste time trying to understand each other, we miss out on a natural conversation. What about the simple conversations that get us through a day when we’re in a foreign country? The best educational experience is achieved by fully immersing into a culture to learn and understand more about it. If a student doesn’t have the tools to ask questions or to comprehend what someone is saying, the message is lost and the overall experience can be frustrating.

“I wanted to make it easier for students to talk with people when they travel internationally. I asked students what their common communication problems were when they study abroad and some of their responses were; asking for directions, ordering food, and asking where the bathroom is. With Common Conversations mobile app these questions are being answered and the student is taking control of their own cultural experience by interacting confidently and independently”, said Kristina Robbins, Product Designer.

User Research Synthesis

The designer for Common Conversations conducted a total of 7 user-tests from November 22nd through November 25th, 2018. The tests were sent directly to a specific range of people from students in college, to middle aged adults, to evaluate the overall function of the app and the end-user experience. The test took a maximum of 20 minutes to complete 9 tasks which included step-by-step instructions. The interactive portion was recorded, both screen capture, to document user movements, and audio to capture additional verbal notations and responses.

 

Some tests were performed in person and the other were tasked via email request, and completed the test on their own using the Try My UI online system. The designer’s intent for conducting the test was to collect feedback on function, flow and design. The test was performed to gather any additional comments for improving the overall system and user-experience. Not all features were functioning, therefore specific instructions were provided to bypass initial setup for the user profile screens.

 

Overall, the testers for Common Conversations were pleased with the concept and flow of the app. There was strong and positive response to simplicity and buttons, but some features were found to be unnecessary. There was positive and constructive feedback to help with layout and function to make improvements.

 

Much of the difficulty throughout the testing process came from lack of experience using the testing software. This interrupted the pacing and thought process for some users. The participants who were familiar with the testing software were able to move through the test more efficiently and provided better feedback.

Usability Testing

After conducting the test, we were able to identify a few problems:

  • The color scheme for the buttons didn’t bare any consistency or purpose for the overall look and style. The user was confused about the significance for specific button or category colors.

  • Some buttons, like the search and filter buttons, were not necessary for many of the pages. There wasn’t use for them, no content to search or filter.

  • The tested prototype was embedded into an iPhone design and not Android. (This has been updated since).

  • The categories page needs better function and icons for audio.

  • There was redundancy when it came to specific buttons, too many ways to access or navigate to the same place. The home button was unnecessary on the main page since it was also available in the drop-down menu.

  •  The overall aesthetic was lacking culture and diversity. The user wanted to see more personalization and cultural connection through imagery and/or use of flags. The current aesthetic feels too connected to the classroom.

4 Main Takeaways

After conducting the test, we found the biggest takeaways to be:

  • There was a great deal of confusion in relationship to the color scheme and intention for color applied to buttons and categories. There was a patter of color, however it bared no significance for the overall design, and served no real purpose. It was suggested to have a purpose, or to keep the categories more consistent by using a single color across the different buttons and category boxes. There were multiple areas in the app that had users caught up, looking to identify more meaning behind the random use of color applied to each designated category options, as well as the language buttons.
    It would be better to keep language boxes in the same hierarchy, with the same color.

  •  

  • The search icon as well as the filter button was absolutely unnecessary for most of the pages it was visible on. The design was modeled after the Material Design specs for the Android system, however, there was no direct need to search or filter content throughout the app. The menu button provided the proper navigation; therefore, it was not needed to include the additional features. We ran into some redundancy with finding multiple ways of doing the same thing. The home button after completing a translation was a perfect example of the redundancy throughout the application.
    There was also a way to navigate back home through the menu.

  •  

  • The application layout and design itself was user-friendly and rather easy to navigate. The large icons and buttons captured the attention of the testers, and were felt to have helped the navigation along more smoothly. The overall simplicity in the design made it easy to read and understand., larger scaled buttons, and a clean layout made it easy for the user to follow the assigned task list with ease. The font sizes were legible, placement was visually correct and appealing, and the information was clear and helpful throughout the translation process. Instructions within the application were clear and easy to follow.

  •  

  • The design needs to be advanced. The basic layout and function are good, but the app is missing the cultural aspect which would really connect the user to the desire for this handy tool. There was much conflict about the color scheme and the buttons or categories. Instead of basic color, the design should be advanced using regional flags. This would bring a consistent pattern and structure in architecture to each button, which would improve the user understanding and experience a great deal. Imagery could also be included to advance and modernize the aesthetic, driving the design away from such a technical tool, to a fun and interactive “conversational” piece.

SUS TEST.PNG

User Scores

Overall Ratings

After task session completion, participants rated the site for ten overall measures. These measures include:

  • Frequency of use

  • Complexity of system

  • Ease of use

  • Technical support needed

  • Well integrated functions

  • Inconsistency

  • Easy to learn and adapt to

  • Awkward to use

  • Confident using system

  • Prior knowledge needed

 

What was found from the data, Common Conversations scored a 23 out of 30 points for frequency of use. We learned this tool is one that has a very specific time and place for use. In addition to this score, we found the highest numbers were scored for 26 out of 30 points for the overall ease of use. Most testers scored close when evaluating the overall experience being easy to navigate and use. The next score of 24 out of 30 reflects on the user’s ability to learn the system quickly. There were 10 questions asked in total and the majority of the testers scored fairly close to each other.

 

Task Difficulty_New.PNG
Task Completion_NEW.PNG

Common Conversations Proto-Persona

Common Conversations is a product geared for college students age 21 to 31. The ideal candidate is an 
ambitious and outgoing young individual, single, and fully immersed into completing a college degree. The persona goes into further detail about some if these characteristics we can find in our product's users.

CC Persona-01-01.png

Prototype

There's a few different approaches we've taken, but this one was more about testing. When we started designing we were extremely focused on testing more than layout and design. When we send something out though we have to assume the design is certainly part of the experience so we have to tackle it somewhat. By quickly developing a basic user journey I completed a well developed prototype for our user to try out.

Feedback

The following comments capture what the participants liked most:

Tester: Matt: I thought it was pretty simple and easy to understand. The icons were visible, good format size.

Tester: Marisela: I like how there were multiple ways to navigate to certain things like the audio recorder and translator options

Tester: Marcelo: Easy to use, multiple ways to navigate. Clever idea.

 

The following comments capture what the participants liked the least:

Tester: Rachel: I think the most confusing thing for me was the color of the buttons (for example, on the list of languages) not being the same as each other. Making the buttons different colors made me think that they were somehow different, like one was more important than the other, and I don't think that was necessarily the case.

Tester: Marcelo: I would say the most confusing thing from my entire experience was the edit profile. I was a little disoriented when the task asked me to select "Edit profile" The task assumed the tester knew the "Pencil" icon meant edit profile.

Tester: Alison: I found that the different-colored buttons were a little off-putting and made the layout seem sort of messy.

Tester: Huitzilli: I would have liked more instruction on how the mic function works, it was confusing to follow.

"I really like the concept, but I don't understand the significance for the color scheme."

3 Screens:
Adaptive Designs for Tablet

A few things came in to play when quickly developing 3 screens for a tablet. The user feedback was considered when improving design elements and architecture. Working on a tablet we now have a lot more space, but we want to keep it simple. The challenge here was considering a positive way to incorporate new elements, images, or graphics, and how we could potentially combine multiple pages into a larger screen space without overdoing it. I think we need to really consider hierarchy and color for our layout. The interactive piece is completely different now too. How do we set things up with pop out or fly out window, what does the navigation look like? The designs are simple and manageable. User testing will help advance the designs, again.

Translate-05-05.jpg

1

Translate Screen

This page gives the user the opportunity to choose a language to translate to, then have a combination of two other pages; audio search and categories. The layout is clean and simple with a swipe right to "select" a language and pop-up screen for categories when you click on the image or text.

Greetings-06-06.jpg

2

Greetings Screen

This page gives the user the opportunity to search preset categories for different greetings. This makes it easy for a quick option to translate a common phrase. The screen functions in two separate areas. The right side is where the preset scroll options will be, and the left side carries the "category identifier image" and your current language settings. You can easily navigate back from the left side to make changes to the preferred language as well as to choose another category. The microphone icon and search bar carry over to provide easy access to additional searching methods.

Personalization-07_B-07.jpg

3

Personalization Screen

This screen is where you can customize your profile, upload an image, personalize your information and choose your primary language. The primary language feature set here is the default setting for translation from. Also in this screen you can create new content and phrases while your learn. You can create new categories and complete expand your translation system to offer additional preset suggestions you've created down the road!

"I want to empower students by giving them control of their own learning."

The Challenge

The challenge is a mix of developing ideas from scratch in such a short amount of time and then developing them in just the same. How do we just start throwing out ideas and why? The mindset I'm trying to practice is how to approach a client and make recommendations. In such a developed space, how do we see opportunity? It's key to really know a need before you just start designing. With Common Conversations it was hard to create a full experience with the prototype since I did not have a way to create the audio in Marvel. I really think the entire observation, and research time would have produced a better response if I had audio.. The next biggest challenge was creating tablet screens! This was much to consider in a short amount of time. I had to think about utilizing the extra space to combine multiple pages from the mobile design. I had to be careful not to overwhelm the page with too many things, give the user the tools they need and get it back into testing.

Most Valuable Lesson Learned

The most interesting thing I learned, almost like a light went on and I had a realization; coloring for a purpose. Of course I know about color theory, ut this was interesting to have the testers help me identify how my color suddenly had new meaning, or did it? I was developing patterns because I thought it looked nice visually, however, the users were confused at the significance. Did the blue buttons mean something different than the grey> Why are these categories light blue, and these are a different blue? It's so interesting to really see how people respond to design from a 2D flat perspective, to a very live and interactive design.

Final Video Presentation