Laserrat German Grammar App
Can I speed up grammar learning through probability over accuracy
This interactive, mobile app helps lower intermediate+ German learners to recognise and apply grammar rules through learning triggers, shortcuts and condensed tables within engaging short stories.
Audience
Initially boys 11-18 learning lower intermediate+ German (A2–B1+), but expanded to include adults too
Responsibility
End to end instructional design and development (analysis, action mapping, storyboarding, visual design, prototyping, user testing)
Tools Used
Figma, Figma Make, Chat GPT, Affinity Design
Problem vs Solution
The problem
Lower intermediate German learners hit a plateau, even after frequent use of apps like Duolingo. While they've built basic vocabulary and sentence structure, they lack the grammar knowledge to form their own sentences—particularly challenging concepts like noun genders, cases, and declensions.
I discussed this with Lotta Schneidemesser, German Teacher at Bedford School for Boys, and she added that classroom materials did not engage her pupils and were an inefficient way to learn.
The Solution
I designed a mobile app to practice level-appropriate vocabulary and grammar through short, engaging, 15-20 minute stories with the goal to prioritise probability over accuracy.
With Lotta as Subject Matter Expert (SME) we put together a demo story that embedded a structure of progressively challenging grammar points extracted from the story itself. The short stories provide entertainment, context, a clear end goal, flexible language, reading, listening, vocabulary and more.
My Process
My Approach
Given the constraints of low budget and limited availability of the SME, I decide to use the fast, iterative model of SAM (Successive Approximation Model).
Research
During research I drew on my eight years of language teaching experience, my own German learn experience to research existing solutions and create a discovery map.
Design and Development
After storyboarding, I moved directly into iterative rapid prototyping using AI-assisted coding to provide interactive testing. This time-efficient method allowed me to validate the learning approach quickly while gathering continuous user feedback. AI was also used to generate the level appropriate short story, extract vocab and phrases and organise content quickly.
Research
Existing Solutions Analysis
I investigated a range of German learning resources like germanwithlaura.com who champions grammar learning and has great condensed grammar tables, Der Die Das rules book that helps recognise common patterns of noun genders and everyone's favourite learning app Duolingo.
Duolingo lesson
Learn With Laura
Der Die Das rules book
I formed a list of key findings to help draw from the best parts and avoid the worst:
Things to use
* Short 15-20 minute lessons
* Progress tracking
* Gamification: tracking stats, points, streaks etc.
* Clean, colourful and cheerful UI
* Probability over accuracy using shortcuts and patterns
* Short stories for context and lesson structure
* Colour coding genders for chunking and retention
Things to avoid
* Uninspiring, dry, copywriting and content
* Overly pushy notifications and guilt tripping
* Pay walls preventing habit forming
* Too many features and settings
* Lack of clear goals/unending content
* Unusual, unnatural speech
* Lack of language in context/ no memory recall
Action Mapping
Together with the SME we created an action map for the demo story to ensure that all actions align with achieving the business goal:
Business Goal: Increase Year 10 students' grammar accuracy on end-of-term assessments by 20%, reducing remedial instruction time and supporting progression to GCSE German.
Key Actions Learners Must Demonstrate:
* Use correct noun gender, even with new words
* Understand and apply appropriate grammatical cases to everyday phrases
* Apply declensions for articles, adjectives, and pronouns
Practice Activities (Story 1 demo focus):
* Action 1: Remove known vocab from the story vocab list and then focus on learning new ones through translation
* Action 2: Read der, die, das pattern rules and apply them to story nouns
* Action 3: Read noun roles in cases and directly apply them to story sentences
* Action 4: Read the condensed declension table then choose the correct word endings in story sentences
Future stories will target tenses, prepositions, word order triggers etc.
Storyboarding
I used ChatGPT to write a short, but entertaining story with target language for A2-B1 learners in both German and English.
To match mental models of most learners, incorporate chunking and an increasingly challenging scaffold, I used the story format used by Duolingo (story lines, quiz, more lines, quiz etc).
Other decisions included:
* Adding feedback messages for correct/incorrect choices
* Reveal/hide grammar rules content
* Progress indicators to show where you are in the story and in the practice activity
I mapped out a user flow of a story as follows:
Design & Development
AI-assisted coding
For a fast Lean approach, I iterated on low-fidelity content and structure first until it was validated enough to create a design system.
To build a working prototype ready for user testing that could load the different stages with interactive games, progress tracking, score stats and more, I used to LLMs like ChatGPT to code it.
It was an intuitive, iterative process that easily allowed me to track the code being produced and make my own edits to the HTML and CSS to save time during each iteration.
I tested the first prototype with five participants using both in-person and remote testing.
Test insights
* 5/5 testers loved the idea of learning through stories
* Mental models of the primary user flow were already familiar from Duolingo stories
* 5/5 testers appreciated the help section, but 4/5 didn't click it at first because 'help' was confusing
Hi-fidelity mockups for version 2
For version 2, I designed high-fidelity screens on Figma and used them to prototype the full story user flow using Figma Make with the following changes:
* Original 'help' section shown top of information hierarchy and given a 'hide info' button
* Added sticky menus top and bottom for consistent navigation
* Added translate button to story segments for easy referencing
* Improved hierarchy and typescale for a consistent experience
* Designed a fun, bold style for a clean, accessible interface with character for all ages
* Added a name and logo: Laserrat, derived from Leseratte (Bookworm)
The overall structure, story and games remain the same and were user tested in the next round.
Voices from user testing
I did user testing of the v2 prototype with three new German learners in the A2-B1 level range to learn the following:
* Is it intuitive to play?
* Did participants learn anything?
* How can it be improved?
Learned new vocab and grammar → valid approach
“I learnt some good rules for applying male, female and neutral in part 2.”
“Overall I consider it’s a good app to learn.”
Getting stuck and misclicks → unclear instructions
“I don’t know if I was supposed to click on each word once or just on one word.”
“I struggled with the last section in terms of controlling the buttons and knowing what to do.”
No sounds → less emotional reaction
“Add sound so the user can listen to the words.”
Minor UI inconsistencies → edit in the code not with AI
“I'm not sure if they are grey on purpose.”
"Make it clearer if options chosen are right or wrong."
Minor changes for version 3
v3 Responding to user feedback
User testing revealed a range of issues in the design. I addressed the critical errors first using AI prompting on Figma Make and then made minor tweaks inside the code:
* Changed game order so cases are introduced before declensions (a critical oversight)
* Simplified the cases game to focus on just identifying cases
* Added a basic API to allow a read aloud button in story sections
* Added correct, try again and game complete sound affects for emotional engagement
* Edited some game instructions and grammar help sections for more clarity
Using Figma Make
Overall using Figma Make for prototyping is a very mixed experience. I like the transition from Figma design to prototype , but it is not aware enough of core design principles to create a consistent UI and makes frequent errors.
Next Steps & Takeaways
Next Steps
To take this project further I would create a series of 10 stories and have learners go through one story a day for two weeks and evaluate progress using Kirkpatrick’s Model. This would involve several steps:
* Gauge learner satisfaction through post-training surveys or feedback forms.
* Assess knowledge acquisition by administering post-tests or quizzes on course content.
* Evaluate how effectively learners apply the new techniques to new language through observations from the SME.
* Measure the training’s impact on organisational performance by comparing end of year tests with previous years.
Takeaways
I really enjoyed the process and using new rapid prototyping techniques using AI. I would be interested in developing this concept as a scenario based eLearning course using Articulate Storyline. This would focus more on building accurate sentences in German by recognising what rules need to be applied and in what order. That is something I have observed is not always clear and even when known, still requires a lot of cognitive reasoning that slows down sentence production. Perhaps this course would be a great introduction to the story app and understanding why learning grammar rules is important.
