WhatsThat

Overview

The K-12 curriculum offers foreign language classes as part of its education for students, starting as early as elementary school. The ability to communicate in multiple languages is becoming more and more important the in the increasingly integrated global community, which students will eventually enter. However, the current courses offered for students only scratches at the surface level of learning a new language. To provide an enriching educational experience for K-12 students in their endeavor to learning a foreign language, it is important for them to be able to communicate with people who are native speakers. Through this, language becomes a gateway to learning more about other people and cultures, imparting upon students a deeper understanding of the world around us from entirely different points of views.

The Solution

WhatsThat? is an app that is designed to assist K-12's language learning options. This application allows the user to interact with pen pals and to learn colloquial foreign language through a game-like experience, ensuring student motivation for success. WhatsThat? is compatible with tablets and mobile devices.

01 Research

 Competitive Analysis

I began by conducting a competitive analysis of three popular language-learning apps on the current market. Through this endeavor, I found that most of these apps target a more mature audience. This was conveyed in the aesthetic and functional design of the application. In addition, it was more common for these apps to focus solely upon instructor to student relationship rather than students collaborations. However, the way in which information is presented is very important as it directly influences a student's learning curve. This was done effectively for all of the apps. Furthermore, having built-in aids for translations, corrections, and pronunciations are all crucial to a student's understanding of the language itself. With this knowledge in mind, I set about to identify my design goals.

 Design Goals

The competitive analysis helped in clearing several questions I had and directed me to the angle in which I wanted to tackle this challenge. I wanted to make a language learning tool that would assist K-12 foreign language courses. This meant that it needed to be accessible to students of varying backgrounds; from a fifth-grader who just started out learning Spanish to a senior in high school who is an expert in French. Here are the design goals I've set out to achieve:

Initial Ideation

After determining my design goals, I decided to brainstorm for about a minute on each goal and organized my ideas based upon their similarities and potential relationships to each other.

I also wanted to make the format of the application to be more like a game, engaging student with fun exercises and materials that would utilize what they learned in course material. In order to understand the gamification of learning, I researched what sort of elements are necessary components to motivate learners and facilitate learning. Then I concluded what interactions I could include in my design to make for a more engaging and immersive language-learning experience for K-12 students.

02 Design

Information Architecture

From the ideation process, I created a basic information architecture diagram to show the hierarchical relationship between my key features. These features include exercises that are meant to complement course lessons, social functionalities for users to interact with their pen pals, and settings where the user can update what language they want to learn.

Avatar Designs

One of the elements of gamification is having a narrative and character. In order to give users a more immersive experience, I decided to create avatars as visual representations of their virtual selves as part of the community. These avatars also double as a motivation factor for users to stay engaged with the application as they are able to gain points through completion of activities, which they can then use to shop for accessories for their avatars. Finally, these avatars conveys a more game-like feel to the user about the application and can help make the overall supplementary material more easily digestible. I conducted some research on how to design effective avatars and utilized principles discussed by Michelle Venetucci Harvey in her article, "Design Better Avatars". I chose to design multi-colored monster figures to give personality and allow users to interact with the application in a fun and engaging manner. Below are a few avatar designs I've created.

 Conceptualizing WhatsThat?

Practice listening and verbal exercises that utilizes normal conversations.

Converse with pen pals and collaborate on assessments together.

Wireframes

I created mid-fidelity wireframes for my application on tablets. This is because tablets are one of the most utilized educational tool in most K-12 school districts. A touchscreen on a tablet is perfect for students because it keeps them engaged with the task at hand and interactive with the learning material. 

It was important to me to keep the screens clearly labeled with a clean interface as I didn't want to overwhelm my users with the amount of information displayed. The average brain is able to remember seven components at a time and I adhered to this principle by keeping my display clear and grouped, with each section containing 7 or less interactive elements that would lead the user to their desired page. 

03 Prototype

High-Fidelity Mockups

After finalizing the wireframes, I asked one user for their insight and feedback. They mentioned that they were confused on the prospect of the message feature as it seemed to contradict with the concept of pen pals. If the user can interact with multiple different accounts, then what made pen pals special? This was a good point and I decided to remove the previous feature from the wireframes in which the user could match with other users for conversations. In addition, they suggested improving the wording chosen for the features of the application. "Exercise" was changed to "Practice", "Exam" to "Quests", and "Results" to "Progress". This was done in order to reduce the stressful connotations associated with those words and to be easily approachable for children.

Translations

One of the reoccuring features in language learning applications I found throughout my research was the ability for the user to translate words and sentences. This was important as it allowed the user to understand and progress in their learning journey. WhatsThat? allows the user to select words or phrases and choose from an array of options, including translate. In addition, there is a camera feature that allows the user to take a picture of an object to translate into the language they have set to learn. This allows the user to take a more interactive approach in their education and create user engagement. 

Mobile Version

04 Next Steps

The next step for this project would be to conduct some user testing with a range of participants along the spectrum of K-12's education system. This is to ensure that the application is receptacle to users from a varying age range. In addition, it would be beneficial to the design to expand upon what a quest would entail with my users. In doing so, I would be able to place the insights of what helps my users learn into the design.