BABBEL AUDIO LEARNING: TAKING A NEW FORMAT FROM ZERO TO ONE

ROLE Product Designer, Design Lead
TIMELINE 2020–2021
DOMAIN Education
SCOPE Native apps: iOS and Android.
IMPACT Lesson completion rate 60 %, top performing feature

Final UI of audio player and illustration used in feature marketing.

Babbel is an industry-leading language learning app and desktop platform, used by millions of learners worldwide. As a product designer at Babbel, I was in charge of design and new feature discovery in a multidisciplinary team to create new audio learning experiences.

The problem statement covers feedback from existing users and learning science knowledge.

Defining the problem & opportunity

The discovery started with deep-dives into the problem space and learning science knowledge. Above you can see the revised problem statement guiding the discovery. This was coined from more specific learner problems such as “I have only a few minutes available to learn” and “I want to learn while doing something else”. We also wrote an opportunity statement from a business perspective: “If we provide our users passive low-intensity activities, they will use Babbel in different moments of their day and they will return to active learning during times of high motivation.”

Some post-its from affinity diagram in the workshop - different considerations for creating audio learning features.

Ideation

I planned a one-day discovery workshop with my instructional designer colleague. During the workshop we went through a series of activities spanning user journeys, impact maps, how might we’s and finally ideation techniques. The main outcome was 3 prioritised ideas: 1. An in-app podcast player for Babbel’s existing podcasts, 2. Short, fun audio snippets on language learning and cultural information, 3. Audio recap summarising new learnings from previous lessons in 10 minutes.

UX & UI Design

For all the 3 ideas, the main thing we needed was an audio player UI, so creating this was one of my tasks. I did some desktop research on audio players and facilitated a couple of sketching sessions inspired by those. From the sketches, we picked the main features we want to have in the first iteration. Collaborating with engineers and PM, we prioritized the implementation of those features. The design is a combination of existing design system components and new ones that were added as needed.

Hand-drawn sketches for feature ideation.

Designs for audio recap - a second idea to come out of workshop. Audio recap is a short 10-15 min audio summarising what the user has learned in the past 3 lessons. For the launch of audio recap, the ‘podcasts’ tab in the bottom navigation was chang… — Designs for audio recap - a second idea to come out of workshop. Audio recap is a short 10-15 min audio summarising what the user has learned in the past 3 lessons. For the launch of audio recap, the ‘podcasts’ tab in the bottom navigation was changed to ‘audio’.

Designs for podcast episode listing, player and speed control.

Usability test

We ran a usability test to uncover usability issues in the design. Some of the main issues that came up were things we expected: episode list logic, where unfinished episodes appear, and a new issue to us - progress bar contrast not high enough - a color-blind user did not see it properly. A great reminder to check color accessibility on components in every iteration.

As a part of the feature design, I created some illustrations that have been used in marketing and social media materials. Illustration created with the help of Babbel’s illustration library and guidelines.

Moving ahead

The podcast feature was released to all language combination that have podcast content. The audio recap feature was a limited launch to test before scaling content - and at the time of writing this, it had a completion rate of 60 %, which is higher than regular lessons or reviews in the app.

These were the first iterations - but what next? Some issues learned in usability testing and from user feedback have been identified as the next steps. The biggest priorities for user support are download feature and transcripts. Below you can see some first explorations for transcript feature, which requires user testing next.