Designing Babbel’s Grammar Guide
Babbel’s newest feature is all about simplifying grammar learning, giving users the tools to easily review, practice, and achieve proficiency in language skills. It’s designed with their learning experience in mind.
Intended Impact for our learners
With this new release we want to enable users to:
- Review linguistic elements in a structured way.
- Do exercises while learning about grammatical components.
- Grasp grammar concepts through well-crafted examples and their corresponding translations.
MVP’s business impact
The MVP proved successful in terms of its business impact. We observed the following metrics:
- The average number of interactions with the Explore tab* increased by 14%, pointing at high interest from learners in this feature.
- Grammar Guide attracted more returning users than other features found in the Explore Tab
*Explore tab: This section offers a variety of educational opportunities, including podcasts, games, Babbel Magazine, and more.
Grammar Guide is still under development and has not reached its full potential. In MVP stage, it is offering 11 grammar topics exclusively for English-speaking users learning German. We are actively working to expand its features and broaden its availability.
Previous Babbel grammar methods
Babbel utilized different strategies to teach grammar in the past. There were two main modes of learning grammar in Babbel:
- Grammar tips embedded within lessons, enabling users to learn as they progressed through the lessons.
- Grammar lessons, specific introductions to grammar topics.
In both experiences, users had to navigate through a series of lessons to revisit grammar rules or tips. During user interviews, many expressed the practice of taking personal notes in order to revisit grammar topics or tips at a later time.
Why a new experience?
We had data showing a strong need for a comprehensive grammar library.
- On Wishboard, our Babbel user platform, thousands of votes supported creating a dedicated grammar resource. Users expressed enthusiasm for it and that it was relevant to their language learning.
- According to the App Store Report, 36% of users were unhappy with grammar explanations.
Psst… Are you a Babbel user with innovative ideas to accelerate language learning? Share your cool ideas by clicking here and enlighten us! Together, let’s revolutionize the way we learn languages!
Hypothesis: Offering easily accessible grammar explanations, combined with a user-friendly interface for organizing tips, will empower users. It will enable them to conveniently locate and revisit grammar resources, ultimately leading to an enhanced learning experience and improved knowledge retention.
So it begins!
I utilized the Double Diamond design process for my project to foster innovation and user-centered solutions. It involved discovering user needs, defining clear goals, developing iterative prototypes, and delivering a refined design that exceeded expectations. This process ensured a systematic approach and resulted in a meaningful and impactful design outcome.
Competitor Analysis
We initiated the process with a 30-minute “pre-work” session, enabling us to explore how other language learning apps approached grammar teaching. We collected screenshots from various competitors like Duolingo, Speakly, Busuu, Lingodeer, Eggbun, and Parla. The session involved a diverse group of five individuals, including product managers, product designers, and language experts. Each participant was assigned a specific time frame to evaluate the screenshots, noting down both positive and negative aspects of competitors’ approaches. Miro was chosen as the collaboration platform for its familiarity among session participants.
Opportunity Hypothesis — “I want to review the grammar rules.”
In our discovery phase, we explored various “How might we” questions. To generate solutions for the given hypothesis, we conducted a session where each participant wrote their own HMWs. These individual ideas were then grouped together to form the following HMWs:
HMW 1 tailor grammar content to meet learners’ needs effectively?
HMW 2 create grammar content for effortless navigation and access?
HMW 3 ensure dedicated engagement with grammar content?
HMW 4 connect grammar to learners’ progress and culture?
HMW 5 make grammar fun, interactive, and less intimidating?
Note: All these how might we’s were supported by strong data points before we embarked on our discovery process!
Collaborative workshops
Cross-functional teams, including Product Design, Product Management, Learning Experience Designers, UX Research, Content Design, and Engineering, collaborated harmoniously to bring it to fruition.
We did two rounds of user research over a three-months period!
The entire agile team actively participated, attentively listening to the ongoing sessions and diligently documenting relevant points on a comprehensively mapped Miro board.
Initially, we conducted a survey using the KANO model to test four different concepts. The survey was distributed among Babbelonians
(that’s what we at Babbel call ourselves, pretty cool eh?), acknowledging the potential bias due to their language expertise, the results were somewhat predictable.
Next, we conducted user testing with five participants to collect feedback, particularly on grammar card categorization. Surprisingly, learners favored categorization based on levels rather than specific grammar topics.
The MVF
There were a lot of variables that led to the final design for MVF. We decided to create the content for English speakers learning German.
Considering the content-heavy nature of this feature, it was essential to gather compelling evidence for its scalability. Before investing significant resources in creating the content, it was crucial to confirm the actual impact of the feature.
Optimal placement
With 40% of users accessing the Explore tab within their first three weeks, it proves to be a suitable space for experimentation. During this period, more than 70% of users completed a specific number of lessons. Therefore, the plan was to create content for all the grammar topics covered in only those lessons, focusing on the majority of users.
Information hierarchy
The information breakdown we chose for the grammar content is grounded in enhancing both user understanding and engagement.
- Concise definition
Starting with a concise definition of the grammar topic in the first part ensures that users quickly grasp the fundamental concept. This concise introduction sets the stage for learning by providing a clear context for what follows. - Grammar topic reference tables
In the second part, the tabular format serves as a strategic choice to present specific information. This approach enables users to efficiently compare and contrast information, making it easier to absorb intricate details. This design not only accommodates various learning styles but also empowers users to extract essential insights with a quick glance. - Examples
The third part, focused on examples, demonstrates the practical application of the grammar rules. By showcasing real-life instances, users can bridge the gap between theory and practice.
By breaking down the content into these three parts, we created a seamless user experience. Users encounter a logical flow from concept introduction to information presentation, and finally to practical examples. This structured approach aligns with how our brains naturally process information, fostering a more intuitive and effective learning process. The result is an app screen that not only informs but also engages users, making the journey of learning grammar more accessible and enjoyable.
Grammar Guide is here 🥁🥁🥁
✅ Content created according to user’s level
The content is arranged in the same manner the user learns it in their lessons.
👉🏽 HMW 1 tailor grammar content to meet learners’ needs effectively?
✅ Placed in Explore tab
With 40% of users accessing the Explore tab within their first three weeks, it proved to be a suitable space for experimentation.
👉🏽 HMW 2 create grammar content for effortless navigation and access?
✅ Tied to learners’ progress
The content covered in all 11 cards are synced with the lessons users take in their main lesson path
👉🏽 HMW 4 connect grammar to learners’ progress?
✅ Users loved the thumbnails and example images
The selection of thumbnail illustrations and example images was carefully curated to add a fun and interactive element. During interviews, users enthusiastically expressed their appreciation for these visuals.
👉🏽 HMW 5 make grammar fun, interactive, and less intimidating?
⌛It’s not over yet!
We’re currently working on the practice feature, and it will be available soon.
👉🏽 HMW 3 ensure dedicated engagement with grammar content?
Thumbnail Design💫
For thumbnails, we took a unique approach to stand out from competitors. Instead of typical cartoonish depictions, we use jigsaw pieces to represent words and their combinations in various forms, making grammar concepts more understandable. Drawing from my own language learning experience, I created these engaging and helpful illustrations to address common learner challenges.
Jigsaw piece illustrations offer quick insight into grammar topics, improving user experience and comprehension. Users can easily preview ‘W questions’ and similar topics, enhancing language learning accessibility and enjoyment
💚 Hoist the green flags! The users absolutely loved it.
Post MVP 🌞
With strong evidence of user satisfaction, we’re expanding this feature to encompass additional languages. Additionally, we’re developing more grammar content for English users learning German. Simultaneously, we’re enhancing our practice feature, enabling users to practice each grammar topic with dedicated lessons for a more effective learning experience.
This is Hash, a Product Designer at Babbel, who led this initiative in 2023. I want to express my appreciation to Ulyana, Anton, Guilherme, Lisa, K, Xiaoqing, Miriam, Zohar, Amin, João, Paola, Rop and Zohar for their outstanding contributions that transformed this project into a reality.
