# Lingoway — Mandarin built around speaking, tones and repetition > Case study: a self-initiated Mandarin learning concept — sixteen screens, a design system and the decisions behind its teaching model. Source: https://ricardoportfolio.xyz/work/lingoway Language: en --- Lingoway Case study · 02 / 04 · Self-initiated concept Concept Product · Learning · UX/UI # Mandarin for real life. Built around speaking, tones and repetition. A self-initiated mobile learning concept for Mandarin focused on tones, useful conversation and short daily practice — designed from product structure through practice modes. Read the story ![The Lingoway home screen](https://ricardoportfolio.xyz/art/Lingoway%20%E2%80%94%20hero-frame.png) Role Product strategy UX/UI design Timeline 2026 Scope 16 screens · Design system · Learning flows Tools Figma · Prototyping Mobile product design ![Lingoway case study cover](https://ricardoportfolio.xyz/art/Home%20%E2%80%94%20Lingoway-Banner.jpg) 01 — The Problem ## The gap I wanted to explore: language apps can teach content without making speaking feel natural. Every major Mandarin app has a version of this problem. Vocabulary grows. Tones stay abstract. Conversation arrives too late. 01 Tones were isolated Tone drills often sit apart from vocabulary, so learners recognise words but still struggle to say them naturally. Pronunciation · Tone system 02 Practice felt academic I wanted short daily sessions to feel lighter than long, translation-heavy lesson trees. UX · Session design 03 Conversation came too late Useful phrases are often buried behind levels instead of appearing early in realistic situations. Progression · Content structure 04 Offline learning broke Commuters need lessons, flashcards and audio even when connectivity is unreliable. Infrastructure · Offline-first 02 — The Insight Core thesis ## Tone, context and repetition should live in the same loop. The system treats pronunciation as part of every word, puts practical conversation close to the surface and keeps core practice available offline. “Teach the language you’ll actually speak, not the language you’ll only read.” 03 — The Work ## One learning system, sixteen connected screens. Every screen is designed around one idea: reduce friction so learners can focus entirely on the language. ![The core Lingoway screens](https://ricardoportfolio.xyz/art/Lingoway%20%E2%80%94%20core-screens.png) ![The Lingoway learning flow](https://ricardoportfolio.xyz/art/Lingoway%20%E2%80%94%20learning-flow.png) ![Lingoway practice modes](https://ricardoportfolio.xyz/art/Lingoway%20%E2%80%94%20practice-modes.png) ![Lingoway screens in context](https://ricardoportfolio.xyz/art/Lingoway%20%E2%80%94%20phones-stage.png) 04 — Key Decisions ## The calls that shaped it. Four structural decisions that define the product’s teaching model. Colour-code tone everywhere Pinyin uses the same tone colours across vocabulary, flashcards and exercises so pronunciation stays visible in context. See in practice Practice stays one tap away A shallow navigation model keeps the daily hub, HSK path and deep practice tools easy to return to. Offline by default Lessons, flashcards and exercises are designed to work without a connection; AI conversation is the exception. Useful language before theory Exercises start with phrases learners can actually say, then reveal structure through repetition and sentence building. 05 — Reflection ## Designing for Mandarin made language itself part of the interface. The interface works best when the teaching disappears into the interaction. Every tone colour, every session length and every navigation shortcut is a deliberate product decision, not decoration. Concept scope: 16 unique screens · 10 exercise types · 4 HSK levels mapped. Explore the playground Lingoway Red #E8501E — Primary action / energy Warm Cream #F4E5D5 — Canvas / background Ink #161615 — UI chrome / dark sections Next case study → 03 Jade Dynasty Heritage, without the pastiche. View case study Ricardo Costa Product · Brand · Visual · Front-end © 2026 Ricardo Lourenço da Costa Designed in Figma · Built with React Leeds, UK