Sarah Aranda

The problem

I teach English to adult learners and build self-study learning apps they use on their own. I wanted those apps to feel more joyful to practice with, and I didn't want to reinvent the interaction every time I started a new one. So I built a repository of interactive components for myself: a tested, documented library I can browse to pick the right interaction for each new app. It streamlines how I build every learning app that follows.

What I built

Five reusable components, each a single, lightweight web page that works on a phone:

• Bubbles: a timed game. Learners drag a sentence (or tap) into the bubble holding the phrase that completes it. Right answers get absorbed and the bubble grows; wrong ones bounce back.
• Pronunciation Accuracy: press and hold, read a sentence aloud, and see which words came through clearly.
• Grammar Check: learners write their own sentence and get mistakes marked in place, with suggested fixes.
• Progressive Disclosure and Section Jumper: structure pieces that reveal a lesson one step at a time and show learners where they are.

How I used AI

I used Claude Code to build and document the components, and Perplexity to research and refine the learner-facing wording. I acted as the product owner and designer: I set the rules, tested the results myself, and decided what shipped.

What the AI got wrong, and what I caught

1. It misunderstood the game at first.The first prototype missed my idea. I described the real mechanic, one sentence at a time with five fixed bubbles, and that version worked far better on a phone, because there's nothing to scroll past while dragging.
2. The sounds were out of sync.By ear, I noticed the reward sounds playing before the animation, one by almost a second. The AI's automated tests had passed because they only checked that the sound played, not when. We made it a standing rule: sounds fire from the animation itself.
3. It assumed a teacher would be there.One message told learners to check with their teacher. My products are self-study, so there is no teacher. I made that a permanent design rule: every limitation must come with something learners can do on their own.
4. Buttons were too small for thumbs.When I restated that everything must be mobile-first, an audit found four buttons the AI had already called finished that were under the 44-pixel minimum for a fingertip.
5. The microphone tool failed silently.When I tested it, it said "Didn't catch anything." The cause turned out to be the AI's own decorative sound meter competing with the speech recognizer for the microphone.

Decisions I made

• Privacy first. I asked whether learners' recordings were being saved anywhere. They aren't, and I added a plain-language note telling learners where their audio goes.
• No paid AI where it isn't needed. For grammar checking I chose a free grammar service over a paid AI model. In a test with five common learner errors, it caught all five.
• Feel matters. I auditioned ten candidate sounds and picked the two that felt upbeat and short without being childish.

Skills this shows

• Testing AI output myself
• Writing rules an AI can follow
• Designing for adult learners on phones
• Instructional design
• UX
• Plain-language writing

What's next

Next, I'm giving Bubbles a friendlier, more playful look using Lovable, a second AI tool. I'll check that the new version still meets my standards for dragging, sound timing, and phone use. Then I'll test it with learners on real phones and compare it with the original: what they enjoy, where they get stuck, and what I'd change. I'll share what I find in a follow-up post.

I'll also keep adding to the repository as new learning apps call for new kinds of interaction. Each new component goes through the same rules and checks before it's ready to reuse.