LettersGR
Anton Drachuk
LettersGR: from design to build to App Store
Building and publishing app for a new way to learn an alphabet using my original method. For faster, higher efficacy learning.
Designed for iOS (iPhone / iPad) first and for Mac. Android coming soon.
Product Design
AI-native development
Language learning UX
Accessibility-first
Summary
LettersGR is an innovative, AI-orchestrated iOS and macOS application designed to eliminate the initial friction of learning the Modern Greek alphabet. By employing a proprietary, sound-first pedagogical method, the app guides users from complete beginners to confident readers. The project showcases end-to-end product design, UX architecture, and 'vibecoding'—leveraging advanced prompt engineering to rapidly develop, test, and deploy a production-ready, accessibility-first educational tool.
Team
Client
Independent
Team
Solo (Product Design, UX/UI, Prompt Engineering, iOS Deployment)
Timeline
~17 days (Concept to App Store)
The Problem
Learning a new script is the first and often most daunting barrier to language acquisition. For Modern Greek, learners face "false friends" (letters like Β which sounds like V, or Ρ which sounds like R) and complex digraphs. This initial friction often leads to high abandonment rates before learners even reach vocabulary acquisition.
High Friction
Existing tools are often cluttered, ad-heavy, or lock basic alphabet learning behind paywalls, discouraging early-stage learners and creating an immediate barrier to entry.
Phonetic Complexity
Greek digraphs (like μπ or ντ) and contextual pronunciation rules are rarely explained with the necessary visual and auditory clarity in a self-paced format.
Accessibility Gap
There is a distinct lack of free, high-quality, and aesthetically pleasing tools that allow users to master reading independently, without the pressure of full language immersion programs.
Learning Model (Method)
LettersGR is built on an original structured learning approach designed for learners who already know a Latin-based script and need to quickly understand a new alphabet. I call it FSL: Familiarity-first + Sound-first + Learning loops.
1. Familiarity-First Sequencing
Instead of teaching letters in alphabetical order, the system introduces characters from most visually or phonetically familiar to least familiar.
Example progression:
visually similar characters to Latin letters
partially familiar shapes
completely new symbols
This reduces early cognitive friction and helps learners build confidence quickly. The approach assumes the learner already knows a related writing system (such as the Latin alphabet), which allows the course to leverage transfer learning rather than starting from zero.
2. Sound-First Mapping
The focus is on phonetic recognition rather than memorizing letter names. Each character is reinforced through multiple channels:
audio pronunciation
phonetic equivalents in Latin script
real word examples containing similar sounds
visual letter recognition
This prioritizes the learner’s ability to decode written text, rather than simply identifying letters.
3. Reinforcement Learning Loops
Each learning segment is followed by a calibrated test designed to reinforce the new knowledge immediately. The structure follows a simple cycle:
Learn → Practice → Test / Reinforce
The Process: Vibecoding
The development of LettersGR followed a pioneering AI-native workflow. As the designer and product architect, I provided the strategic intent, and the AI acted as the master builder. This wasn't mere code generation; it was a continuous, iterative loop of prompt engineering, architectural refinement, and aesthetic tuning.
Prompt Engineering Evolution
The key to unlocking high-quality output was transitioning from generic requests to highly specific, constraint-bound prompts.
Stage 1: Functional Intent (The Baseline)
"Build a screen that lists Greek letters. When a letter is clicked, play its sound and show its name."
Stage 2: Aesthetic & UX Refinement
"Apply a 'Liquid Glass' theme. Use backdrop-blur-md, thin white borders (border-white/20), and a radial gradient background from #003B73 to #001A33. Make the letter cards feel tactile. Ensure touch targets are 44px minimum for WCAG compliance."
Stage 3: Technical & Architectural Optimization
"Refactor the audio logic to pre-load samples using the Web Audio API to eliminate latency. Implement a global Layout component to handle safe-area insets for iOS deployment. Ensure the grid layout is fluidly responsive from 320px to 4K."
Design Philosophy
The aesthetic is a calculated synthesis of cultural heritage and modern UI trends. We moved away from the "clinical" look of educational apps toward an Atmospheric experience.
Evidence-Based Color
#002B5B
#0096C7
#007ACC
Atmospheric Gradients
A soft #D9FFFF to #C7FFEF gradient provides a sense of depth and airiness.
UI Kit Showcase
ΑαLearning Card
ΒβSecondary Surface
ΓγDeep Foundation
ΔδAction Button
Contextual Accessibility & Micro-Interactions
While the entire application was designed to meet strict WCAG AAA standards—utilizing high-contrast color pairings, generous touch targets, and large baseline typography—certain linguistic nuances required highly contextual, micro-level solutions.
Algorithmic Sound Grouping
Certain Greek letters share identical sounds. Instead of teaching them in isolation, the app detects phonetic overlaps and groups letters dynamically.
Native-Grade Architecture: Dynamic Header Injection
To achieve a truly "native iOS" feel within a web environment, the application employs a sophisticated React pattern: Dynamic Header Injection.
Challenges & Collaboration
The AI-native process is not without friction. The primary challenge lay in bridging the gap between the AI's engineering logic and the nuanced requirements of human learning and linguistic subtlety.
The Human Element: Manual Craft
While AI exponentially accelerated the engineering and UI generation, the core educational value and sensory assets required meticulous human intervention.
Testing & Validation
Testing included:
multiple device testing
in-person usability testing
testing with users with hearing limitations
Solution & Outcome
The result is a production-ready web application, fully optimized for mobile browsers and architected for immediate deployment as a native iOS app via Capacitor or Cordova.
Outcomes & Impact
80-100% Reading Success Rate. The app is designed to help users decode and read Modern Greek fluently within hours.
Lessons Learned
The AI excels at generating boilerplate, structuring components, and executing routine instructions. However, it still depends on a designer to architect the system, ensure pedagogical soundness, and maintain a cohesive user experience.
Future Roadmap
The success of LettersGR validates the FSL method and the AI-native development approach. Future plans include:
Expansion to Other Alphabets
Advanced Learning Modes
Cross-Platform Parity
Accessibility Enhancements
Like this project
Posted Jun 29, 2026
An innovative app to teach the Modern Greek alphabet using a sound-first approach.
