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

Uta: A Japanese Music Learning Experience.

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

While studying Japanese through music, I kept leaving songs to look up words, readings, and translations across separate tools. I designed and built Uta, a lyric-first MVP that keeps search, reading support, and word-level meaning inside the listening experience.

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

    Problem

    Music should feel like music,
    not homework.

    Learning Japanese through songs sounded natural, but the workflow was fragmented.

    One lyric could pull me across translation, dictionary, lyrics, and pronunciation tools.

    The problem was not access to information. 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.
    Core Insight

    Translation alone isn't enough.

    The friction was not one problem. Sometimes I needed to recognize the character, sometimes pronounce it, and sometimes connect the translation back to the word I had just heard. The pattern 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?

    Adaptive Reading

    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.

    Live MVP Flow

    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?

    System Build

    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
    Reflection

    What the Product Taught Me

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

    The prototype looked complete, but the product exposed every assumption.

    Early versions treated each word like an isolated dictionary lookup. Real lyrics broke that quickly because Japanese meaning often lives in phrases, grammar, and context.

    The strongest design decisions came from solving those product problems, not adding more screens.