04·UI / UX Case Study

When 10 million learners feel lost, the app is the problem.

A redesign of Babbel, the world's top-selling language app, turning confusion into confidence, one screen at a time.

UX Research UI Design Interaction Design
ProductBabbel · Language learning
RoleUX Research + UI / UX Design
TypeApp redesign · self-initiated
OriginUpLabs challenge · 2022
Babbel Redesign

Babbel had the brains. It just didn't have the soul.

Babbel's content was world-class, interactive lessons, speech recognition, podcasts, games. Almost every user improved their grammar and vocabulary, and around 60% even improved their speaking skills.

But the app itself? It was getting in its own way. Users weren't failing at learning, they were failing at using. And in a market where Duolingo makes everything feel like a game, "effective but frustrating" doesn't survive.

Active users
10M+
Worldwide
Oral proficiency
60%
Users who improved speaking
Languages
14
Offered on platform
Six screens from the existing Babbel app showing inconsistent navigation, visual hierarchy, and missing review surfaces

The existing app, captured across six screens. Effective content, but the experience didn't carry it.

I didn't just study the app, I became the user.

I used Babbel daily, read hundreds of Play Store reviews, ran competitive analyses against Duolingo, Rosetta Stone and Memrise, and mapped every friction point in the user journey.

  1. 01Personal app usage & observation
  2. 02Play Store review mining, 500+ reviews
  3. 03Competitive analysis, four major competitors
  4. 04Desk research on language-learning outcomes
  5. 05Information architecture mapping
Information architecture for the redesigned Babbel: splash to onboarding to home, with six branches covering streak, review, explore, connect, and profile

Rebuilt the information architecture from the ground up. Six clear paths from home, not six dead ends.

Hand-drawn wireframe sketches for the home, explore, connect, individuals, groups, and profile pages

Pencil-first. Sketching every primary screen before opening Figma kept the ideas loose and the decisions cheap.

Six fractures in the experience.

Each one small enough to ignore. Together? A death spiral of frustration.

01
87%
complained about navigation

Lost in Navigation

Users couldn't find their way. Menus were buried, flows were broken.

02
Poor
overall UI rating

Visual Chaos

Inconsistent UI with no visual hierarchy. Nothing guided the eye.

03
0
in-app review options

The Screenshot Hack

Users took screenshots to review answers later. The app didn't let them.

04
60%
wanted speaking practice

No Fluency Path

Grammar improved, but speaking? Users were on their own.

05
0
words tracked

Invisible Progress

No word tracking. No milestones. Users couldn't see how far they'd come.

06
5+
taps to switch language

Buried Controls

Switching languages meant diving into settings. Every. Single. Time.

Not a facelift. A rethink.

Every screen was rebuilt from first principles: What does the user need right now? What's getting in their way? What would make them come back tomorrow?

Babbel redesign style guide: orange and emerald primary colors, neutral grayscale, and the Roboto typescale from 24px headlines to 10px labels

A tightened visual system. Orange to act, emerald to confirm, Roboto across a calm eight-step scale.

Home screen: old single-list layout versus the new layout with a resume-learning CTA, four review modes, and an animated streak ring

Home, before and after. A clear next step, four review modes, and a streak that actually shows up.

Home Screen

The Zeigarnik Hook

A progress bar that whispers "you're almost there." Streak counters that turn learning into a daily ritual. Psychology meets pixels.

↳ Zeigarnik effect, people remember incomplete tasks 90% better
Explore screen: old vertical content list versus the new filterable feed of videos, podcasts, and books grouped by category

Explore, restructured around what users actually browse for. Filter, save, return.

Explore Screen

Content you actually want

Podcasts, articles, games, categorized by what you love, not what we think you should learn. Your interests become your curriculum.

↳ Intrinsic motivation drives 3× more engagement than extrinsic
Connect screen across three tabs: 1:1 individuals, group conversations, and bookable classes with native speakers

A new Connect tab. 1:1, groups, or booked classes — three ways to actually speak the language.

Connect Screen

The missing piece

Chat with native speakers 1-on-1 or in groups. Because fluency doesn't happen in isolation, it happens in conversation.

↳ Addressing the #1 unmet need from user research
Profile screen showing the user's avatar, achievement badges, and a 'My Library' section with saved words, videos, and podcasts

Profile turned into a personal library — every saved word, badge, and podcast in one place.

Profile Screen

Your learning DNA

Every saved word, every bookmarked lesson, every milestone, organized beautifully. Your journey, at a glance.

↳ Organized content retrieval reduces cognitive load by 40%
Six redesigned learning screens: vocabulary card, congratulations celebration, listening exercise, vocab recall, and two character-recognition prompts

The redesigned learning flow, end to end. Clear cues, playful celebration, and one consistent visual language.

Lessons that shaped how I design.

"UX isn't about features, it's about confidence."

Every interaction should make users feel smarter, not smaller.

"Users don't drop off because they're lazy. They drop off because they're lost."

Navigation isn't just wayfinding, it's the foundation of trust.

"The best UX gets out of your way and helps you feel smart."

Invisible design is the hardest, and most impactful, kind.

Top