A coffee-country lesson that ties the word tinto to the Eje Cafetero and the everyday act of sharing one.
Back to Projects
Mobile app · Language learning · Cultural design
Que Chimba
Learning Colombian Spanish through culture, character and regional voice.
A mobile-first product that teaches beginners how Colombia actually sounds. Every screen here comes from the current build — nothing is faked.
In developmentVerified live screensRegional voice & practice
Role: Product Designer · UX/UI — product strategy, flows, information architecture, visual design, character and voice, prototyping and mobile QA.
Product snapshot
What is live today.
The scope is designed, not measured. No launch metrics, user counts or conversion numbers are claimed — the product is still in development.
Colombian culture is the learning system.
Every feature is built so a beginner learns how Colombia actually sounds — the phrase, the region and the moment it belongs to, held inside one lesson.
Live experienceProposed concept
40
Adventures
One map of Colombia · A1 to B2
4
CEFR levels
A1 to B2
5
Onboarding steps
Cuenta · Avatar · Tu plan · Nivel · Listo
5
Nav destinations
Inicio · Aprender · Explorar · Practicar · Perfil
Role
Product Designer · UX/UI Designer
Platform
iOS & Android · Mobile-first
Status
Live prototype · in development
The problem and the opportunity
Learners can know the words and still not understand Colombia.
Most apps teach one standardized Spanish, so a beginner can memorize vocabulary and then freeze the moment a real Colombian speaks at natural speed.
The opportunity is context-first learning: regional voice, cultural meaning and a character guide that make authentic Colombian Spanish approachable from the very first lesson.
What standardized apps teach
- One neutral, textbook accent
- Formal, written phrasing
- Vocabulary lists and drills
- The same script for every country
What learners actually face
- Native speed and natural rhythm
- Regional slang and local expressions
- Accents that change city to city
- Confidence, context and cultural meaning
Design principles
Four principles that shaped every screen.
Each one answers a specific beginner problem and traces back to concrete interface decisions in the live build.
01
Principle 01
Culture is part of the lesson
A phrase without context is just a translation. Every lesson opens with where the expression comes from, who uses it and when it fits.
02
Principle 02
Hear before memorizing
Regional rhythm is the hardest part of Colombian Spanish, so audio leads and the written form follows as support.
03
Principle 03
Guidance without overload
Two guides split the cognitive work — one motivates and gives context, the other clarifies — so help arrives exactly when a learner is stuck.
04
Principle 04
Progress should feel joyful
Hearts, XP, a daily goal and warm character reactions turn small daily wins into the reason a learner comes back tomorrow.
The core experience
Four moments carry the product.
Each screens is shown straight from the live build, one per moment, at full device size. Together they are the evidence for how the product behaves.
01
Guided onboarding
Setup becomes the first lesson.
Create-account runs as five short steps — Cuenta, Avatar, Tu plan, Nivel, Listo — so setup feels like the start of the journey rather than admin work.
02
Context comes before recall
Set the culture, then ask one clear question.
A lesson opens with duration, moments, XP and three promises from Sr. Tucano. The first activity asks what a tinto is — meaning lands before memorizing begins.
03
Feedback that teaches
Corrections can be kind and clear at once.
The chosen answer is confirmed, explained in one plain line and celebrated by Sr. Tucano, with a Repetir voz replay control kept one tap away.
04
Cultural discovery
Culture earns its own space.
Explora Colombia collects regional stories, food, music, coffee and expressions with search and filters — culture as something learners choose, not a side note.
Progression
Progression makes the journey visible.
Mi ruta turns the whole course into a map of Colombia. Completed, current and locked states sit in one continuous sequence, so a beginner always knows where they are and what comes next.
01Mi ruta · next adventure
Mi ruta opens on the next adventure and the active level, with the first locked level previewed directly underneath — the map reads as progress at a glance.
02Mi ruta · locked levels
Scrolling further reveals locked levels two to eight, each framed by its own regional artwork — the roadmap shows how much variety and how much distance remain ahead.
Roadmap
0 de 40
- Nivel 1 · Muévete como un local
- Nivel 2 · Primeros intercambios
- Nivel 3 · Historias y regiones
- Nivel 4 · Habla con confianza
- Locked states preview what is next without letting a learner skip ahead.
- One visible sequence turns a whole course into a place, not a list.
- Each locked level carries its own regional artwork, so cultural variety is felt before it is studied.
Culture as content
Cultural extension, clearly labelled.
Three directions that take the live Explore Colombia system one step further. They are high-fidelity proposed concepts — not shipped screens.
A costeño lesson where the phrase is heard, replayed and then spoken back in the learner’s own voice.
Food words and cultural notes sit together, with the English Bridge available where a literal translation would mislead.
Two guides, distinct jobs
Two characters divide the cognitive work.
Sr. Tucano is live in the current build. Mr. Monkey is the bilingual English Bridge, shown as an approved direction board rather than shipped screens. Regional accents remain under ongoing validation.
Live in the app
Sr. Tucano
Cheerful Colombian guide
Motivates and gives cultural context in Colombian Spanish (es-CO).
English Bridge
Mr. Monkey
Bilingual English Bridge
Clarifies meaning in English when a phrase does not carry over literally.
Tone of voice, side by side
Purpose
Motivates · gives cultural context
Clarifies · prevents confusion
Language
Leads in Colombian Spanish
Bridges meaning into English
Message length
One short line of encouragement
One short tip or clarification
Never sounds
Deep or stern
Heavy or academic
The five region switches — Colombia, Antioquia · Paisa, Bogotá · Rolo, Valle · Caleño and Caribe · Costeño — isolate one accent at a time. Voice refinement and speaker validation are still ongoing; nothing here is claimed as production-final.
Iteration, QA & accessibility
Real issues, and the design response.
These problems surfaced while reviewing the build on devices as I iterated. They are design and QA iterations, not a documented user study — no measured outcomes are claimed.
01
Overlapping first-screen text
Rebuilt the screen into a strict vertical rhythm: one headline, one helper line, full-width option rows and generous spacing.
02
Button colliding with the character
Reserved a character safe area and moved the primary action below it, keeping the full pose and a full-width hit target.
03
Logo clarity
Repositioned and rescaled the brand mark so it sits fully inside the safe area and stays crisp on every device.
04
Unclear language choice
Added explicit labelling, including the Español de Colombia badge, so the target language is unmistakable.
05
Unclear audio state
Added visible playing, replay and recording states — Repetir voz, Escuchar frase and a REC indicator.
Accessibility commitments
Body text meets 4.5:1 contrast
Every control is at least 44 px
Focus and selected states are always visible
Every audio clip has a written transcript
Meaning never relies on colour alone
Playback pacing is adjustable
Outcome & next validation
What exists today, and what comes next.
These are design deliverables, not performance results. No user counts, conversion rates or test percentages are claimed, because the product is still in development.
What was learned
- Culture works best as structure, not decoration — it should carry the lesson, not surround it.
- Splitting guidance across two characters keeps every message short and specific.
- Honesty about what is shipped earns more trust than an inflated story.
01
Review each regional accent with native speakers from that region.
02
Test whether beginners understand the language framing before sign-up.
03
Check whether the record-and-listen practice feels clear and fair.
04
Confirm playback, replay and recording states on real devices.
Design System 1.0
A reusable system built from the shipped learning experience.
Every specimen below is drawn from the live product — the same buttons, chips, cards and navigation a learner actually taps.
Foundations
Que Chimba Design System 1.0
Montserrat·Lato·8 px rhythm
Colour tokens
Warm off-white
#FFFDF7
White
#FFFFFF
Deep Navy
#08214F
Navy Ink
#04142F
Colombian Yellow
#FFC61A
Coral
#F04E37
Sky
#2997FF
Turquoise
#14B8B1
Line
#E7E0CE
Ink
#4B4F63
Typography
Montserrat
Display, headings and labels.
Lato
Body and interface copy.
Display / Desktop56 / 60 / 800
Section title44 / 48 / 800
Body / Desktop18 / 29 / 400
Body / Mobile16 / 26 / 400
Caption15 / 22 / 600
Learning components
Primary CTA
Continuar lecciónEmpieza gratis
Yellow fill with a navy label — Empieza gratis and Continuar lección.
Stat chips
53240 XP10 min
Compact white pills for hearts, XP and daily time.
Eyebrow / unit label
Tu próxima aventuraNivel 1 · Primeros pasos · A1
An uppercase label that frames the moment or the unit.
Progress bar
Tu meta de hoy0/40
Warm neutral track, Colombian yellow fill, a visible 0/40 counter.
Level card
A1 · Nivel 1
Muévete como un local
1 de 5 lecciones
A1 · Nivel 1
Muévete como un local
Bloqueado · 5 lecciones
Scenic regional artwork with a level badge and lesson count, plus the locked state used deeper in the path.
Answer states
Un café negro
Una copa de vino
Un chocolate caliente
Ninguna de las anteriores
Default, selected, correct and disabled — the four states every activity uses.
Audio replay
Repetir voz
A yellow replay control beside a bare speaker button.
Type scale
AaAa
56 · 44 · 18 · 16 · 15
Montserrat for display and labels, Lato for body copy.
Colour tokens
#FFC61A · #08214F
Saturated app palette on warm off-white and deep navy.
Radius
4 · 12 · 22 px
Four steps cover pills, cards and full-round controls.
Spacing
8
16
24
32
8 · 16 · 24 · 32 px
An 8 px rhythm drives gaps, padding and stacking.
Navigation & guidance
Bottom navigation
Inicio
Aprender
Explorar
Practicar
Perfil
The five destinations, with Aprender active in yellow.
Character card
Sr. Tucano · guía
¡Muy bien! Supiste qué decir y cuándo decirlo.
The deep navy guidance card, using the live Sr. Tucano asset.
Accessibility
4.5:1 body contrast44 px targetsVisible focusReduced motionClosing
A cultural language product, designed end to end.
Que Chimba shows my full range: product strategy, information architecture, character and voice design, a complete mobile interaction system, and a documented, honest QA process — all built around real cultural context rather than a template.
Product strategyUX/UI designCharacter designVoice strategyPrototypingDesign system
Que ChimbaMonica Saldana, Product / UX / UI Designer
Interactive prototype · In development