UX/UI Case Study
LINGO : A Language Learning App
Solving Language Learners Problems Through Design!
Context
I completed this assignment as part of the 10k Designers Cohort 6 program.
Overview
Language learning is the process of acquiring the ability to understand, speak, read and write a new language. It involves vocabulary, grammar, pronunciation and cultural aspects associated with the language.
How is language learning relevant?🤔
Apart from helping people from different cultures & countries to connect and communicate with each other, language learning has several benefits. It improves communication skills, enhances cultural understanding as language is closely tied to a community’s traditions, customs & beliefs.
Language learning also opens up job opportunities. Many employers value candidates who are multilingual as it shows their adaptability, cross-cultural competence and the ability to engage with a diverse customer or client base.
Research suggests that language learning improves memory, problem-solving skills and even enhances overall brain health.
What motivated me for a language learning app?
Being a graduate in literature, I have developed a deep interest in languages over the years. Exploring different languages and their culture has always fascinated me.
During my time in cohort 6 at 10K Designers, I got the opportunity to design a mobile app as part of an assignment. I decided to design a language learning app as it aligned with my interest and felt like a perfect fit for me.
I am super excited to be writing my first ever case study and sharing my design journey with everyone. VAMOS!✊
Problem Statement
Despite the widespread desire among individuals to learn new languages, various factors such as time constraints, motivational challenges and lack of access to quality learning resources have led to significant impediments in the learning process. As a result, individuals give up learning which poses a critical need for effective solutions that can address these issues & help these learners achieve their goals.
Solution
Design a mobile app for tracking and managing daily language learning goals, including features for setting goals, tracking progress and finding helpful resources for language learning.
App Preview
If you are in a rush, I have made a YouTube video of my app’s prototype. Check it out! 👇
My Design Process
Target Audience 🎯
1. Research🔍
I began my research process with the Secondary Research method because I wanted to understand the needs of my learners and the challenges they faced with language learning. I read various articles on language learning posted over the internet.
I viewed several threads on Quora & Reddit in order to know the experiences people have regarding language learning. To further strengthen my research and to know more about learners issues, I read user reviews of language learning apps on Play Store.
KEY HIGHLIGHTS 👇
- The hardest part of learning a new language is consistency and making it a routine. Source
- According to a study, 43% of language learners quit within 6 months of learning with the most common reasons being lack of motivation, slow progress and lack of time. Source
- A lot of learners have the fear of speaking with strangers, feeling ashamed & embarrassed about their conversational skills, therefore not getting enough practice and eventually quitting. Source
- Some learners also felt that language learning would be a lot easier for them if they had a friend to learn with.
User Reviews 📝
So I continued my research process and felt I needed more data about my users before jumping onto finding the solutions. I didn't have the option of interviewing actual language learners , instead I thought it would be best to read the user reviews of language learning apps.
The idea proved a success and I gained some valuable information on the challenges users face with these apps.
I noted down all the important points and it made it easier for me to find the right problems to solve.
Competitive Analysis 📊
I conducted a competitive analysis of several popular language learning apps. I felt the need to understand the landscapes of the existing apps in order to ensure that my app would stand out while also meeting the needs of my target audience.
Insights 💡
By using some of the language learning apps on my phone, I gained valuable insights. I learned about the user flow of apps, the features they offered, their UI designs and the kind of experience it all provided. This helped me identify the best practices as well as the mistakes I needed to avoid in designing my app.
2. DEFINE
During the defining phase, I went through my research to gain insights into the challenges faced by language learners. By identifying the pain points, I created 2 user personas. This allowed me to better empathize with my users and gain a deeper understanding of their issues .
Pain Points 🧠
From the pain points I had identified, some of them were more common than others. Lack of motivation is one such common issue faced by a lot of learners. Many users also faced the issue of being unable to review their previously learned lessons, making it difficult to memorize the words.
The diagram below shows some of the most important pain points that I felt needed addressing.
Insights 💡
Based on the secondary research conducted through articles and user reviews of language apps, I learned about the various challenges faced by learners in learning a new language.
Their most common pain points include lack of motivation, lack of practice, lack of progress tracking, short attention spans, etc.
User Personas 🧔
I created 2 user personas focusing on two different groups of people. One is based on a language student in college, who wishes to do well in her exams. The other is based on a freelancer who wishes to develop a language learning habit before he goes on a vacation to Madrid, Spain.
Insights 💡
By creating User Personas, the needs of my target audience became more clear to me in a sense that I could now empathize with them and focus on solving their problems.
3. IDEATION
For the ideation process, I started off with brainstorming sessions in order to come up with possible solutions. Then I did mood boarding to explore design inspirations that I could use in my app. I created Information Architecture based on the solutions I came up with and followed it up with basic low fidelity wireframes using pen & paper.
i) Brainstorming 🧠
While brainstorming, I came up with several ideas for solving the problems of my users. Here are some of the features that can be implemented based on various pain points of language learners:
Now in order to decide which features to proceed with, I used the MoSCoW method to prioritize them based on their level of importance.
Here’s what it looks like 👇
Insights💡
Using the MoSCoW method, I was able to prioritize the features for my app and it helped me to move on to the next step without wasting a lot of time.
ii) Mood boarding
To gather inspiration for my app’s visual design, I explored platforms like Mobbin and UI Sources. I went through several language learning apps and saved screens for reference. I collected everything in Figma and used sticky notes to highlight the screens that felt interesting to me.
iii) Information Architecture
I divided the IA into 3 flows:
- Onboarding Flow — Includes Getting Started, Questionnaire screens for users and the Sign Up/ Log In screens.
- Navigation Bar Flows — Includes the most important pages of the app such as Home Screen, Review screen, Explore, etc.
- Lessons Flow — Includes all screens of the active lesson.
Insights 💡
Making the IA of my language learning app provided me with an organized structure of individual screens. Each screen/page contained possible content for the app along with CTAs. By making the IA , I got an idea of the number of screens I will have to design and it also made the wireframing process easier for me.
iv) Wireframes
For the wireframing process I decided to do a paper sketch of the app’s screens. I used different colored pens for drawing elements in order to give the sketches a visual touch.
Insights 💡
Before jumping into Figma and starting with the visuals, I personally think it is best practice to do wireframing using pen & paper. It allowed me to lay out my ideas on paper and see if there are changes to be made early on before doing the visuals. I feel that doing the wireframes set the stage for the visual design of my app.
4. VISUAL DESIGN
Now, for the most fun part of the assignment i.e. designing the visuals, I took help from the wireframes and designed all the screens in Figma. I went with an iPhone 13-mini frame as I was designing for iOS.
After several iterations and feedback from peers and mentors, I completed the visual design of my language learning app.
During the visual design, I kept in mind the pain points of my target audience and the solutions that I needed to provide through my design.
I have divided the final designs into several parts and used labels to describe the elements on the app’s screen.
i) Get Started Screens :
I designed the Getting started screens to provide the users with a little bit of insight about the app’s features. Users can simply swipe to the left to navigate through all the screens. Users do have the option of skipping the screens by pressing the Get Started button or Log in link.
ii) Onboarding Screens :
The onboarding process is supposed to create a personalized learning experience for the users based on their goals. They have the options to choose from the language they want to learn, their level of understanding of that language, the goal they want to achieve and the amount of time they are willing to spend on learning language each day.
iii) Learn Screen :
As the name suggests, this screen contains all the vocabulary lessons divided into several sections. Each section has categories that contain bite-sized lessons in a user-friendly manner.
At the end of each section there is a “Lessons Recap” feature that serves as a helpful tool for learners to review previously learned lessons. This feature aims to help the learners to improve their vocabulary skills.
iv) Review Screen :
The purpose of the Review screen is to provide users with easy access to the lessons they have already completed. Words are stored according to their respective sections and can be reviewed easily.
Review feature directly addresses the issue of “lack of practice” faced by many learners.
v) Explore Screen :
This page contains all the language learning resources for the users to explore. Beyond vocabulary lessons, these resources offer learners with a deeper understanding of the language they are learning. Cultural insights, audiobooks, and short stories are included to provide learners with additional knowledge. Songs also serve as a fun way to improve learners’ listening & speaking skills.
Here my aim is to enhance the language learning experience of my users by offering them a fun and non-repetitive learning content.
vi) Community Screens :
The aim of community feature is to help the users connect with language learners around them. Users can participate in community challenges to test their language skills. Adding a friend and learning together can also be done within the community. Community also offers the valuable feature of booking sessions with native speakers, who assist the users with their language learning.
With the support of native speakers & friends , learners would no longer feel demotivated in achieving their goals.
vii) Lessons Screen :
Learners start off by learning the basic vocabulary of the language. Simple greeting words are introduced to the learners at first. Vocabulary lessons are given using various methods where the user is asked to choose the correct answer, complete the given word and true or false. The aim is to make the learning process more engaging and less repetitive for the learners.
viii) Goals & Reminders Screen:
To develop the habit of learning on a regular basis, users need to set a learning goal that aligns with the time they wish to dedicate towards learning. The purpose of the Daily Goals feature is just that.
Now to make sure that learning goal is followed, that’s where Reminders come in. Reminders provide the users with flexibility to choose the most suitable time and day for their language learning goals.
Style Guide
i) Color Palette
I chose a monochromatic color scheme for my app’s color palette, focusing on shades & tints of Purple . I decided to use Purple as the primary color as it gives a creative touch to the visuals and appeals to a wide range of users which was a perfect fit for my target audience. For the neutral colors I opted for shades of White & Gray.
Throughout the app, I followed the 60–30–10 color guideline. Here 60% of the colors are neutral, covering the background and the texts. Around 30% of the colors are tints & shades and the remaining 10% of the colors are primary, used in important places such as CTAs and icons.
ii) Fonts
For my app’s name, I chose the font called Luckiest Guy. It gives a kind of fun vibe to my app and its heavy font weight looks well placed on the splash screen of my app.
For the rest of the app, I opted for a sans serif font called Lato. It has a clean and modern look to it and has great readability which is required for a language learning app. Lato offers various font styles to choose from which helped me create a visual hierarchy between the headings and the body texts of my app.
iii) Iconography
For the UI, I used Filled Icons throughout the app in order to ensure the consistency in design and enhance the overall visuals of my app.
5. Prototype
Here is the prototype of my language learning app.
To Conclude
Challenges I faced…🏋️
Since I was designing a mobile app for the very first time, I encountered everal difficulties throughout the journey. Here are some of the problems I faced :
- As I was designing a language learning app, I needed to find the right content in a foreign language. It took a lot of effort to comb through several language articles and decide on the best learning material for the app.
- Finding relevant Illustrations & Icons for my app’s content proved to be a tedious task. Many of the sources offered paid illustrations and the icons were only accessible in PNG format.
- Finding the ideal color palette for my app was quite challenging considering the kind of impact colors can have on visual design as well as the user experience. I tried various themes such as Complementary, Split complementary, Dark mode, etc. before settling on the Monochrome theme which aligned pretty nicely with my app’s overall aesthetics.
Things I learned…
The whole designing a mobile app assignment has been a huge learning experience for me. It involved doing research, creating wireframes on paper and then visual design.
I made mistakes along the way and learned from them through iterations and feedbacks from fellow designers.
Initially, my understanding of language learning was limited to the fact that one can only learn through vocabulary & grammar. But during my research I discovered that there are various approaches to learning a language. These include techniques like listening to songs in your target language, watching movies with subtitles on, communicating with natives among others.
Interestingly enough, during the design process I managed to learn a few Spanish words myself and I am thinking of continuing to see where it goes.
My biggest takeaway in terms of visual design is the importance of seeking inspiration from the best designs. By learning from the best designs out there, one can improve their own skills and look to get better.
Things I would like to add/improve…
- Add a gamification based learning feature to make the app more engaging for the users.
- If I could make the learning process more interactive using sounds & animations.
- A few more screens for the Explore Tab if I had more time.
- Improve overall user experience.
Still here? 😮
Congratulations! You made it to the end of my case study. Thank you so much for your valuable time.
If you have any feedback or want to connect with me, you can find me on LinkedIn & twitter.
Got a project in mind or want to work together on something? Book a Discovery Call with me.
