Designing a Grammar Cheatsheet

Designing a Grammar Cheatsheet

Grammar is the scary and tedious part of language learning for many people, Babbel introduces bite-sized grammar knowledge within each lesson. This approach helps the user understand grammar knowledge quickly, but also makes reviewing grammar later more difficult.

The goal of this project is to build a decoupled reference sheet where users can quickly look up important grammar topics they have learned without going through the lesson again.

PROJECT
New desktop web feature
MY CONTRIBUTION
Product designer working with full stack team and learning experts
8842fd_ec53f2b052984c50b8d8ee52cc070cc3-mv2
a screenshot of Grammar Book feature on production (currently only for registered user learning German from English)
a screenshot of Grammar Book feature on production
a screenshot of Grammar Book feature on production

Balance various user needs

Adding grammar support is a frequent feature request we got from our users, but since Babbel has a worldwide, cross-age target user group, the new grammar feature request needs a clear and achievable goal. 

The first step is to analyze each persona's needs and anxieties of the new Grammar feature. Then together with my product owner Clyde and learning expert Cate, we picked up and prioritized the various needs based on current project scope and the integration of with the whole product.

As an MVP project, we've decided to focus on providing a cheat sheet for the users for simple browse and check, instead of grammar drills which is against our teaching methods.

3 personas for GrammarBook, based on previous user research and user segmentation results

Design user flow for different scenarios

After discussion with our Product Marketing team, the feature has been defined as an "after payment" feature, which means that only customers (paid users) can have the full access to all the content, while leads (registered but haven't paid users) will only be able to see a preview of the content. 

G_userflow1
G_userflow2
User flow for both Customers and Leads (haven't subscripted user)

IA & Mobile first for a desktop web project

The information architecture was built based on input from our learning expert team, with gathered information such as content relevance to Babbel course content, different grammar structure between various languages and the dependence on different grammar topics. 

After several rounds of discussion and iteration, we've decided on a three-level information hierarchy which could fit different grammar structure of the most common languages Babbel offers.

G_ia
Mobile wireframe of the navigation design

Interface design with content templates

The content source of Grammar Book is various practice activities in Babbel courses without consistent layout. The design task is to come up with a set of templates to reduce manual style adjusting work.

By discussing with our learning experts and developers, we came up with 4 template that works for our current content scope, also keeps the scalability for potential new content style in future iterations. (see picture in the end)

By discussing with our learning experts and developers, we came up with 4 template that works for our current content scope, also keeps the scalability for potential new content style in future iterations. (see picture in the end)

G_content
A screenshot of the content category list from learning experts and various layout of grammar content

As a newly formed, project-based team, each stakeholder has own terminology in the content structure and the category names, for example, learning experts call the 1st level title as "Topic" while our developers named the variable as "Category" and the 3rd level title as "Topic".

To help keep the consistency and the effectiveness of communication, I made a taxonomy for all the names and templates and shared within the team. 

G_textnomomy
taxonomy for the naming of information architecture and templates.

Learnings & Shout-out

One of the most important take away for me: Using design as a team communication tool. Especially when all stakeholders have different visions for a new feature, designer's responsibility is creating mockups fast to align and iterate with the whole team. (And made the taxonomy earlier)

The Grammar Book is the first new feature project I've ever participated, and it's a very exciting experience for me. I would like to thank Clyde for many many inspiring discussions, Cate, Nicki and Sabine for providing valuable insights from teaching approach, Alex and Jay for their patients to explain me the basic coding knowledge and willing to tweak the CSS for the best results. And of course, everyone in Babbel product design team for their trust, feedback, and support <3