translyric
Creating a community for users to learn language through their favorite songs
Introduction / Overview
Many songs are in languages that are unfamiliar or unknown to the user, and finding song lyric translations can be a multi-step process requiring the use of a variety of services.
I designed a mobile-first website to help people feel less overwhelmed when accessing information about their favorite songs that also provides an engaging way to learn a language.
Empathize
To better understand people’s relationship with listening to and learning about music in other languages, as well as how they might learn languages in general, I performed a competitive analysis to compare various features and services offered by existing products:
Spotify partners with Musixmatch to provide lyrics synced with songs as they play
Google allows users to
view in‑line translations in characters from either language
Musixmatch’s landing page targets businesses (partners, artists, etc.) over consumers
Next, I conducted user interviews to determine why and how users look up lyrics, in addition to why and how they learn about songs in other languages, where I learned that:
For people interested in learning a language, songs in that language can make it easier to learn words and pronunciations
Participants felt overwhelmed by the number of ways they can currently access information about songs and their lyrics
Online translation services were viewed as being less trustworthy than communities of other language learners and translators
Define
I synthesized my research into an archetype:
Lynette, the 28-year-old, uninspired language-learner:
Lynette wants to learn a new language, but as she doesn't need to learn it, she is finding it hard to stay motivated
She prefers to self study as she doesn't often have the time to dedicate to active language-learning
She would like a fun and easy way to learn a language more casually, with reputable resources available on-demand
And a corresponding storyboard to continue building empathy:
Ideate
With Lynette in mind, I ideated features that could help her achieve her goals, prioritizing them into the following must-haves:
Provide song lyrics in their original language
Allow users to both translate and verify song lyrics
Provide preliminary (unverified) song lyrics and translations
Next, I developed a user flow to help me start visualizing how I could incorporate these must-haves toward wireframing and prototyping:
Prototype
Low-fidelity wireframing next allowed me to get rapid feedback on structure and ideas over visuals:
...and with mid-fidelity wireframing I was able to start refining elements like content, UI elements, and more toward preparing to usability test the designs:
Test
I wanted to test if users could find a song, view its lyrics, and translate them to a language of their choice.
I conducted moderated tests in-person and remotely to determine how participants might use the site to translate a song's lyrics.
All participants were able to successfully complete the tasks within a reasonable amount of time — between 15 to 30 seconds, or as little as two clicks.
While the test was a success overall, I was still able to glean valuable insights that I could use to make some initial revisions:
For the next round of testing, I wanted to include higher-fidelity UI elements and branding to better emphasize visual cues like links and buttons. Referencing my initial research alongside a mood board I put together, I created a component library:
Combining the initial revisions and the new visual design direction, I created high-fidelity wireframes:
Retrospective / Next Steps
This case study focuses on just one type of user, but moving forward, I would like to source and conduct research with contributors as well. For example, why might artists or other consumers want to sign up and contribute? And, how would they go about doing so?
All potential users I spoke with expressed that they would find translyric to be both entertaining and valuable toward learning a language!