Work/ Case Study/ Uta
Hero Image
✶ Product · UX / Interaction

Uta: A Japanese Music Learning Experience.

Impact
4 → 1
Learning apps unified
0
App switching
Tap any word
Meaning in context
End-to-end
Research → build
Overview

After several years of learning Japanese, I noticed the same pattern every time I used music to study. The moment I heard a word I didn't understand, I left the song to look it up. By the time I found the answer, the song had already moved on. I designed and built Uta, a lyric-first MVP that keeps learning inside the music.

  • Role
    Product Design · AI-Assisted Build
  • Timeline
    Mar — May 2026
  • Tools
    Figma · React · Claude AI · OpenAI API
  • Team
    Solo build
  • Scope Research Concept Prototype Build Polish

    01 · Project Overview

    Music should feel like music,
    not homework.

    Learning Japanese through songs sounds romantic until you try it.

    A single lyric pulled me across four apps:
    translation, dictionary, lyrics, pronunciation.

    By the time I understood the line, the song had already moved on.

    The problem wasn't access to translation. It was interruption.

    Existing Tools · Fragmented 4 apps deep
    Spotify
    Sentence translations, no word context.
    Jisho
    Great dictionary, separate from listening.
    DeepL
    Whole-line translation, no per-word context.
    Lyric sites
    Raw text, no readings, no audio sync.
    Uta
    All four jobs — done inside the song.
    02 · Core Insight

    Translation alone isn't enough.

    Learning through music, I kept running into friction at different moments. Sometimes I couldn't recognize the character at all. Sometimes I could read it but had no idea how to say it. Sometimes the translation made sense but I couldn't connect it back to the word that had just played. The friction consistently fell into four stages:

    認識
    Recognize

    Can the learner identify the characters in front of them?

    発音
    Pronounce

    Can they sing along — even without knowing the meaning yet?

    理解
    Understand

    Can they map meaning back to individual words, not just whole lines?

    深める
    Refine

    Can they revisit, save, and slowly need less support over time?

    03 · Adaptive Understanding

    One lyric. Adapted to confidence.

    Learners weren't struggling with the same thing. Some needed help reading characters, others needed pronunciation support, and advanced learners wanted more immersion. The reading modes adapt to those different stages.

    yoru no machi wo aruku
    walking through the night streets

    Full Guidance

    Romaji is always an option. One slider setting that makes every lyric readable for listeners new to Japanese.

    よるまち歩く
    walking through the night streets

    Balanced Listening

    Pronunciation steps back. Translation stays available. The lyric starts to feel more natural.

    歩く
    walking through the night streets

    Immersion Mode

    The lyric fills the frame. Translation appears only on tap. Music leads — meaning follows when you need it.

    05 · Building the Experience

    Three moments,
    one continuous flow.

    Search, read, and understand Japanese lyrics without leaving the song.

    Try the Live MVP ↗
    01 · Search

    Real songs, real lyrics.

    Search real songs and verified lyrics, not stripped-down examples.

    02 · Reading mode
    よるまちある
    walking through the night streets
    furigana kanji hiragana romaji
    walking through the night streets
    furigana kanji hiragana romaji

    Reading support, your way.

    Choose your reading support level. Reduce it as you gain confidence.

    03 · Tap to understand
    Interactive • Tap a word
    まるでこの世界

    Meaning, exactly when asked for.

    The popup answers the learner's most immediate question first: what does this word mean?

    06 · Building the System

    A working prototype, not a screenshot.

    Designed, built, and deployed as a working product. Every interaction shown in this case study exists in the live application.

    How it was built
    Real Songs Verified lyrics
    Tap Any Word Tap to explore
    See Meaning Meaning + reading
    Get Context Meaning in context
    Adapt Support Your level, your pace
    Keep Learning Stay in the song
    07 · Reflection

    What the Product Taught Me

    Future Opportunities Next loop
    • Synced playback
    • Suggested songs
    • Saved vocabulary
    • Phrase-level meaning

    The prototype looked complete. The product exposed every assumption.

    Early versions treated every word as an independent dictionary lookup. Real lyrics broke that immediately — Japanese meaning often lives at the phrase and grammar level, not the word level. A lookup that made sense in isolation returned nothing useful in context.

    The most valuable design decisions came from solving those problems, not from drawing more screens.