top of page
CaseStudy_Langoon_Header_Image.PNG

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

Design Thinking Process.PNG

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.

Competitive Analysis1.PNG
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.

Competitive Analysis3.PNG
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.

Competitive Analysis2.PNG
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. 

User Interview_Image.PNG

Bob is a 34 years old, Data Analysis, learned Korean language in the past.

User Interview_Image2.PNG

Bridget Wu is a 28 years old, Fashion Designer, learning Spanish, Italian and Mandarin.

User Interview_Image3.PNG

Logan Beck is a 35 years old, Visual Designer, learned Spanish language in the past.

Doing_Feeling_Thinking Chart.PNG

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.

Person_Blank.PNG

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

User Persona_New.png
Marina
User Persona_New.png

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 Persona_New.png

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.

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.

Sitemap_New.png

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:

langoon_low-Fidelity  Flow.PNG
langoon_low-Fidelity Flow2.PNG
langoon_low-Fidelity Flow3.PNG
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.

langoon_High-Fidelity1.PNG
langoon_High-Fidelity2.PNG
langoon_High-Fidelity3.PNG
langoon_High-Fidelity4.PNG
langoon_High-Fidelity5.PNG

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.

  1. I tested the product in low-fidelity stage with 3 participants

  2. I tested the product in high-fidelity stage with 3 participants

Usability Testing_Pic.PNG

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:

Style Guide

Style Guide_Image.PNG
Langoon_Color_StyleGuide.PNG

Final UI

langoon2.png

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

Wave
Projects you may also like:
Case_Study_Meterial.png
Frame 53a.png
GLS_Project_Thumnail.png
bottom of page