KEYLANG
A keyboard typing and language learning phone app
For my UX Design final project, I designed a language learning game app for the iPhone.
PURPOSE
THE PROBLEM
When people learn languages, they learn to write on paper or the laptop, but not on their phone. This can making writing texts a frustrating and time-consuming process for those not fluent in another language
THE SOLUTION
KeyLang serves to train users on their phone keyboard typing skills in different languages.
KeyLang also helps users learn the alphabet, basic words, and useful phrases through 3 modes: Learn, Practice, and Speed.
MY ROLES
UI Designer
UX Researcher
RESEARCH
USER SURVEYS
CULTURAL BACKGROUND
About 70% of users surveyed identified as East Asian while about 30% were White or South Asian
USAGE OF LANGUAGES
About 45% of users surveyed consistently switched between different languages when messaging on their phones
LANGUAGES LEARNED
100% of users surveyed knew at least 2 languages, but about 45% of those users were not fluent in all of the languages
AGE GROUP
66% of people surveyed were in their 20s. 22% were in their 30s, and 12% were 50+
DAILY PHONE USAGE
70% of users surveyed use messenger apps extremely frequently (more than 150 message sent per day)
GENDER
85% of people surveyed identified as female
USER INTERVIEWS
Sometimes I do know how to say a word, but don't know how to write it and it does prevent me from using the language... Sometimes I use dictation, but I don't use it more because it doesn't work... I don't really use other languages that much but if I was trying to learn another language, then yes I definitely would.
Stephanie Chon
I use messaging in both languages daily and occasionally they can be mixed, but it depends on who I'm talking to and whether they can speak both languages... I normally just go for voice message... I don't struggle with Chinese but it's difficult to use the Korean keyboard since I don't know where the characters are.
Maudie Carey
I actually just use a lot of my non-English communication through phone calls...I would use google translate if I wanted to write in non-English...but I would be interested in an app that would help me learn... I think visuals is most helpful to learning, rather than just seeing a word and its meaning on a page
Yeah, it's annoying having to switch between languages for messaging a lot... I do struggle to write words but know how to say them. Depending on my mood, I'll figure out how to write or I'll just forget about trying it... I would be open to using it (referring to other languages) if I know that the other people would understand me
Megan Yeung
Judy Cooke
Based on this feedback, I concluded 3 points: people struggle typing in other languages outside their native tongue, they are open to learning more, and they find visual feedback useful when trying to learn.
PERSONAS
 Persona 1 |  Persona 2 |  Persona 3 |
|---|
USER SCENARIOS
ELIZABETH WACHTEL
Elizabeth Wachtel has learned Arabic through programs such as Rosetta Stone and Duolingo. She is proficient in Arabic and is trying to communicate with her other Arabic-learning friends through messaging but is uncomfortable with typing this way. She downloads KeyLang and plays it daily. She finds that her typing proficiency has increased.
MICHAEL KIM
Michael Kim already has basic knowledge of Korean because of his cultural background. He is just wants to become more comfortable with the language like a native. He downloads KeyLang to practice typing Korean on the phone. After using the app for a few months, he's able to message his parents in Korean and feels more culturally connected to his background. His parents now use Korean around their son more too.
GRACIE SMITH
Gracie Smith is bored of her usual apps. She wants to feel productive with her app but doesn't want to commit to anything too demanding and time-consuming. She finds KeyLang and downloads it to refresh her skills in Greek. She enjoys how the app doesn't pressure her with deadlines or notifications. Rather, she has control and freedom to use the app when she likes and learn in a fun method on her own time.
DESIGN
WIREFRAMES
80 initial wireframe pages were created. The high number comes from recreating the in-game dynamics for the app. The selected wireframes are to highlight the main areas of the app.
Additional Wireframes
Changes Made in User Testing
Based on user feedback, some edits I made to the wireframes were to clarify the meaning behind certain icons, in addition to adding more navigation buttons to make exploring the app easier and more efficient.
Users were unclear what the crossed box indicated. I had learned in web development this symbol means image, but forgot that others would not have this knowledge.
Many user testers commented how wordy the initial page was, so I shortened and separated the tutorial.
MOCKUPS
Color design, element positioning, and icon designs were re-thought out to arrive at the final mockups. 144 pages were made in total. The gallery below highlights some of the main pages.
Below are the initial designs and concept video created before user testing. The color schemed was modified to be more similar to the current trends of language phone apps.
Concept Video
TAKEAWAYS
-
Focus on the user's perspective. It's easy to get carried away with your vision, but in the end, whatever product you make is for the user, not you
-
Color design is extremely important, and can sometimes make or break your overall design layout
-
Proper images and icons are powerful!
TOOLS USED
XTENSIO
For the user personas.
BALSAMIQ
The wireframes were created using Balsamiq. I also utilized the program's user testing function to gather user feedback on what designs and functionalities I'd like to modify.
Pinterest was used for the initial inspiration needed to decide what color palette I wanted to use for this project. I also searched other language and game apps to see what elements of their user interface I'd like to incorporate.
DRIBBLE
When coming up with the revised color design, I used Dribble to gather inspiration from what other creators were making and designing.
SKETCH APP SOURCES
Many of the icons used in the mockups were downloaded from Sketch App sources.
ADOBE PHOTOSHOP
The first image of a hand holding a phone and the icons used in the mockups and wireframes were edited with Adobe Photoshop.
VYOND
Because of the pandemic, our class was unable to film real concept videos. Our profressor recommended the free trial from Vyond to make a basic concept video.
ADOBE XD
The initial and final mockups were designed using Adobe XD.