Overview
Langoon is a language learning web-app which helps users to learn different languages in their own environment by helping them learn and review vocabulary effectively while keeping them motivated.
I designed this project in Adobe XD from start to finish through design thinking process which includes research and development of strategic design solutions with Google Material Design guidelines, usability testing and hand-off-documentation.
Duration: 3 Months
My Role: UX Researcher, UX/UI Designer
Methodology: Competitive Analysis, User Interviews, User Stories, Job Stories, User Persona, User Flow, Affinity Mapping, Information Architecture, Usability Testing, Wireframing, Prototyping
Tools: Marvel, Adobe XD, Figma, Usability Hub, Photoshop
The Process I Follow
Problem & Objective
Problem Statement : Our users need a way to learn a new language efficiently in the form of new vocabulary words and helpful Flash-card based lessons. So that, they can easily learn in an intuitive way. We will know this is to be true when we will see the users are communicating in a confident way with the people that speak in their native language.
Objective : We need to design a language learning app that would be intuitive, user friendly, especially interesting where users could learn their lessons in an uninterrupted and more user-controlled way to continue their study. We need to help them to accomplish their goals by providing helpful vocabulary words and short summarized lessons by various learning methods (flash cards, grammar, reading, writing , listening, speaking, rewards) to keep them motivated and have fun while learning.
Competitive Analysis
As part of the market research, I conducted a competitive analysis of three language learning apps: Vocabulary Learn New Words, Magoosh Vocabulary Builder, English Visual Vocabulary to better understand what products are already available for my target users.
The goal was to find their strength and weaknesses and all the frictions experienced by users to ensure that we do not make the same mistakes and create an overall experience which is much better than them. Therefore, we can buy the trust of our users and create our place in the market.
Positive
-
Righteous color scheme, and nice onboarding process.
-
Develops excitement in the user by exciting quotes to learn new vocabulary words.
-
Easy to use, intuitive, and organized.
-
Very simple and organized layout.
Negative
-
No progress tracker feature
-
Symbol of the bag under top navigation is not intuitive.
-
Shopping cart feature is confusing
-
There is no go back/cancel button.
Final Analysis
Overall, my experience of analyzing this app is positive. It is very unique which gives the personal approach to learn vocabulary. I would say it is the perfect combination of UX and UI.
Positive
-
The feature ‘Remove adds and keep on reading without interruption’
-
The meaning and example of the word gets full focus on the entire screen with least noise.
-
The color of screen and font is satisfactory.
Negative
-
The font size is very small
-
The app is not intuitive
-
Overall, there is lot of white space
-
Images are not related to the content
-
Does not have onboarding process
Final Analysis
Overall, I personally feel that this app is not user friendly or not successful in terms of meeting the goals of its users.
Positive
-
Word learning modes are nicely categorized.
-
Easy to navigate between modes
-
Very simple and straight forward layout.
-
Easy to get started with words by their basic levels.
Negative
-
No tracker to tracks progress by number of words learned.
-
Not visually appealing, no graphics or icons.
-
No skip option in levels, without completing level I user can’t go level II
Final Analysis
Overall, my experience of analyzing this app is mixed, not very bad and not great either, it somewhere meets the goal of users but partially lacking on necessary features and needs some improvement.
User Research
User Interviews
After getting positive and negative aspects of the competitor apps, now I conducted user interviews with 3 participants (who had used language learning app to study in the past) to collect the qualitative data and learn more about the problem space from the users' perspectives.
I organized 3 participant’s key findings in an affinity mapping in 3 main categories: Doing, Feeling, Thinking which gave me the option to see the interviews results at one glance.
Bob is a 34 years old, Data Analysis, learned Korean language in the past.
Bridget Wu is a 28 years old, Fashion Designer, learning Spanish, Italian and Mandarin.
Logan Beck is a 35 years old, Visual Designer, learned Spanish language in the past.
Key Findings of User Interviews:
-
The app should have short summarize lessons with new vocabulary word.
-
It would be fun learning with rewards, so that, users will always feel motivated.
-
Include skip option so that user will not feel board while learning.
-
Include feature that reinforce good pronunciation and display the user’s progress prominently.
User Personas
Based on the insights I gathered in user interviews, I created the persona, Marina, With this persona, all design decisions were made and evaluated to keep the users and their perspective in mind.
User Stories
-
As a flight attendant, I want to communicate in a better way with the people in their native language, so that I could feel more comfortable and confident with them.
-
As a fun-loving person, I want quick and helpful conversational lessons, so that I can just enjoy for a bit and learn at the same time.
-
As a busy person, I want to spend my productive time to learn new words and phrases, so that I could feel that I achieved something in my time constraint.
-
As a visual person, I want to see the progress in my study, so that I can stay motivated and continue my studies.
Job Stories
-
When I am learning new language, I want the option to skip certain words or lessons so that constantly I could focus on my study.
-
When I am learning new vocabulary words, I want to see the option where I could select the categories in which I really want to learn.
-
While learning there should be an option to mute all sounds as I can’t use the app where I need to maintain silence like in bus, airplane, or waiting area.
-
Apart from the description of word there should be example. So that, I could understand the practical use of that world and could use in my conversation later.
Bio
Marina is born and brought up in USA. She is fun loving, busy and an independent woman, love to travel internationally and want to communicate with the people in their native language to feel more comfortable and confident with them.
Personality
-
Openminded
-
Adventurous
-
Curious
-
Reader
Goals
-
Learn conversational language to have fluent conversations with native speakers.
-
keep herself up to date with the language by speaking with parents and practicing with friends.
Needs
-
Need to see the progress through proper test and rewards to keep motivated.
-
Need to select the category which meets her learning needs.
-
Needs learn in an uninterrupted and more user-controlled way.
Device Usage
Mobile
Desktop
Marina
Age : 30 Years old
Profession : Flight Attendant
Native Language : English
Education: Masters in Art
Location : USA
Short lessons make mobile learning easier and interesting.
User Flows
After creating the persona, I started thinking about how Marina would use the product. To keep her perspective in mind, I created two user flows to demonstrate how many screens Marina will go through to reach her destination.
Describe your image
Describe your image
Describe your image
Sitemap
I created a site map in order to lay out the hierarchy and navigation of my web app. To accomplish this task, I focused on the navigational part of the Home page, and I envisaged 9 main screens, which I linked with sub screens to organize the information into subpages.
Wireframing
In the process of designing the 'langoon' web app, I followed the below process and learnt from each stage to improve my wireframes.
Low-Fidelity Wireframes
At this stage, I had the clear understanding of the most important features and navigation structure of my web-app. Now, I created low-fidelity wireframes with pen and paper to portray interactivity between functional elements.
'Learn New Vocabulary Words' Flow:
Mid -/High Fidelity Wireframes
Now, I have solid, low-fidelity prototypes to use as a foundation. After that, I started adding details to better communicate the form and functions of my app, transforming it into a mid-fidelity.
Then after creating mid fidelity prototype, now it’s time to reach at high fidelity prototype after further evaluation and revisions. High-fidelity prototype takes much longer to create as the goal is to flesh out every single detail of the design. It looks and feel like a live system in terms of layout, navigation, usability and closely resembles the finished product or true representation of the user interface.
Usability Testing
After the clickable prototype was built, I tested the complete product 2 times to evaluate the accessibility, flow and usability of the app then I refined my design based on the outcome of the analysis and participants’ feedback.
-
I tested the product in low-fidelity stage with 3 participants
-
I tested the product in high-fidelity stage with 3 participants
Specification :
-
6 Participants
-
Remote-Moderated Usability Testing
-
40-45 minutes sessions
Main Features :
-
Onboarding
-
Sign-Up and Log-In
-
Learn New Vocabulary Words
-
Learn Vocabulary Words with Flashcards
-
Attempt Quiz
-
See Progress
-
Check Rewards
Refine Design Based on Test Results:
Describe your image
Describe your image
Describe your image
Describe your image
Style Guide
Final UI
Learning & Challenges
During the project ‘langoon’, I learned so much as I went through each and every stage. When I was doing Competitive analysis, I identified how to find competitors and look for opportunities in their strengths and weaknesses.
Same way, while usability testing, I learnt a lot from my users as I observed where they are getting stuck while completing a task. So, through this process, I understood that I need to make my design more intuitive and user friendly. I got to know that keep iterating is the key!
Throughout this journey of ‘langoon’, I found that If we want to make our design accessible and usable, we always need to keep our users at the center of the design process at every stage.
I also had many challenges while design this app, such as:
-
Find the relevant participants for user interviews as well as usability testing
-
Time constraint for each activity
-
Prioritize the problems which we are going to solve
-
Learning different set of tools & software