Product design case study: designing a language learning app
Introduction
Myteacher language institute is a renowned international language school in Kuala Lumpur. The school offers a broad range of classes, in multiple languages and different purposes (e.g.: learning Business in French). With the Covid-19 pandemic, students have no choice but follow online classes, which demand is increasing dramatically this year. According to the founder, requests for online classes were very rare until it became common in 2020. This means that there is less interactivity and less motivation to keep up with class. How to optimize the learning of language in online classes? Myteacher requested me to design an app that would help both students and staff of the school, future-proofing the product for a remote-first digital learning experience.
Here is the design of an app that enables and motivates students to keep up with exercises every week. The language center keeps control of the course material distribution.
Understanding the challenge
Demand for online language classes has exponentially increased with the pandemic. To remain competitive, Myteacher needs to prove itself as a best-in-class online language courses provider. A customized application, tailored to the needs of Myteacher stakeholders (students, founder and staff of Myteacher), can achieve this.
Student needs:
When students decide to sign up for a class at Myteacher, they must juggle between different course material: a lesson manual, audio files for pronunciation, a google doc, exercises from the textbook, dialogues, flashcards and role play cards. Currently these files are sent by WhatsApp in the group class chat. The diverse course content discourages the student to practice. Students are usually working adults with limited spare time to properly learn a language. They may be discouraged doing the exercises and downloading all the course material and shifting between them, every week.
Providing an app that integrates all the course material in one place would save the student some time and enable him/her to complete exercises while communing, for instance. At any break time, instead of checking social media feeds, the student can stay productive and do language exercises from his/her bed ;). There is no need to open books, laptops, notebooks to learn, instead just grab your phone and go.
Myteacher needs:
Talking to the founder of Myteacher, there has been consideration to create an app in order to keep control of the copyright over the course material the school has been developing for years, since 2006. The app would enhance the student learning experience while the language center can control the sharing of material.
However, the app needs to be different from the popular language learning apps like Duolingo and Babbel that focus on individual learning. Myteacher believes in the creation of a community and regular classes centered around a teacher to make learning fun and alive. I believe creating an app would allow Myteacher to stay true to its mission, while adapting to more demand for online courses.
Research Methods
The Survey
A Google form was sent to current students of Myteacher. The focus of the survey is to determine pain points when they are studying for class. Real data findings will confirm whether the students think there are too many different learning materials to handle and will give a perspective on what could be improved to facilitate learning. I have also analyzed users’ responses to the relevance of creating an app, and what type of content they would like to see in it.
Quotes from survey respondents:
“Remembering vocabulary and listening French are my biggest problems when learning French”.
“ I wish there was a better organization when sending class material. Right now we have content separately on Google Drive, WhatsApp and email”
“I wish I could self study more, practice more often after class especially speaking, and not wait for the next class”
Almost all users pointed out that they wanted to improve speaking skills.
Personas
After investigating the survey responses, it came to light that there are two groups of users that share similar traits. I have thus created two user personas that represent each type of user. User personas help identifying which user journeys are the most important to develop.
On one side, there is the high school student who is dedicated full time to study but pressured to get good grades in French and on the other side, the working adult passionate about speaking French but is pressured to prioritize work.
Tom:
Highschool student, 16 year old, and needs to obtain a French certificate at beginner level to apply to university. Has time to study, but he can find it challenging to keep on studying French when he has a deadline for his other assignments and exams. He is tech savvy and easily adapt to new apps.
Habits:
- studies every day for school.
- Use mobile very often for social media & mails from school (increase of use during the pandemic).
Pain points:
- Hard to focus when he has to study lessons and do exercises repeatedly, all day in front of the computer.
- Pressure to get good grades in French to apply to universities.
Goal:
- Keep himself motivated, focused & awake with more interactive content.
- Get better grades in French.
Annabel:
Digital marketing manager, 35 years old, and learns French by passion. Next summer she plans to travel to France and wants to be able to conversate in French once there. Despite her motivation, after a long day at the office it can be challenging to catch up on homework and get ready for her Tuesday French class. Sometimes, between looking up vocabulary and watching Netflix, the choice is quickly made.
Habits:
- Goes to the office everyday.
- Use mobile very often for social media & mails from work.
Pain points:
- It is hard to practice French. She can only see her teacher once a week and has limited time to speak to her, since the teacher has to dedicate herself to 7 other students during class.
- Motivate herself to practice French after a long day at work.
Goal:
- Reach conversational French.
Goals and non-goals
I took a moment to reflect how the app can best help the students.
Students raised the issue with having material scattered in WhatsApp, Google Drive and email. An application would integrate the material and keep everything in one place. The material would still exist in the current format but the condensed version of an app would motivate students since they are now able to complete exercises anywhere from their phone.
The other issue raised by students is speaking. How can the app help students with speaking? The ideal way to reach conversational French is to speak with a native, as much as possible. While a native person may not be available 24/7, an app on the phone is. Here are some of the ideas on how the app can improve speaking:
- There would be audio files where a native French speaker repeats a word twice in French, and the student can repeat afterwards.
- Or the contrary, where the word is written on the page, the student reads, guessing the pronunciation.
- I was also thinking of putting DELF-type exercises where there is a conversation in French and the student has to complete answers to check his/her listening skills (DELF: Diploma of French-language studies).
- But what else can I come up with? How about including a chatbot? It would test improvisational skills of the user to common situations like filling a complaint, booking a hotel etc. It would be the closest thing to talking to someone.
Due to the limited resources of the language institute, and for the feasibility of this project, we will use the existing content of audio files and flashcards in the project. Thus, the exercises supported by the app, are pronunciation exercises and DELF-type listening exercises.
User Flowchart
Now knowing the goals of the students (improve speaking and having content in one place), I map out the user tasks flows in the application, that will help student achieve theses goals.
Wireframes
I drew wireframes to quickly sketch ideas and make changes in the information architecture. The wireframes made me realize that two pages can be folded into one, and some pages can be eliminated from the app like the index of exercises. The sooner the student gets to the exercise, the better.
In this app, the students will be pressing buttons a lot and write a lot. Thus, I have made sure that these actions are easy to perform. By placing buttons at the bottom of the page the user can effortlessly click onto the next exercise. The text box is on the upper half of the screen so that the user can see what he/she is writing when the keyboard pops up.
I also drew animation concepts I wanted to place in the app.
Visual Research
Inspiration Board
I have looked at what language learning applications were doing for design and information architecture. They heavily gamify the process of learning. Similarly to my design, they encourage the user to do exercises. However, there are quite some differences to take into account between my project and these applications. They don’t exactly serve the same audience.
- We will not be gamifying the app (for now) and focus on what is feasible with the current resources of the language institute.
- We need to re-use ready-made exercises & audio files to save time.
- The onboarding will be different because the app is only available to students enrolled in the language center and not to the general public.
Iteration
I then draft the high fidelity prototype on Figma. The design is repetitive with too many big buttons in the first draft. So the second iteration was focused on making the design more eye-catching, but also simple so that the user can focus on solving exercises.
Color Palette
Orange and grey are included in the color palette. They are the official colors of Myteacher, visible on the logo and on the website. Grey is not suitable for call-to-action buttons. Objects in grey can be mistakenly interpreted as minor or not functional. Thus, bright blue is included in the color palette. Dark grey for text.
Typography
Poppins font is used for modernity and good readability on mobile. Only one font type is used for simplicity. To create hierarchy between text sections, a type scale of 1.25 is applied.
Illustrations
I had fun animating the logo: it consists of two mascots smiling and talking to each other, which can be used for many purposes. I used it to greet the user and give the user his/her grades and other feedback. Animations and mascots influence the emotional appeal of the application. We want to set the tone for a vibrant, positive environment that encourages learners (Aagesen & Heyer, 2016). Mascots also reinforce brand recognition of the language institute (Yalanska, 2020).
Final Design
Onboarding Flow
The onboarding only takes one step. The language center has already registered the student so the user only needs to enter his or her name in the app to be assigned to an account.
Practicing exercises
After onboarding, the student can start exercises from lesson 1. First, there is an index of lessons. Then, different exercises types and course material are available per lesson. The account unlocks one lesson after each week’s class. It is better than giving the students all the material accessible at once. Unlocking vocabulary, audio files and exercises per lesson enables the student to receive a curated workload that is relevant for next class.
Conclusion
What did I learn?
I have designed an application that serves both the user needs and Myteacher needs. The user can now practice speaking skills & be more confident in learning languages now that their course load is on their phone. For Myteacher, this solves the issue of copyright since the application enables to control the distribution of course material. Audio files and flashcards are only available through the app and cannot be downloaded and shared. The app re-use the course material so that the language center is not burdened with the task of creating more content. Surveying the students helped me identify what students struggle most with in their learning journey.
What are the next steps?
- Usability test of the prototype with potential users
- A business model
Future Features
In the future, the app could be shared to anyone outside the center, for a monthly subscription and could be a promotion tool for Myteacher.
Final Thoughts
While Duolingo and Babbel are great tools to learn a language, I believe they are not enough to master a language. In-person classes or virtual classes are what really gives the joy of learning a language. A native teacher provides a glimpse of the culture and classmates can share their passion for language. Outside classes, the community does activities together like going out for a French movie or going to a Spanish tapas restaurant. Learning a language is after all learnt through interactions. These interactions are hard to replicate solely with an application. Secondly, apps have a hard time explaining grammar and formality, especially for languages with complex structure like Japanese (Ravenscraft, 2019). The design of applications favors short explanations and exercises (Ravenscraft, 2019).
Language learning applications should be designed in a way that complements a language class. Not replace it. A language learning application fills in the gap when students need to prepare homework and practice. This is where they are most helpful to the user. This is where design should be focused on.
By combining classes and Myteacher app, I believe the students can achieve a conversational level in any languages!
Special thanks
I would like to thank founder of Myteacher Daniel Kermorvant, for giving me the opportunity to suggest a design for the app. Thank you for being open to my suggestions and being great to work with!
This project was made possible thanks to a piece of advice from Johnny Woo, the product designer for Carsome. For this project, he advised me to really focus on answering the question of why Myteacher would need an app? What benefits would it bring to the stakeholders, to take the painstaking effort to create an app from scratch? The learning goals of this project were to unveil specific pain points of stakeholders with data, and provide a design solution. Thank you Johnny!
I hope you have enjoyed this article, please make sure to have a look on my thought-process on other projects.
Hi, I’m Gwenn Le Pechoux, a Product Designer based in Kuala Lumpur, Malaysia. Here are some of my projects through my personal portfolio. And let’s connect on LinkedIn!
References
Aagesen, P., & Heyer, C. (2016). Personality of Interaction. Proceedings Of The 2016 CHI Conference On Human Factors In Computing Systems. doi: 10.1145/2858036.2858521
Ravenscraft, E. (2019). 500 Days of Duolingo: What You Can (and Can’t) Learn From a Language App (Published 2019). Retrieved 16 January 2021, from https://www.nytimes.com/2019/05/04/smarter-living/500-days-of-duolingo-what-you-can-and-cant-learn-from-a-language-app.html
Yalanska, M. (2020). Design Me Live: The Power of Mascots in UI and Branding. Retrieved 16 January 2021, from https://blog.tubikstudio.com/design-me-live-the-power-of-mascots-in-ui-and-branding/
