yabla

client design

abla is an electronic language learning service based on video immersion, learning tools, and practice games. It features web, android, and iOS products.

 parameters

Yabla is a language learning product and content service geared towards intermediate and advanced learners. It offers thousands of immersive videos and licensed television episodes from the language of origin. Yabla exists across 6 languages

 

Alongside a custom video player with playback features, Yabla offers games to train dictation, comprehension, and vocabulary. Yabla features a huge language learning library with 72 filters based on region, category, difficulty, and user history. 

For this project, I aimed to increase the clarity of offerings and reduce information overload for new users. As a result, our goal aligned with the business goal of reducing the user drop off rate.

focus

"Watch, listen, learn, become fluent!"

                              -Yabla

team  process

At Yabla I am the sole designer among three developers. This has enabled quick crossover from design to development. It's also allowed me to be apart of research, design, and production.

 

This structure provided the opportunity to bring a research-driven practice into the small team environment. For example, user outreach and testing, with involvement across departments.

deliverables

research

design

  • use questionnaire

  • informational interviews

  • personas

  • synthesis & revised problem

  • feature analysis

  • 2x2 selection methods

  • usability tests

  • style guide

  • first iteration onboarding

  • user tests

  • second iteration onboarding

  • implemented onboarding    (live on-site)

users

The Yabla user base is highly fragmented. Based on account information, we ascertain users fall on avg into the age group of 55+ as well as 16-28. This is correlated with the academic school system, as Yabla partners with high-schools and universities across the country. It is also correlated with more serious language learners who have free time and the ability to travel, such as retirees or professionals who travel/relocate. 

I conducted informational interviews with over 10 users in order to understand their learning habits, backgrounds, motivations for language learning, and use of Yabla. I also placed a general use questionnaire inside member newsletters across our 6 languages. Thus far we have over 130 responses. From this information, I developed primary and secondary personas.  

1) research

2) feature translation

3) design and testing

user tests

Along with informational interviews and user questions, I performed 7 navigation user tests on individuals within the 55+ age range as well as students 16-24. This provided a control  (or baseline).

affinity (theme) mapping

We took the qualitative data from our questionnaire, interviews, and user tests, and aggregated it as a team in order to find patterns. 


How might we help instill Yabla language learning as a habit, and meet users with tools/content that will make them most successful depending on their level of dedication?

These methods allowed me to revise our problem statement to address both these demographics and reach our goal.

Yabla is an excellent tool for dedicated learners because it provides authentic content and exercises that greatly improve aspects of fluency including conversational understanding, dictation, and vocabulary. In order for these tools to be most successful, users must engage with them on a regular basis. Data shows that many users aren’t watching the videos multiple times or diving deeper into captions through Scribe. Many binge watch without engaging.

revised problem

After generating this goal, our entire team took part in a design studio. This brainstorming session included development, support, sales, and our CEO.

 

We each took turns writing solutions or features on single cards. We then used a 2x2 matrix to decide on which had the greatest priority, by vote. 

design studio

In order to address both onboarding and navigation clarity, we decided to supply a comprehensive faq page with links offered in welcome emails throughout the trial period.

 

I coded these welcome emails in html with inline CSS so they are responsive depending on desktop or mobile view. 3 Examples are available to view here:

 

Welcome to Yabla!

Yabla Player Mastery!

Yabla Games!

Onboarding 1st iteration

Based on Google Analytics, new users are successfully funneled to our faq page via our welcome email. This proves a successful touchpoint to onboard new users.

Based on a response questionnaire, users appreciated the resources but struggled to read or were intimidated by the density of the information.

 

This was especially apparent for our older demographic users. 

I utilized progressive disclosure on the design by offering a series of dropdowns based on user questions. I then added relevant copy in conjunction with visual screenshots of each use case. Similar to a map key.

Onboarding 2nd Iteration

For our second iteration of the onboarding process, we kept the introductory resource email, as well as progressive disclosure of topics based on dropdowns.

Instead of presenting all information at once with a key, I created SVG animations with a single focal point at one time. We created animations across all language translations including English, Spanish, German, French, Italian, Chinese, and Portuguese. Based on user interface preferences visitors will view the animations in their language of choice. 

Next Steps

We also provided a video tutorial tab to give first-hand walkthroughs of Yabla's tools. These videos allow us to sequentially build on information, reducing information overload.

Based on Google Analytics, our onboarding email provided an effective way to funnel new users to our FAQ resources. 

So for next iterations, we focused on making the information visually accessible across our entire user demographic. 

Yabla Square Ad Gif.gif

Moving forward, we are replacing all static onboarding images with SVG animations in conjunction with the video tutorials. 

We've also released a user dashboard experience. This allows users to set goals, showcase progress, and increase habitual use through gamification. 

Finally, in order to improve consistency within the site, I've created a logo redesign, graphics, animations, landing pages, and interface improvements, all drafted in line with Yabla's brand and style guide. Many of these projects are visible here