top of page
Inkedheader_LI.jpg

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

Pie Chart.png

CULTURAL BACKGROUND

About 70% of users surveyed identified as East Asian while about 30% were White or South Asian

frequency.png

USAGE OF LANGUAGES

About 45% of users surveyed consistently switched between different languages when messaging on their phones

languages.png

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.png

AGE GROUP

66% of people surveyed were in their 20s. 22% were in their 30s, and 12% were 50+

use.png

DAILY PHONE USAGE

70% of users surveyed use messenger apps extremely frequently (more than 150 message sent per day)

gender.png

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 1

Persona 2

Persona 2

Persona 3

Persona 3

USER SCENARIOS

persona1_edited.jpg

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_edited.jpg

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.

persona p.jpg

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.

1/5

Additional Wireframes

Prototype%20wireframe_Page_58_edited
Prototype%20wireframe_Page_58_edited

press to zoom
Prototype%20wireframe_Page_32_edited
Prototype%20wireframe_Page_32_edited

press to zoom
Prototype%20wireframe_Page_79_edited
Prototype%20wireframe_Page_79_edited

press to zoom
Prototype%20wireframe_Page_58_edited
Prototype%20wireframe_Page_58_edited

press to zoom
1/6

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.

1/8

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.

To play, press and hold the enter key. To stop, release the enter key.

press to zoom
press to zoom
press to zoom
mockup3.jpg
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
mockup4.jpg
press to zoom
mockup5.jpg
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
mockup3.jpg
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
mockup4.jpg
press to zoom
mockup5.jpg
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
Annotation 2020-05-12 215230.jpg

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.

To play, press and hold the enter key. To stop, release the enter key.

press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom
press to zoom

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

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.

bottom of page