← HEAD ON BACK

 

Babbel

Crafting a language learning experience

Babbel is the biggest, expert-driven language learning tool out there, with more than a million users enjoying high class, didactical content every day. 

As a Product Designer, I took part in a concerted effort to refresh the design and user experience of Babbel's Language Learning Apps across iOS, Android and web. 

 

PRODUCT THINKING

As part of a cross-functional mission team, I partnered with multiple product managers, conducted research alongside our linguistics team, analyzed data with our data insights department and teamed up with a dedicated user research team. By analyzing and digesting the information from these various departments, I was able to identify the wants and needs of our users and carve out a path for our redesign initiative.

A primary concern that became obvious early on was related to the actual usability and experience of our current product. The overall experience was a rather complex one and ended up being a detriment to the already complex and at times confusing process of learning a new language. In order to begin thinking about design solutions, we restructured our strategy to offer a more simple, guiding experience for our users. 

I facilitated a Product Thinking workshop to analyze and categorize the different parts of the existing product and its user experience, and rethink our design strategy.

TRAINING EXERCISE

One of the key parts of learning a new language is retention. Learning a new language can be a long and arduous process, and as such it is vital that users keep coming back on a daily basis. In an effort to make this regular braintraining as easy as possible, we embarked on a mission to make the trainers, the exercises used to learn new words or repeat pre-learned words as effortless as we could. 

In addition to this, it allowed us to set the tone to streamline the new design language of the application. As trainers are the most frequently used element of the application by far, they would carry forth the newer, simplistic design of the application and take on a key role in setting the tone for overall look and feel of the new Babbel. 

 

The new look and feel of the trainers was based on a heavy emphasis on creating a purposely minimal visual style. As a result of this, we were able to direct the users attention to the actual content of the lessons, without needing to explicitly guide them in a certain direction. 

The main focus area was the central image. Our didactical experts found that images play a key role in reinforcing the retention of the learned words. Users would have an easier time remembering words by associating them with sensible, related images. 

MOTION IS LIFE

A key aspect of our new language was motion. As a previously neglected part of the product, I took charge in setting up a consistent motion design language for Babbel's new product. The idea of bringing motion into the product is that it would allow us to engage the user in a more delightful fashion and direct them to where we wanted or needed them to go. 

To do this, we took a step back and analyzed our entire interaction flow, from entering to product to any one of the various endpoints within the application. Once we mapped this out, we were able to quickly assess in what areas we could use motion to support the users' interaction and prioritize this list. 

I took the lead in the effort to bring motion back into the product and facilitated an intensive workshop to dissect the app and identify the areas where motion could be user for support. 

 

Knowing that the idea of motion design could be a challenge concept for the engineering department and that handover from designers and engineers was lacking in this particular area, I set up guidelines to ensure consistency in our motion design and make the handover process less of a burden.

Instead of simply handing over a GIF or Video file of the animation to the engineers, Motion Graphs were introduced as a means of handing over animations. They served as a guiding companion to the GIFs or videos and provided a frame of reference for the implementation.

An example of the motion graphs used to make the handover process easier.

 

This method of handing over motion designs proved to be a tremendous success, making the lives of both designers and engineers much easier. In an effort to elaborate on the subject, I documented my thoughts in an article and published it on Medium

The article, titled "Motion Design Handovers Made Easy", can be found right here on Medium.

A WELL-ROUNDED PRODUCT

In addition to the trainers, the core component of the app, we made sure that different parts of our application followed the same, minimal style and carried out a similar tone of voice throughout the entire product. 

To achieve this well-rounded product, I owned several parts of the app, with the primary focus being on the initial onboarding and language selection,  the "warm-up" ( a short memory-jogging exercise for returning users ) and I took part in an effort to iteratively redesign our existing web pages. 

Streamlining the language selection process and showing off our wealth of languages. 

Reinforcing retention of learned words and providing positive reinforment. 

Applying the new design language to the personal vocabulary page.

Providing a clear, fun overview of the wealth of content that Babbel offers.