Virtual Lingo
A Language Learning Platform that supports Traditional Education Settings
A Language Learning Platform that supports
Traditional Education Settings
Project Type
Language Learning App
My Role
UX Designer
Timeline
March - June 2024
(3 months)
Stack
Figma, FigJam, Teams
Project Type
Language Learning App
My Role
UX Designer
Timeline
March - June 2024
(3 months)
Stack
Figma, FigJam, Teams
Overview
Overview
Language learning app is as popular now as it's ever been, and there are many app options to learn new languages in the market. However, I believe there are still some potential features that should be developed and improved to provide a unique experience for both educators and students.
Problem
Most mobile language learning apps are geared towards self-learning, with only a few designed to support both educators and students.
Goals
Understand the goals and behaviors of students using language learning apps to design a platform tailored to support learning programs in educational settings.
Overview
Language learning app is as popular now as it's ever been, and there are many app options to learn a new language in the market. However, I believe there are still some potential features that should be developed and improved to provide a unique experience. In this project, we are seeking to understand the goals, motivations, and behaviors of language learning students and propose the design of a mobile language-learning app.
Problem
Most mobile language learning apps are geared towards self-learning, with only a few designed to support both educators and students.
Goals
Understand the goals and behaviors of students using language learning apps to design a platform tailored to support learning programs in educational settings.
Overview
Language learning app is as popular now as it's ever been, and there are many app options to learn a new language in the market. However, I believe there are still some potential features that should be developed and improved to provide a unique experience. In this project, we are seeking to understand the goals, motivations, and behaviors of language learning students and propose the design of a mobile language-learning app.
Problem
Most mobile language learning apps are geared towards self-learning, with only a few designed to support both educators and students.
Goals
Understand the goals and behaviors of students using language learning apps to design a platform tailored to support learning programs in educational settings.
Project Type
Language Learning App
My Role
UX Designer
Timeline
March - June 2024
(3 months)
Stack
Figma, FigJam, Teams
Research
Research
To begin our research, we started with a literature review.
We researched a total of 20 articles and scientific journals related to the mobile-assisted language learning space. In the end, we narrowed our search to 6 articles that we determined to be the most relevant to mobile language learning applications in educational settings.
Keys Insight from Literature Review
Understanding the importance of designing user adaptive language learning applications for mobile context.
Language learning on mobile devices can be more effective than conventional instructional approaches when observing language acquisition.
Teachers and students play a major role in the adoption of MALL in educational settings.
Key Insights
Understanding the importance of designing user adaptive language learning applications for mobile context.
Language learning on mobile devices can be more effective than conventional instructional approaches when observing language acquisition.
Teachers and students play a major role in the adoption of MALL in educational settings.
Competitive Analysis
I compared core features of competitors to understand the functionality design of existing learning language platforms.
Based on the analysis of Proloquo2Go, Duolingo, and Babbel, I devised design opportunities which can be used and improved to solve user problem identified through research.
Competitive Analysis
I compared core features of competitors to understand the functionality design of existing learning language platforms.
Based on the analysis of Proloquo2Go, Duolingo, and Babbel, I devised design opportunities which can be used and improved to solve user problem identified through research.
Proloquo2go
Proloquo2go
Providing comprehensive speech lessons.
Aimed at people with speech disability.
Providing comprehensive speech lessons.
Aimed at people with speech disability.
Duolingo
Duolingo
Supporting practice with many types of exercises.
Teaching whole language points.
Supporting practice with many types of exercises.
Teaching whole language points.
Babbel
Babbel
A good mobile tool at learning phrases and vocabulary.
Its exercises were reviewed as dull.
A good mobile tool at learning phrases and vocabulary.
Its exercises were reviewed as dull.
Key Insights from Competitive Analysis
Personalization Gap: Competitors lack personalized adaptive learning paths.
User Interface Variability: Wide range in usability across apps, affecting user engagement.
Gamification Overemphasis: Excessive gamification often detracts from learning effectiveness.
Real-World Application: Limited features for real-world language application and practice.
Technological Adoption: Inconsistent use of advanced technologies like speech recognition.
Pricing and Accessibility: Significant variability in pricing, essential accessibility features often premium.
Community Features: Inconsistent availability of community and social learning features.
Content Quality: Varying levels of educational content quality and depth.
Key Insights from Competitive Analysis
Personalization Gap: Competitors lack personalized adaptive learning paths.
User Interface Variability: Wide range in usability across apps, affecting user engagement.
Gamification Overemphasis: Excessive gamification often detracts from learning effectiveness.
Real-World Application: Limited features for real-world language application and practice.
Technological Adoption: Inconsistent use of advanced technologies like speech recognition.
Pricing and Accessibility: Significant variability in pricing, essential accessibility features often premium.
Community Features: Inconsistent availability of community and social learning features.
Content Quality: Varying levels of educational content quality and depth.
Key Insights
Personalization Gap: Competitors lack personalized adaptive learning paths.
User Interface Variability: Wide range in usability across apps, affecting user engagement.
Gamification Overemphasis: Excessive gamification often detracts from learning effectiveness.
Real-World Application: Limited features for real-world language application and practice.
Technological Adoption: Inconsistent use of advanced technologies like speech recognition.
Pricing and Accessibility: Significant variability in pricing, essential accessibility features often premium.
Community Features: Inconsistent availability of community and social learning features.
Content Quality: Varying levels of educational content quality and depth.
Target Users
Target Users
We created two user personas to better emphasize users with different motivations and to help guide our design.
The personas were created based on observation of 4 people who were learning new languages. Our target users are from different background, but they all needed to learn new languages.
Scenarios
Scenarios
After defining user needs and frustrations from Personas, we developed user scenarios to validate our design choices.
These scenarios visualize users' steps to achieve a specific goal and contextualize Virtual Lingo's utility in real-life situations.
After defining user needs and frustrations from Personas, we developed user scenarios to validate our design choices.
These scenarios visualize users' steps to achieve a specific goal and contextualize Virtual Lingo's utility in real-life situations.
User Survey
We created user survey using Google form with 3 sections and 23 questions.
The survey was taken by graduated student in our school. We validated our initial design hypothesis based on the collected information from the survey.
We created user survey using Google form with 3 sections and 23 questions.
The survey was taken by graduated student in our school. We validated our initial design hypothesis based on the collected information from the survey.
Users find Speaking is priority skill when learning new languages.
The survey indicates Speaking is priority with 11 out of 14 people rated it as the most important skill.
The survey indicates Speaking is priority with 11 out of 14 people rated it as the most important skill.
Most of users learning new languages because of personal interest.
Travel and career are also reasons for learning new languages. Besides that, users also learn new laguages with different reasons rather than personal interest, travel, and career.
Travel and career are also reasons for learning new languages. Besides that, users also learn new laguages with different reasons rather than personal interest, travel, and career.
Users prefer using mobile app to learn new languages.
Traditional class is also chosen by many people when learning new languages. Traditional class is structured and force learners to commit the class schedule. Besides that, books, friends, and videos are also good way to learn and practice while learning new languages.
Traditional class is also chosen by many people when learning new languages. Traditional class is structured and force learners to commit the class schedule. Besides that, books, friends, and videos are also good way to learn and practice while learning new languages.
Wireframing
We created 2 user flow wireframe based on the scenarios.
To begin our research, we started with a literature review.
We researched a total of 20 articles and scientific journals related to the mobile-assisted language learning space. In the end, we narrowed our search to 6 articles that we determined to be the most relevant to mobile language learning applications in educational settings.
User Survey
We created two user personas to better empathize users with different motivations and to help guide our design.
The personas were created based on observation of 4 people who were learning new languages.
User Flow Wireframe 1
User Flow Wireframe 2
First Click Test
To identify critical areas for design improvement, we observed user behaviors using low-fidelity wireframes to measure how effectively new users navigated to essential parts of the app.
We recruited participants through social media and language forums, conducting tests remotely via Zoom and Figma. These heatmaps are instrumental in understanding user navigation patterns and highlighting areas that may require further simplification or emphasis.
Key Findings from First Click Analysis
Quick Access to Primary Features
High Accuracy in Primary Navigation
Moderate Confusion with New Features
Delays in Secondary Navigation
Key Findings from First Click Analysis
Quick Access to Primary Features
High Accuracy in Primary Navigation
Moderate Confusion with New Features
Delays in Secondary Navigation
Heatmap 1
Heatmap 2
User Testing
To identify usability issues and refine the app's design, we tested 8 users with different levels of language learning experience and backgrounds.
Key Findings from Usability Testing Analysis
Users found the analytics icon confusing and suggested a change.
The "Choose your level" page needs slight modifications for better usability.
Enhancements include adding a search option in the "What will you learn?" section, introducing a setting page for managing reminders and analytics, and creating pages for opting for instructor assistance and listing examination tests.
Implementing a community platform for user interaction and skill exchange to improve user experience.
The app should differentiate user intents between recreation and examination purposes for a more tailored experience.
Redesign the instructor's page for better usability, providing rewards, such as discounts, for users engaging in community exchanges.
Key Findings from Usability Testing Analysis
Users found the analytics icon confusing and suggested a change.
The "Choose your level" page needs slight modifications for better usability.
Enhancements include adding a search option in the "What will you learn?" section, introducing a setting page for managing reminders and analytics, and creating pages for opting for instructor assistance and listing examination tests.
Implementing a community platform for user interaction and skill exchange to improve user experience.
The app should differentiate user intents between recreation and examination purposes for a more tailored experience.
Redesign the instructor's page for better usability, providing rewards, such as discounts, for users engaging in community exchanges.
Final Solution
Onboarding
The first touchpoint for users
Designed to tailored the app experience to individual lesson preferences and goals.
Onboarding
The first touchpoint for users
Designed to tailored the app experience to individual lesson preferences and goals.
Onboarding
The first touchpoint for users
Designed to tailored the app experience to individual lesson preferences and goals.
Features
Features
Features
A comprehensive tool for users
A reminder tool to remind users to learn with scheduled date and time.
Suggested lessons
Tailored to user preference and goals that ensure suggesting users approriate lessons.
Profile page
Allowed users to review their daily stats and offered insights into progress towards the users' goal.
A reminder tool
Remineded users to learn with scheduled date and time.
Suggested lessons
Tailored to user preference and goals that ensure suggesting users approriate lessons.
Profile page
Allowed users to review their daily stats and offered insights into progress towards the users' goal.
A comprehensive tool for users
A reminder tool to remind users to learn with scheduled date and time.
Suggested lessons
Tailored to user preference and goals that ensure suggesting users approriate lessons.
Profile page
Allowed users to review their daily stats and offered insights into progress towards the users' goal.
Style Guide
We defined the color palette that relates to education.
Blue is known for calming and soothing color, promoting focus and concentration, which are essential qualities for learning environments. It helps create an ideal atmosphere for studying and problem-solving, reducing anxiety and improving cognitive performance.
We defined the color palette that relates to education.
Blue is known for calming and soothing color, promoting focus and concentration, which are essential qualities for learning environments. It helps create an ideal atmosphere for studying and problem-solving, reducing anxiety and improving cognitive performance.
Typography
Font (Mobile) - Inter
Heading 1
Heading 2
Subtitle
Body
Caption
Heading 1
Heading 2
Subtitle
Body
Caption
Font weight - Bold\Font size - 22px
Font weight - Semibold\Font size - 20px
Font weight - Medium\Font size - 18px
Font weight - Regular\Font size - 16px
Font weight - Regular\Font size - 14px
Bold - 22px
Semibold - 20px
Medium - 18px
Regular - 16px
Regular - 14px
Takeways
The power of early testing
I discovered that earlier testing is very important part in the design process. Including a broader demographic in early usability test would have highlighted the second navigation issues sooner, providing more time for adjustments.
The power of early testing
I discovered that earlier testing is very important part in the design process. Including a broader demographic in early usability test would have highlighted the second navigation issues sooner, providing more time for adjustments.
The value of rapid prototyping
Implementing quicker iteration cycles with real-time user feedback could have accelerated usability improvements, especially for secondary navigation features.
The value of rapid prototyping
Implementing quicker iteration cycles with real-time user feedback could have accelerated usability improvements, especially for secondary navigation features.
Users find Speaking is priority skill when learning new languages.
The survey indicates Speaking is priority with 11 out of 14 people rated it as the most important skill.
Most of users learning new languages because of personal interest.
Travel and career are also reasons for learning new languages. Besides that, users also learn new laguages with different reasons rather than personal interest, travel, and career.
Users prefer using mobile app to learn new languages.
Traditional class is also chosen by many people when learning new languages. Traditional class is structured and force learners to commit the class schedule. Besides that, books, friends, and videos are also good way to learn and practice while learning new languages.
Takeaways
We created 2 user flow wireframe based on the scenarios.
User Flow Wireframe 1
User Flow Wireframe 2
Wireframing
First Click
First Click Analysis
Quick Access to Primary Features
High Accuracy in Primary Navigation
Moderate Confusion with New Features
Delays in Secondary Navigation
Heatmap 1
Heatmap 2
To identify critical areas for design improvement, we observed user behaviors using low-fidelity wireframes to measure how effectively new users navigated to essential parts of the app.
We recruited participants through social media and language forums, conducting tests remotely via Zoom and Figma. These heatmaps are instrumental in understanding user navigation patterns and highlighting areas that may require further simplification or emphasis.
User Testing
To identify usability issues and refine the app's design, we tested 8 users with different levels of language learning experience and backgrounds.
Final Solution
Style Guide
Typography
Takeaways
We defined the color palette that relates to education.
Blue is known for calming and soothing color, promoting focus and concentration, which are essential qualities for learning environments. It helps create an ideal atmosphere for studying and problem-solving, reducing anxiety and improving cognitive performance.
Key Findings from Usability Testing Analysis
Users found the analytics icon confusing and suggested a change.
The "Choose your level" page needs slight modifications for better usability.
Enhancements include adding a search option in the "What will you learn?" section, introducing a setting page for managing reminders and analytics, and creating pages for opting for instructor assistance and listing examination tests.
Implementing a community platform for user interaction and skill exchange to improve user experience.
The app should differentiate user intents between recreation and examination purposes for a more tailored experience.
Redesign the instructor's page for better usability, providing rewards, such as discounts, for users engaging in community exchanges.
Font (Mobile) - Inter
Heading 1
Heading 2
Subtitle
Body
Caption
Font weight - Bold\Font size - 22px
Font weight - Semibold\Font size - 20px
Font weight - Medium\Font size - 18px
Font weight - Regular\Font size - 16px
Font weight - Regular\Font size - 14px