Lingo WeChat
Lingo WeChat is a language app that helps users learn their preferred language through lessons and with the help of a tutor through video chat. This language app gives users an opportunity to connect with someone who is fluent in the language that they are interested in learning.
ROLE: Product Design, Information Architect, Research & Strategy, Wireframing, Prototyping, Interactive Design.
DATE: 2020
CONTEXT: Lingo WeChat is one of the UX project I worked on at CareerFoundry. The assignment is to research and design a responsive web app with a mobile first approach.
TOOLS: Figma, Lucid Chart, Google Hangout, FB messenger, Skype, Google Docs, pen and paper.
PROJECT OVERVIEW: A mobile apps that provides language lessons and access to tutors that are fluent in the preferred languages that users are interested in using the video chat option with ease. Lingo WeChat welcomes all for those who want to learn as fast as they want or at their own pace.
DELIVERABLES:
Research presentation
Interactive Prototype made with Figma
User testing of Prototype
What’s the problem?
How could we empower users learn a language?
Reason
Lots of people have many reasons to learn a language. Whether it is for self-improvement, advancing in your career, emigrated to a different country, deepen connections with others, or seeing the world.
Solution
Giving the opportunities for others to learn a new language anywhere at any time. An app that helps you through lessons at your own pace and to have one on one video session with a fluent tutor.
UX Research
Competitive Analysis and User Interviews
I have done a competitor analysis between Duolingo, Busuu, and Babbel to gain insights on the language app market. This allowed me to
Scope on Duolingo
Positives
Free and account not required
Engaging, Easy to navigate
Option to repeat words as needed
Set up times to study
Set your goals
Daily reminders will pop up for you to study
Flexibility to change goals if needed
Recorded videos of conversations and slow audio option
Friendly interface and easy on the eyes
Lessons are downloadable, so you can work offline
Negatives
As the app is free, you gave to collect heart gem in order to move onto the next lesson. However if you run out of the hearts, you have to purchase more hearts or wait.
The Splash screen and onboarding is straight forward. You have the option of creating an account or to start learning right away. It prompts you to a screen where you get to choose a language and your reasons for learning the language. You are then able to pick a goal that you want to set for yourself. It asks for your level of experience with your chosen language. Once you have chosen a path, the navigation is easy and prompts you to the first lesson right away.
There are series of exercises that will help you learn. Duolingo gives you time to absorb the information before moving on. You can easily click continue to the next exercise. There's an introduction page for the vocabulary that will be covered in a topic.
One of the exercises that Duolingo offers is a listening exercise that lets you play the recorded audio and choose the correct word/sentence. You have the option to listen at a regular pace or slow down the recording by tapping on the turtle icon.
There are lots of repetitions and other learning exercises such as matching pairs, matching words to pictures, translating words and sentences. Each exercise is not timed, so you have enough time to absorb the information. If you forget a word, there are dotted lines under the words that will translate the meaning for you. This app helps you build your vocabulary from lesson to lesson. However, if you get an answer wrong, the correct answer is shown right away. You have the opportunity to click on "Show Tips" if you need additional examples of the vocabulary/sentence.
Scope on Busuu
Positives
Option to repeat words as needed
Set up times to study
Reminders will pop up for you to study
Flexibility to change goals if needed
Photos that correlate with the words
You have the option to study offline only if you bought the premium package.
Negatives
You have to sign up and answer extra questions in order to start the lesson
Difficult to navigate in certain parts where you have to drag the words instead of clicking on them to match words
There is a quiz placement test to see where you are at, but the timer runs out fast
Not enough time to learn the material during lessons before they quiz you
There isn't an option to slow down the video
Busuu is easy to set up, but you have to set up an account with them in order to gain access to the lessons. After creating the account, you can choose to take a placement test if you are familiar with the language otherwise you would pick "I am new to" the language. Within the app, you can set goals and Busuu will generate a plan for you based on those goals. It will then prompt you to a short assessment before starting the first lesson.
After a few quizzes, it prompts you to the first lesson which shows a word and it's translation. You can play it as many times as you want before moving on.
In this exercise, you're able to play the audio recording to see if you understand the sentence by answering a True or False question.
In this exercise, you repeat a word that is spoken to you in an audio clip.
Busuu includes a variety of exercises. One where you need to translate by playing the audio recording and tapping on the correct word. Other exercises will have you read and tap on the correct word, rearranging sentences in the correct order or dragging the words to the correct definitions. The dragging part was a little confusing because it seemed like it was a tap button instead of holding the button and dragging it.
Scope on Babbel
Positives
Photos that correlate with the words
There are language podcast in the app that will direct you to Apple Podcasts or Spotify as an additional learning tool.
Review and the ability to correct your mistakes
You can go over the vocabulary as much as you can.
Negatives
Very fast pace and moves on to the next exercise right away with no time to absorb the information
You need to purchase the premium package to access more in depth lessons and to be able to study offline
You have to sign up and answer extra questions in order to start the lesson
Difficult to navigate in certain parts where you have to drag the words instead of clicking on them to match words
Some of the exercises are timed and didn't get enough time to learn the material as they were testing you
There isn't an option to slow down the video
Cannot replay certain exercises to hear the enunciation
User Interviews
With my script and interview questions prepared, I conducted user interviews with participants via Skype, Google Hangout, and messenger video chat. This gave me some insights on their experiences with vocabulary apps and identify their pain points when it comes to learning a new language.
Interview Questions
Are you a student, professional, or both? Tell me more about your schedule and what does your day typically look like?Which language have you tried to learn recently and what was your motivation to learn? What's the biggest challenges with taking a new class/studying a new language? Why?When was the last time you needed to study a bulk of new terms? What was it for?Why do you think learning a new vocabulary/language is difficult? Is there something that could make it easier for you?How much time do you dedicate to studying vocabulary and what form of vocabulary studying for you prefer?Have you ever used any app to learn new vocabulary/language? If so, what features did you like/dislike about it? What app feature would help you to progress in your vocabulary learning?
Affinity Mapping of User Interview Responses
I gathered my notes and quotes from the interviews and laid it all out into 3 sections of what the user was doing, thinking, and feeling.
User Persona
Based on my user research and data, I as able to create a user persona to give my users a visual element to understand our persona’s behaviors and goals to better understand who we are designing for.
Meet Lizzy
User story and job story
User Story
As Lizzy, I want to be able to learn on-the-go and offline, so that I can continue learning on the plane.
As Lizzy I want to be able to learn via games, so that I can retain the information better.
As Lizzy, I want to be able to learn via video lessons, so that I can improve my listening and pronunciations.
As Lizzy, I want to be able to have quick and easy-to-follow lessons, so that I can stay motivated and learn efficiently.
As Lizzy, I want an app to help me learn languages/phrases, so when traveling, I can easily communicate with locals.
Job Story
When I am traveling to different countries, I want to be able to conversate with locals and learn more about the culture.
When I am talking with my students during the office hour, I want to have a clear communication with them, so that I can assure they understand the material and are benefiting from their session.
When I assist my students in class, I want to be able to explain the problems and how to solve them, so they can feel confident to do the work on their own.
Problem Statements
Lizzy needs a fun way to learn new languages/phrases to help her connect with family and students because it will help her to communicate effectively.
Lizzy needs a way to have a tutor that can help her with vocabulary that she can apply to real life situations when working and in her social life because she wants to understand.
We will know this to be true when if she invest 15 minutes a day for a month along with once session a week with a tutor via video for 30 minutes to practice.
Hypothesis
We believe that by creating an app that lets you study for 15 minutes and the opportunity to schedule tutor time with an expert in the language will help Lizzy learn relevant vocabulary/phrases to better communicate in regards to work and social life.
“I want to be able to learn via video lessons, so I can improve my listening and pronunciations.”
— Lizzy Dane
User Flow and Task Analysis
I’ve created user flows to help our users to complete their goals and objectives.
Task: Schedule Tutor Session
Entry point: Open App
Success Criteria: Tutor session scheduled.
New User
Open App
Splash screen
Sign up/Onboarding
Display Homepage
Tap on Tutor session on Navigation Bar
Select schedule Tutor session
Pick Language
Pick date and time
Select 30 minute or 60 minute option
Select Tutor
Select preferred payment type
Complete transaction/Tutor session scheduled
Task: Join Tutor Session Video Call
Entry Point: Open App
Successful Criteria: Tutor Session Video call complete.
Returning user
Open App
Splash screen
Login
Display Homepage
Tap on Tutor Session on navigation bar
Select upcoming calls
Tap Join video call
Task: Lessons
Entry Point: Open App
Successful Criteria: Lesson completed.
New User
Open App
Splash screen
Sign up/Onboarding
Display Homepage
Pick a language
Display Homepage
Tap Lessons on navigation bar
Intro Lesson
Introduce Vocabulary
Match vocabulary w/ pictures, T/F statements, Audio, Speech, Multiple Choice
Review Vocabulary
Start game
Answer questions
End game/Lessons
Wireframes
Low fidelity and mid fidelity wireframes were made based on user flows that I have created above.
Low Fidelity Wireframes
Scheduling a tutor session and making a payment for session. Once payment is made. Session is set and video call awaits for timed schedule.
Users go through a series of different types of lessons and then has a chance to play a memory game or review the material again.
Memory game where users have to match the name to the photos. After the game is over, users have the option to play it again or go to the next lesson.
Mid Fidelity Wireframes
After the onboarding and sign up page, you are to pick a language. Once you’re set up, you’re on the homepage and you can set up a session with a tutor.
You are able to join your video call the day of your scheduled time and day.
Series of lessons and showing users if they got their answer correct or wrong.
Memory Game. I did end up just using the second half of the wireframe for the game portion. The first half looked like the lessons. I wanted it to be different, so the game part is a matching game instead.
Usability Testing
I conducted a usability test with 5 users. The testing focused on signing up, start lessons, schedule a tutor session, and joining a schedule tutor session. Sessions took place online and each section were about 15 minutes. I had a test plan and script prepared. All users tested the app using Figma prototype on their laptop/phone. After testing, I used Jakob Nielsens error severity scale to highlight which areas of my app needed the most attention and how I could improve.
Usability Report
Jakob Nielsons Severity Scale
After gathering more information from the usability tests, there were changes that were made after. See below.
Final Design
Hi-fidelity prototype. Colors are integrated.
Splash screen, sign up page and onboarding. There’s a skip option on the onboarding frame.
Create account with social media or log into account.
Set up language and then onto the homepage to pick a lesson. On the first frame the button is disabled because user hasn’t chosen a language.
Check out the lessons and matching game in the gallery slide below.
The start of the lesson. Users choice is highlighted. There is a progress bar on top to see where they are.
A modal popup in the last frame happens if users want to exit the lessons.
Users have the ability to listen or slow down the pronunciation of the word.
There's an audio and verbal section. Users have the ability to skip if they need to.
Checking the recorded section and follow up with matching words. Notice the progress bar has changed to different colors gradually.
Near the end of the lesson and users can review the vocabulary again or play a matching game.
The matching game has a few questions and once it is finished, users have the ability to play it again or be done.
Schedule Tutor session
The process of scheduling a tutor session, joining the call, and rating tutor.
Users can book a tutor by language, time and date. Tutor options pop up once users hit search.
To confirm tutor sessions, users need to complete payment.
Users get a notification when it is time to have a tutor session. The arrows are gestures to pick up call.
During the chat, you can see how many minutes left in the session.
At the end of the call, users have the ability to rate their tutor after each session. Then it prompts users back to the tutor tab.
Final thoughts
We are all learning everyday and Lingo WeChat has been a great project to work on and learning from users during usability testing. Our users are the utmost important and ensuring that we are targeting the pain points and trying to reduce the friction within the app. Lots of iterations and clean up and lead the the final design. Adding the video chat option for the app gives user the opportunity to learn a language from a fluent speaker.
Mock up designs
