Building a Language learning app - part 2

Back with an update on my language learning app to help me improve German (check out Part 1 here). I’ve recently added three major features: Pronunciation, Audio Matching, and my personal favorite Crosswords.

Crosswords

Crosswords are fantastic for language learners because they mimic the "tip of the tongue" moment we experience in real conversations. However, building a functional crossword UI for mobile was full of unexpected challenges.

Solving the Layout

Originally, I tried a traditional newspaper layout (grid on top, clues below), but on small screens this meant constant scrolling and no room for longer clues.

• The Fix: I switched to a directional toggle system. This kept the UI compact and allowed me to tuck in a Hint Button to reveal letters or words when you're stuck.

Reclaiming the Keyboard

The native mobile keyboard is a UX nightmare for crosswords. It hides half the screen and includes unnecessary clutter like emojis and auto-correct. Plus, clicking between cells meant constant "open-and-close" animations.

• The Fix: I built a compact, always-visible keyboard containing only the alphabet and a backspace. To keep the tactile feel, I added haptic feedback to every keypress.

Polishing the UX

To make the experience feel smooth, I added several quality of life tweaks:

• Smart Highlighting: Tapping a cell highlights the entire word and its corresponding clue.
• Directional Tapping: Double-tapping a cell toggles between "Across" and "Down."
• Auto-Advance: Typing moves the cursor to the next empty cell automatically (skipping cells already marked as correct).
• Visual Feedback: Optional "Red/Green" indicators to show if your answer is right.
• Integrated Learning: Long-press any word in a clue to see an English translation or add it to your flashcards.
• Variable difficulty: Change difficulty from child's play to, your German teacher would struggle.

Limitations

German has some longs words, but to keep the UI easier to use, I've limited the grid size to 10x10 for now.

Sadly, I'm not going to see
"Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz" in my crossword.

Pronunciation practice

In principle, an easy game where you're given a German word and you just have to say it correctly.

Technical difficulties

The way this works is really simple, its just a speech to text program which detects what you said, and it checks if what you said contains what you were supposed to say.

So if for "Hund" you said "ummmm Hund?", you're correct!

But a common issue I saw was compound nouns being recognised as seperate words. You were supposed to say "Handschuh" but you said "Hand Schuh", wrong!

Solution: just ignore spaces. Now it feels much better. It gives a success if it recognises what you said, even if there was some slight pausing or umms and urrs.

But it also doesn't feel too generous. Duolingo has a similar speech mode, but there if the word was "Apfel" and I said "Ampel", it would have been accepted.

Audio matching

Finally a little bit of listening practice. Click to match the German audio to the English word.

Also just like everywhere else in the app, any of the German words can be long pressed to see its definition with an example sentence and can be added straight to your flashcards for further practice later.