ViaGem app — language learning through travel
ViaGem app icon

ViaGem

UX Research · Interaction Design · Visual Design Adobe XD · Illustrator Solo Spring 2020

The Problem

Language-learning apps are abundant, but the resources that teach Brazilian Portuguese to English speakers are far outnumbered by Spanish-learning equivalents. Learners who do find resources face a second problem: the tools are scattered. Podcasts live in one app, flashcards in another, grammar references somewhere else entirely. The fragmentation makes the process feel harder than the language itself.

My own experience made this concrete. In 2019 I traveled to Brazil on a Skyline College study abroad trip for Cultural Anthropology. The vocabulary I had learned in formal courses was largely useless in the field. I needed something faster, more contextual, and all in one place.

The design question: how might one app let learners practice, find native-speaker connections, and access the tools they actually use — without switching contexts?

Research

15 Interviews
3 Competitors analyzed
27 Survey responses

To understand what language learners actually needed, I conducted interviews with fifteen people: contacts made during the 2019 Brazil trip, Brazilian drivers I worked with at Uber who came in for app assistance, and English speakers learning Portuguese from the Bay Area and Southern California. I ran surveys to compare the experience of the three learner types I kept encountering: Lusophones (Portuguese speakers learning English), Anglophones (English speakers learning Portuguese), and Hispanophones (Spanish speakers navigating the overlap between Spanish and Portuguese). I also analyzed three dominant apps — Duolingo, Google Translate, and Anki — to understand what users loved, what frustrated them, and what was missing entirely.

The strongest finding from interviews: difficulty understanding native speakers was the most common pain point, cited by 40% of participants. The least common issue was lack of access to native speakers — meaning people knew connections existed but couldn't organize the experience around them. Sixty percent of learners wanted to learn specifically to travel and explore other cultures. Among Brazilian participants, 92% said they wanted to travel abroad and identified English competency as the barrier.

Difficulties Learning a New Language

The competitive analysis focused on three apps that came up repeatedly in interviews: Duolingo, Google Translate, and Anki. The goal was not to benchmark features abstractly but to understand what the existing market had already proven people wanted — and where it consistently fell short. Duolingo was the most cited, chosen for its status as the most-downloaded language app and its range of teaching methods. Google Translate and Anki represented the two other dominant patterns: instant lookup and spaced repetition.

Duolingo

Pros

  • Gamified and engaging
  • Free tier, widely available
  • Structured lesson paths

Cons

  • Brazilian Portuguese underdeveloped
  • No real conversation practice
  • Repetitive drills lose context

Google Translate

Pros

  • Instant, always-available translation
  • Voice input and camera modes
  • Works offline

Cons

  • No learning scaffolding
  • No retention or review tools
  • Context-free output

Anki

Pros

  • Powerful spaced repetition
  • Highly customizable
  • Large community deck library

Cons

  • Steep learning curve
  • No built-in content
  • No social or conversation features

Apps mentioned by interviewees — analyzed for feature gaps, user reviews, and teaching patterns.

Three learner archetypes emerged consistently across interviews and surveys. Rather than collapsing them into a single persona, I kept them distinct — the goals and frustrations of a Lusophone learning English are meaningfully different from those of an Anglophone learning Portuguese or a Hispanophone navigating the overlap between Spanish and Brazilian Portuguese.

Everton Silva

Everton Silva

Lusophone — Learning English

Goals

  • Talk to customers at work
  • Travel to the U.S.

Pain Points

  • Can't organize books, podcasts, and resources
  • Gets bored easily when studying
Jackie Wagner

Jackie Wagner

Anglophone — Learning Portuguese

Goals

  • Teach English in Brazil
  • Travel to Rio

Pain Points

  • Doesn't know where to start
  • Can't find interesting Portuguese content
John Guzman

John Guzman

Hispanophone — Learning Portuguese

Goals

  • Guide study abroad students
  • Grow side business in São Paulo

Pain Points

  • Mixes Spanish into Portuguese without realizing it
  • Apps feel too complicated

Ideation

The research told me who I was designing for, what they needed, and why. The design process moved through four stages: sketch, user flow, wireframe, UI.

I started with paper sketches to establish the main screen's visual hierarchy — how much information to show at once, where navigation should live, how columns and rows could be swiped in multiple directions to keep the surface clean. The constraint I held throughout: no more than five options visible on any screen at a time.

Initial skeleton sketches establishing the main screen hierarchy
Initial skeleton sketches establishing the main screen hierarchy.

User Flow

I mapped the full travel-and-meet journey to surface what features would actually matter at each stage — from the initial idea of traveling to meet native speakers, through searching and accommodation, to arrival and learning on the ground. The map covers user goals, emotional states, problems, and feature ideas across five stages.

Journey map across five travel stages, applied to all three learner archetypes
Journey map across five travel stages, applied to all three learner archetypes.

Wireframes

Low-fidelity wireframes came before color or typography. The goal was to validate layout decisions with language learners before investing in visual design. Testing at this stage confirmed that the card-based, swipeable structure worked for the core use cases and that the pronunciation module needed to be more visually distinct from the vocabulary section.

Low-fidelity wireframes, Adobe XD
Low-fidelity wireframes, Adobe XD.

Visual Design

The name ViaGem comes from the Portuguese word for trip or travel. The concept began as a hidden-gems travel app — a way to connect people with locally approved places — and evolved into a language-learning tool when I realized that travel and language acquisition are the same desire expressed differently. The background of the app is designed as a slowly rotating animated globe. The gem-cut Earth icon in the logo holds both ideas at once.

Color palette, typography (Museo Sans Rounded), and brand system
Color palette, typography (Museo Sans Rounded), and brand system.

Light and relaxing colors were chosen deliberately. Research on language anxiety informed the palette: a 2008 Baker and MacIntyre study found that anxiety affects advanced speakers as much as beginners. Green and blue dominate the interface because they test lower for stress association than warm or high-contrast schemes. The rounded sans-serif reduces the formality that makes grammar study feel like homework.

UI Design

Bilingual onboarding screens
Language selection screen
Bilingual onboarding and language selection.
Dashboard screen
Language partner discovery screen
Content feed screen
Dashboard, language partner discovery, and content feed.
Side navigation panel
Voice translation mode
Sign-in screen
Side navigation panel, voice translation mode, and sign-in screen.

The central design decision was to address the biggest pain point — disorganization — by making every tool accessible from a persistent side panel. At any point in the flow, the user can reach the translator (for immediate real-world situations), their profile and settings, or their lesson history. The translator is always one gesture away. Color-coding prevents accidental exits.

Loading screen 1 with language fact
Loading screen 2 with language fact
Loading screen 3 with language fact
Animated loading screens delivering quick language facts to maintain engagement between sessions.
Information architecture showing bilingual app flows across user types
Information architecture showing bilingual app flows across user types.

Results

94%

of 30 follow-up interviewees said they would choose ViaGem over existing competitors.

Interact with the prototype →

Reflection

ViaGem was the first project where I ran the full research-to-prototype cycle alone. That meant making every scoping decision myself — including the decision to narrow to Brazilian Portuguese and American English rather than trying to serve all language pairs at once. That constraint made the research more honest and the design more specific.

What I would do differently: the personas I built were grounded in real people I had met and worked with, but the pain points I extracted from interviews were too general to drive genuinely surprising design decisions. The data pointed toward features any language-learning app would contain. The more interesting finding — that learners wanted to organize their existing resources rather than replace them — was there in the interviews but I resolved it too quickly into a feature list rather than sitting with it as a design tension.

The follow-up project I eventually want to build, TalkLot, came directly from what ViaGem left unresolved.