Web Design - "Translate"


This is a personal project.
As entertainment business grow globally, more and more films or TV shows start including foreign language in plots to diversify stories. As a result, translation between different languages seem to become extremely important.
A good translation does not only refer to the accuracy of words and expression, but also mean a proper context and tone. 
Because of the obvious difference between languages, translation could be hard to accomplish especially in films or TV shows. Sometime words and expressions need to be reconsidered if the person who speak it possesses a different identity or social status. If the same translating technique is applied to all translation in the script, it might create distraction or even confusion among audiences who actually know the language. 
"Translate" is a web-based platform for people to suggest better translation for foreign dialogue in films or TV shows. It allows people to ask for translation of words, expression and dialogue; it also provides opportunity for people to translate or vote for the better translation that is both accurate and fit for cultural context. 


My Role:

  • User research, conduct user interviews.
  • Competitor analysis.
  • Create user persona, user scenarios, and confirm user flows.
  • Paper prototyping, wireframing,
  • UI/UX design, and rounds of usability testing.


Linguistic Consultant
pro - creditability, accurate translation and cultural context
con - time and cost inefficiency, might require local access

Google Translate / Online Translation Tool
pro - instant feedback, remote access, cost efficiency
con - lack of creditability, inaccuracy, lack of context

pro - remote access, certain creditability
con - pertinency, time consuming


Becky, Chinese, 25

Becky, Chinese, 25

"Just don't use words that we, as native speakers, would never say... that's just gonna ruin my impression of the film"

Behavior and Habits
- she likes to watch drama or fiction films when she has free time
- she enjoys the quality shows, and pays special attention on details such as actors’ performance and logic of the plots
- she speaks Chinese so she would feel awkward when hearing actors who aren’t Chinese and speak the language; she would get distracted from their accents and also the way they choose words and expressions.

Needs, Problems & Goals
- she wants a better film watching experience without being distracted from bad translation of foreign-language dialogue
- she expects that the translation is accurate, and fits to the context
- she hopes that the translation will both appear and sound as natural as possible
- she’d like to make contribution to improve the translation, with some kind of rewards

Scenarios & Frustrations
Becky works as a general assistant in an national museum, and she usually has a busy schedule for work.
Her routine starts from listening podcast and news on the subway. On her way to work, Becky likes to listen to entertainment news because she’s a huge movie lover. She pays special attention on the new release of a film, and will go the movie theater whenever she has a chance.
On a regular day, Becky sits at the theater with her friends, and they are about to watch a newly premiered film. While Becky is really into the plot, suddenly she hears a white female character starts to talk to another character in Chinese.The odd accent makes Becky laughed a bit, but soon her attention is drawn to how badly the dialogue is written. “This conversation is suppose to happen between friends”, Becky said to her friends, “now they are like in the middle of an job interview”. Frustrated and disappointed, Becky couldn’t forget about that dialogue, “It’s not how we Chinese talk normally”, complaining to her friend, Becky said “their conversation doesn't sound natural at all.” On her way back home, Becky couldn’t help wondering if there's way to influence the "right" translation.


Feature Prioritization Chart

After the initial interview with potential users, I analysis "dream features" based on my notes. However, I considered the limitation which "Translate" might have, and decided to focus on expected and high impact features. 

I then simulated two user stories:
1) A person needs to translate a dialogue from English to Chinese. He wants to make sure that the translation sound native to local people, since the show will be premiered in China. So he goes on "Translate" and start a question about the dialogue he's translating. After a while, he gets a few answers, and based on the audiences' vote, he picks the one that most agree - "ask for translation" feature
2) A person is watching a film with her friends. In the middle of the film, she notices that there's a Japanese character who speaks Japanese in the show. While the English translation make sense, the words and expression that the Japanese character speaks doesn't sound natural. After the film she goes back home and login to "Translate". She finds out the film by searching the name, and add her translation to the dialogue that she just heard - "suggest translation" feature

User Flow


Key Screen Sketch

Through user testings based on the paper prototype, I discovered some key turning point for altering my design.

a) filters on the "film/show search" page seems to be a bit confusing. 
b) information on "ask for a translation" page needs to be refined.
c) some user did not notice there's tutorial page that help them to use the website.
d) some expression that I used for the design are confusing, e.g. "yes" or "no" on the voting page.

Besides the testing on the paper prototype, I also did a test to help me to organize information on navigation, and improve information architecture in general - method used here is "Card Sorting" process.

Card sorting helps me to understand users' thoughts on the organization of features. However, it didn't provide me with enough information to develop a hi-fi prototype. So I did usability testing for a clickable prototype to ensure a smooth user flow.  
After this round of user testing, I started to eliminate unnecessary features and re-organize information on screens. Based on my analysis and observation, I summarized a few key points to help to produce the next design.
a) re-organize information on the homepage, properly utilize global and local navigation.
b) refine information on the "ask for a translation" page, add additional information to help user to fill out each section.  
c) take out search filter - not many people have noticed, they usually just type in the keywords when they reach the film/show search page.
d) add "asking new question" button to "search detail" page to allow user to raise new question about a translation.
e) reconsider some words and expressions used.

Plus/ Delta Columns


Some Key Screens In Design