Project · 2025–2026

/aɪ.pi.eɪ/ (IPA) Drill

The International Phonetic Alphabet (IPA) is the universal way to write down how words sound. One set of symbols covers every sound in every language: it's the system behind pronunciation guides in dictionaries, language textbooks, and speech tools worldwide.

IPA Drill is the tool I built to learn it, designed and built end-to-end in conversation with Claude Code.

Interaction design Designing with AI Accessibility Multi-language

Typing interaction

Guess the word from its IPA transcription

The app shows a word in IPA transcription: I type the everyday spelling. Two attempts. Miss both and the app reveals the answer with a symbol-by-symbol breakdown (name, sound, and an example word) so I walk away knowing what I didn't.

IPA word shown

↓

Type the word · Check

↓

Correct

Wrong (Attempt 1)

Wrong (Attempt 2)

Try it yourself:

Design decision

Earlier versions had Reveal and Skip buttons: ways to move on without actually recalling the word. The research on retrieval practice is clear: the benefit comes from the effort of pulling something from memory, even when it's hard. Giving users an escape hatch removes the only thing that makes the drill effective. Both buttons are gone.

Design decision

IPA Drill accepts multiple valid spellings for the same word: "too," "two," and "to" all map to /tuː/. When you answer correctly, the app echoes your exact word back: "Correct — too." An earlier version always responded with the primary dictionary spelling, no matter what the user had typed. So if you typed "too" and the app said "Correct — two," you were right, but it didn't feel that way. The fix was to reflect back what the user actually typed.

Clicking interaction

Mark your knowledge of each symbol

Every IPA symbol in the transcription is a button. Click it to cycle through three states, once more to clear. Tags persist across sessions and carry through the word list, progress counter, and the trouble-spots drill.

/ʃ/

Default

Not yet marked

→

/ʃ/

Trouble spot

Terra cotta

→

/ʃ/

Known

Green

→

/ʃ/

Default

Not yet marked

Design decision

Most learning tools grade you: they decide what you know based on right/wrong. IPA Drill works the other way: I decide. I'm the only one who knows whether I remembered a symbol or just guessed lucky. The app's job is to hold on to my tags between sessions, so my personal map of the alphabet is still there next time: green for what I've got, terra cotta for what I'm working on, untouched black for what I haven't met yet. Over time it becomes a quiet record of where I actually am, assessed by me, for me.

Design decision

The drill screen has exactly two things you can do: type to answer, click a symbol to tag it. Limiting the drill to just those two interactions reduces cognitive load at the moment that matters: when you're trying to recall a word, you shouldn't have to think about the interface at all. Everything else (switching languages, changing the theme, viewing your word list or progress) lives one tap away but off the drill screen entirely, so it's available without being in the way.

App structure

Three views, one persistent state

The two core interactions (typing to answer, clicking to tag) happen in the Drill view. The other two views support the learning over time: Words gives you a full map of every word in the language color-coded by what you know, and Progress shows where you stand across the whole symbol set and lets you launch a targeted drill on your trouble spots.

Drill The learning loop: IPA word, answer field, breakdown on miss.

Words Every word in the active language with its IPA, color-coded by your tags.

Progress Symbol counts and the launcher for the trouble-spots drill.

Words view — full word list with color-coded IPA symbols

Words view: every word in the active language, color-coded by symbol state. Language choice and theme persist across sessions.

Each language targets ~3.5 words per symbol — enough that every sound appears multiple times across the list, not just once. English has ~150 words across 43 symbols, with deliberate picks for rare sounds (the "oy" in boy, the "ch" in Scottish loch) and homophone groups: rain, rein, and reign all count for /reɪn/. Italian, French, and Japanese have ~100 words each at the same ratio.

Multi-language support

Four languages, independent progress tracking

Beyond English, I added French, Italian, and Japanese, languages I've actually studied: heard spoken, tried to pronounce, and been corrected on. The architecture supports any language with a defined phoneme inventory and word list; eventually I'd like the app to cover every language anyone wants to learn.

Each language has its own IPA symbols, word list, and "Listen" voice. A dropdown in the nav lets you switch between them instantly. Progress is tracked per language: practicing French doesn't touch English.

🇺🇸

English (US)

~150 words
43 IPA symbols

🇮🇹

Italian

~100 words
29 IPA symbols

🇫🇷

French

~128 words
36 IPA symbols

🇯🇵

Japanese

~96 words
28 IPA symbols

English: 43 symbols

Italian: different symbol set, separate progress

Japanese presented a specific input challenge: the same word can be written in romaji (latin alphabet), kana (phonetic script), or kanji (logographic characters). All variations are accepted as correct answers.

Japanese drill — correct answer typed in romaji

Romaji accepted

Japanese drill — correct answer typed in kana

Kana accepted

Working method

Built in conversation with Claude Code

Every iteration of IPA Drill was a conversation. I'd describe what I wanted, watch Claude generate a working prototype in the browser, use it, then feed back what wasn't right: this feels rushed when I get one right, move the success state inside the card, the slashes shouldn't share a color with the trouble-spot marker. That loop (describe, build, use, critique) produced everything on this page.

What Claude was good at: turning a rough description into a working artifact quickly, generating design alternates on request, catching edge cases I hadn't thought of, and handling large refactors (like expanding from English-only to four languages) without breaking existing behavior.

What I had to drive: every interaction decision; the core philosophy (the user self-assesses, the app doesn't grade); what to cut (Reveal, Skip, the card counter, the symbol legend); and the writing throughout. Claude executes quickly and confidently. Knowing whether the direction is right (and when to change it) is the designer's job, and it didn't get automated away.

How it came together

Defined the problem

Most IPA tools work like multiple choice: show a symbol, pick the meaning. That's recognition, the easier kind of memory. Recall (actually generating the word) sticks better. I built the drill around recall: you type the word, you can't pick from a list.

Designed the interaction

Worked out the drill loop, the three-state symbol-marking system, and the three-tab structure. Every design decision logged in an Airtable as I made it: 43 entries by the end.

Built it in Claude Code

Developed the chosen direction into a single self-contained HTML file. Functional additions in order: homophone handling, randomized word order, multi-language support, light/dark mode, and contrast corrections after I caught an accessibility issue mid-build.