A language learning website

Project type: End-to-end mobile first website
Role: Sole UX/UI designer
Project duration: 3 months
Tools: Figma, FigJam, Optimal Workshop, maze
View hi-fi prototype
Currently, 43% of the world is bilingual, and 17% can fluently speak two or more languages. Also, 7 out of 10 individuals express a desire to begin studying a foreign language right now. The reasons for learning a new language are diverse. Usually, people start learning with some degree of motivation. However, people often give up on learning before reaching their satisfied level.
Solution

Developing a language learning product to help people stay motivated and learn languages efficiently.

1. Introduction 2. Research 3. Define
4. Design 5. Test 6. Conclusion
Introduction

Many people have experienced learning a foreign language or aspire to do so. They're motivated when they start learning, but they may stumble in their learning journey or realize that they lack enough time. These hurdles lead them to give up on learning the new language before reaching a level of satisfaction with their language proficiency.

I've learned several foreign languages, and I know many multilingual people. I've also seen friends give up on learning new languages despite starting with clear goals. I wish there was a product to help them stay motivated and learn efficiently.

How can we create a language learning website that delights people?
Research
Research Goal
Understanding the factors that reduce motivation for daily continuous learning so that we can create an effective product to support those who are struggling with language learning or those who are about to embark on this journey.
1. Getting to know how people perceive language learning
Research objectives
  • Understanding why people learn languages
  • Determining how people set goals
  • Identifying barriers for daily learning
  • Learning what gives people a sense of achievement
In order to collect a large amount of qualitative data, I conducted two different research methods.
Research methods
User interviews
4 people
age between 32-52
The first research method I conducted was User Interviews. User Interviews are used to collect qualitative data about a user's personal experiences.
Survey
18 people
age between 16-40
The second research method I used was a survey. Surveys are used to gather quantitative data from a wide range of language learners to help understand their goals, motivations, and learning methods.
After conducting these research methods, I was able to grasp the trends in people's awareness of language learning.
Results

After conducting these research methods, I wrote down every data point or idea on a separate sticky note and grouped related notes based on their similarities. Creating an affinity map helped to better understand users and their needs, to define product requirements, or to plan future product features.

View the full affinity map
User Goals
  • Communicating to friends and family in a new language
  • Understanding different cultures
  • Using a foreign language for travel
  • Reading / watching foreign media
The users' goals were similar across different age groups, but there were differences in learning styles and pain points depending on age, which seems to be influenced by their individual experience.
Age under 30
Learning Style
  • Self study
  • Digital resources
  • App
  • Movies
  • Website
Pain points
  • Being committed to learning long-term
  • Memorizing grammar and vocabulary
  • Being persistent and putting in effort daily
Age over 30
Learning Style
  • Face to face study
  • Flash cards
  • Textbooks
  • Newspapers
Pain points
  • Finding time and opportunity to practice regularly
  • No study partner
  • Memorizing grammar and vocabulary
I found that there are common points in the needs of language learners, regardless of their age or goals.
User needs
  • Convenience, accessibility and efficiency
  • Cultural content
  • Resources focused on grammar and vocabulary
  • Resources that make learning enjoyable
  • Opportunities for pronunciation and speaking practice
  • Flexibility to study with a busy schedule
2. Getting to know what competitors are focusing on
I conducted competitive analysis to understand the target audience, focus, and recent trends of existing websites in order to determine who they are targeting and what they are focusing on.
Competitive Analysis

I compared 3 language websites to understand how they are competing by identifying features and distinctive aspects aimed at fulfilling user needs.

I conducted user interviews, surveys, and competitive analysis to understand what is necessary for users to achieve their goals and what features are suitable.

Findings
  • Continuous studying
  • Maintaining motivation
  • Comprehensive resources
Define
Now that I've conducted user research, sifted through what I heard, and organized the data, it's time to articulate the problem I wish to solve for. Using all the insights I have discovered in the previous steps, I created a POV statement to find the right design challenges that need to be addressed.
POV (Point Of View) statement
I'd like to explore ways to enable people who wish to watch movies without subtitles to assess their current language proficiency and understand how much study is needed to watch a particular movie, because without tangible goals, sustained learning is challenging.
Then, I took the problem I just identified and turned that into an opportunity for design. This helped me to focus on users' needs and problems, rather than just jumping straight to solutions.
HMW (How Might We) question
How might we encourage individuals with specific goals to sustain their language learning?
View the full personas
Design
I brainstormed ideas for solutions that would be suitable for achieving the goals of the persona and set the project goal accordingly.
Project Goals
  • Providing features that give users a greater sense of achievement
  • Eliminating apprehensions towards language learning
  • Introducing the joy of language learning
Key features
Goal & level setting
Study tracker
Shadowing
Chat with native speakers
Audio guidance
Travel content
Notification
Explanation of vocab & grammar
I conducted card sorting with these key features with users and created a sitemap based on the results
Language learners tend to stumble more during the learning process than on the content itself, so we decided to focus on progress for achieving the persona's goals
View the site map
User Flows
User flows helped to understand user needs and identify potential issues or confusing elements that are related to progress checking.
View the user flows
Task Flow
Task flows helped to clarify the steps necessary for users to achieve specific goals and promote a user-friendly design approach
I created specific design layouts based on my user flows, task flows, and my general observation of how users conduct progress checks.
Progress checking
low-fidelity
View the full low-fidelity
mid-fidelity
View the full mid-fidelity
After creating the mid-fidelity wireframes, I conducted a quick test to check if users understood my design layout and if they found the interface intuitive.
mid-fidelity test
3 people (age 27-34)
• Check how many hours you need to study per day
→ 3/3 people could find the daily required study time, but the detailed page made them confused.
• Understand which study areas you need to focus
→ None of them understood the areas they need to focus on. While they were able to confirm the lesson content, they did not understand which ones needed to be the focus.
Comments from users
To check study progress, it's necessary to know how much the lessons have advanced rather than just the goal
I think displaying daily phrases and words at the top of the main page would increase motivation to learn
If the due date has passed, motivation tends to decline, people may give up the lessons
I need to improve the layout to make the learning progress understandable and easy to navigate, and make it more user-friendly overall
mid-fidelity (fixed)
When testing whether users could click on the intended button to check their progress, I found that the desired information was spread across different areas, making it difficult for users to navigate to the appropriate page. Additionally, there were elements that lowered motivation, so I modified the designs based on the results of mid-fidelity testing.
View the full mid-fidelity test
Branding
In order to build a user-centric product, it's essential to create a brand image that attracts users. Considering that many people give up language learning midway, we've set brand values by contemplating how to sustain continuous learning and support users' learning journeys.
Brand Value
Friendly / Encourage / Energetic / Supportive
Brand Logos
The two squares represent mutual support and being supportive
The dots circle represents globalization, and the rounded font expresses friendliness
The two crescents represent a sense of balance, and conveyed encouragement is represented through the strength of the font
Typeface
Desktop
H1 Poppins 46px
H2 Poppins 36px
H3 Poppins 26px
B1 Poppins 24px
B2 Poppins 20px
Function text M 22px
Function text S 16px
Mobile
H1 Poppins 24px
H2 Poppins 20px
H3 Poppins 18px
B1 Poppins 16px
B2 Poppins 14px
Function text M 16px
Function text S 10px
Poppins has a clean impression and its readability makes it suitable for language learning websites where a lot of text is to be read. Additionally, its support for various languages also led us to choose this font.
Colors
Primary color
EAA453
BB5B28
for large text
8B441D
for normal text
Secondary color
8BAF86
849E5A
475C26
Neutral color
F2EFEA
FFFFFF
I chose positive and calming oranges along with friendly greens to represent the brand values (Friendly, Encourage, Energetic, and Supportive). I selected a neutral color that also evokes oranges, creating an overall sense of coherence.
In order to make a user-friendly website, I conducted an accessibility check to consider color contrast and color-blindness.
I applied all branding elements to the wireframes and created high-fidelity wireframes
high-fidelity
Can these achieve the user's goals?
Test
In order to confirm whether high-fidelity wireframes can actually achieve user goals, I conducted usability testing.
Usability test
6 participants (3 women, 3 men)
age between 22-34
  1. Understand what services or features are available on the homepage
  2. Review a customized lesson plan and understand the journey to achieve goal
  3. Check the learning progress for this week on a graph to see if the learning time for each category has reached the target learning time and how much more learning is needed
  4. Select a subscription plan and check the comments from your mentor
Results from users
Yingyang, age 27
She was confused where to check weekly and monthly progress
Rui, age 32
He was confused about where to click the entire time
Peter, age 33
He finished all tasks without any issues
Kai, age 22
He was going back and forth between the progress page and progress details page
Yuriko, age 31
Instead of using the back button, she used the navigation bar to transition to another page
Saya, age 29
She struggled to find where to click to access the next lesson content
Need to change
During the usability test, people tried to click shadowed cards to see the details instead of clicking CTA buttons. Additionally, some users struggled to go back to previous pages when they got lost. It is frustrating for users to have difficulty navigating the page, so I clarified which areas need to be fixed accordingly.
Priority revisions
Home - Lesson intro
Progress details
Home - Subscription section
After I made design changes based on the usability test, the design is finalized.
View the full hi-fidelity test
Conclusion
To create a better product throughout the flow from research to design, it's crucial to grasp users' pain points and consider how to improve them. Therefore, user feedback is paramount, and hearing raw voices through research is necessary. After actually listening to user feedback in this project, I found it challenging to utilize that feedback to strategize improvements. The goal of this project was to develop a language learning product that maintains people's motivation and enables efficient language learning. The most critical aspect is how to sustain user motivation and provide resources for continuous learning. While we conducted research and tests with a limited number of users this time, to continue to improve the product to be more user-centric, I would like to conduct usability tests with an even larger user base and iterate accordingly.