Exploring personalized adaptive learning methods
Designing a Grammar Cheatsheet
The learning material of Babbel courses follows instructional methods and it very effective for language learning. Our next goal is creating an adaptive structure and providing personalized learning experiences to our users.
My Skill Builder is an experimental project, the goal of the project is to allow users to practice language skills by combining vocabulary and grammar together. Another goal of this project is to enable future fast interaction from the technical perspective.
PROJECT
New concept feature
MY CONTRIBUTION
Product designer working with full stack team and learning experts
Final demo of basic feature function and transition (built with Principle).
Define the problem & scope based on persona's user journey
In Babbel, we've built six personas based on different user groups and their various learning goal. For example, a user who wants to learn a language for working might have different needs compares to a user who started learning a language for a vacation.
To quickly align all team members with a same vision of the project, I went through all the personas and defined a common problem shared among our user groups, and marked the pain points during their user journey.
Red part are the pain point in the user journey caused by lack of personal learning experience
There are three potential problems can be solved by adaptive learning: lack of content based on specific topics, repetitive and unnecessary practicing tasks, can't practice grammar knowledge.
After discussion with our learning expert, we decided to start the project with combining learning vocabulary with grammar topic.
Learning level design & Integration with the whole platform
The next step is to define the boundary of 'adaptiveness' based on our technical limitation and integrate the feature into the whole Babbel learning journey.
In this early concept phase, the project's direction is not clear yet and stakeholders have opposite expectations for the product vision. As the designer, my role is to quickly visualize the information architecture based on the content provided by our learning expert and then get feedback from different stakeholders.
3 versions of IA iteration based on input from different stakeholders as the communication tool.
The final learning level structure contains three learning phase, meaning, grammar and context. And the adaptiveness goal for the first iteration is to provide our users with a sequence of trainers that respond to their learning velocity by having different behaviors for correct and wrong answers.
The content of My Skill Builder is divided by grammar category, for example, regular verbs in German. The users can reach the feature after finishing a specific lesson, related grammar topic, and associated vocabulary courses. Because of the scope limitation, we only started from one vocabulary list.
Overview of the user journey and learning stucture of the feature.
User testing round 1 & Re-concept
To verify the first concept, we planned a usability testing with our target US marketing, the remote user testing has been done by Rachel from our user research team in NYC.
Besides usability issues, our main research question is if the user would understand the 3-phase learning structure and consider the feature adaptive to his/her learning level.
Invison prototype for quickly verifying the idea.
The result shows that none of the participants understood the 3 phase learning structure.So we did a re-concept workshop for an updated learning structure.
Instead of a sequential order, all cards have been separated into "training cards" and "learning cards" in the 3 learning phase. Always start with training card of each level, if the answer is correct -> the next trainer card; if the answer is wrong -> the system will give the user more chances to get the correct answer, then show it again after 5 cards.
If the user hasn't learned this language item before, he/she can choose the "show me" button to see the "Help cards" and learn it. Giving the user the control of their own learning progress is our current best option without a well-trained algorithm.
Overview of the user journey and learning stucture of the feature.
UI Design: Responsive web & interaction details
Because of our small scope, we only explored one vocabulary list of German regular verbs, but there would be various scenarios across languages and different category of the content, e.g., some gender of the words. So we've explored a lot of different direction for the interface design.
Some of the UI exploration I tried with different scenarios (verb/noun, with/without pic).
Skill"Builder" - Celebration gif in the end of the learning session.
One of the feedback animation exploration (failed since it's too complex both for the users and implementation)
Final interface design with interaction details overview.
Feedback sound & Photo direction
To provide more engagement to our users, instead of using red color as the mistake feedback, we choose to use grey and a subtle shaking animation to indicates that this option is not available. Which also requires matched feedback sounds design.
By trying different sample sounds in prototype, we've decided with the feeling of the sounds and added one intermediate feedback sound when the user gets a 'half-correct'. The exploration supported our VP of design to initialized a feedback sound redesign project together with our brand team
The picture is a very important part of the learning material and it has a huge influence on the 'look and feels' of the interface. Our current pictures are a bit dated so we've also initialized a photo style redefine project.
Moodboards of photo inspirations and draft rules.
Learnings & Shout-out
The most vital lesson I've learned is how to drive a project as a designer in a vague concept project. Rethinking the learning experience it's challenging and exciting at the same time, and it was lots of fun trying various tasks. Huge thanks to our MySkillBuilder project members and my supportive product design team.
