TripLingo

Project Overview

TripLingo is a mobile app that helps travelers stay safe, productive, and savvy during international trips with a suite of tools designed to help them navigate the language and culture with ease. TripLingo is marketed as the "ultimate tool for international travelers" - it helps you learn essential phrases, instantly translate your voice or connect to a live translator, get a crash course on the local culture, and so much more.

My Contributions

I joined TripLingo as a JavaScript mobile developer. I worked side-by-side with the creative director and a small engineering team to build the user interface of the application. Most of our efforts were spent on adding new features to the application and partnering with other companies to white-label the product. TripLingo was strictly a mobile app experience, but I often wondered what it would be like if we took the product to the web.

1. Current State - Mobile App

My approach for designing the web application was based heavily on the TripLingo mobile app. Since I had a hand in developing the app for both iOS and Android, and I naturally became familiar with all of the product's features and services.

After logging in and selecting a destination, the user is taken to a dashboard view where they can access TripLingo's suite of tools. There is a variety of language learning tools including flashcards, a voice translator, and the slang slider — a tool that provides four different variations of a given phrase. Additionally, the culture notes guide helps users avoid faux pas and teaches basic etiquette about the selected country or region.

Below are examples of these various tools and views in the pre-existing mobile app.

**Figure 1.0** - The mobile app login, select destination, and dashboard views

**Figure 1.1** - The mobile app phrase list, slang slider, and flashcard views

**Figure 1.2** - The mobile app translator, culture notes list, and culture notes expanded views

2. Login & Sign Up

The login and sign up workflow is fairly straight forward and follows the standard established by many other applications and user mental models. In my design, half of the viewport is dedicated to the login/sign up widget. The other half of the viewport is reserved for an image slideshow of historic and well-known landmarks. The goal of this slideshow is to get prospective users excited about traveling to foreign lands and visiting these various places while using TripLingo as a virtual travel guide.

3. Destination Selection

After signing up, the user is presented with a list of country/language options and a world map. Selecting any destination will zoom the map to the corresponding selection. This interaction is meant to give the user an idea of the geography of where they could go in relation to where they might be currently located.

**Figure 3.0** - The "Select a Destination" page with the world map

**Figure 3.1** - The "Select a Destination" page in a selected state

4. Dashboard

The mobile app provides a plethora of language learning tools, but the benefit of these resources can only be fully realized when used in a real world setting. Besides tracking a user's language learning progress, I wanted to use the dashboard as an opportunity to focus more on the "Trip" part of TripLingo. TripLingo could potentially integrate with other services, such as Scott's Cheap Flights and Airbnb, to deliver ways to help a user book a trip. The business could then negotiate to receive a referral fee for each click-through or successful booking. By encouraging travel, we are both promoting the usefulness of the app toolset and also generating additional revenue streams for the business.

5. Learning

The slang slider uses the mobile operating system's native slider to translate a phrase four different ways through the swipe of a finger. Although this feature is both fun and intuitive on a mobile device, swiping on a desktop browser is less natural and quite cumbersome. Instead, I decided to utilize a tab group to allow users to toggle between various slangs and translations. A "Phrase of the Day" was also added to encourage users to visit the page on a daily basis.

For the flashcards, I restored the index card look that was used in previous versions of the app. This visual treatment seems to align more with a user's mental model of an actual flashcard. I also added the ability to shuffle the cards and a switch to toggle between displaying English or the foreign language on the front and back sides of the cards.

**Figure 5.0** - The "Learning" page with the "Phrases" subsection active

**Figure 5.1** - The "Learning" page with the "Flashcards" subsection active

6. Tools

Under the hood, the translator feature is powered by Google Translate. The ability to speak or type an input and output a translation is essential. Below the translator is a section that breaks down each portion of the output by dictionary definition, conjugation, example usage, pronunciation, and a thesaurus of synonymns and antonymns. The translation history is also directly accessible on screen; it's somewhat of an Easter egg on the mobile app.

**Figure 6.0** - The "Tools" page with the "Translator" subsection active

7. Culture

The culture notes are treated similarly to a Wikipedia page. The notes have been regrouped into overview, business, politics, education, dining, and safety categories. Contextual images from the destination country are used to break up the content and to make it more digestible.

**Figure 7.0** - The "Culture" page with the "Overview" subsection active

8. Next Steps

For next steps, I would want to convert the remaining tools for the desktop experience. Some things I've yet to explore include the wordbank, quiz mode, audio lessons, conversions, and tip calculator to name a few. I also would like to take a deeper dive into the "trips" experience on the application dashboard.

9. Credits

Logo Design - James Martin
Photography - Unsplash
Iconography - James Martin
Iconography - iconmonstr