Babbel Redesign
Helping learners find their next step.
For this self-initiated Babbel redesign, I explored how navigation, hierarchy, review, and progress could better support the language-learning experience.
The project focused on making it easier to find an activity, revisit useful material, and see where to continue.
This is an independent concept based on the app and research material reviewed during the project.
My role
UX research, UI design, and interaction design
Why redesign?
Strong learning content, with room for a clearer experience
I chose Babbel as part of an UpLabs redesign challenge. The app offered strong learning content, but the experience lacked clarity, consistency, and motivation.
The project explored how a clearer structure and interface could make the learning experience easier to use.
Research
Understand the experience through use and review
I used the app, read Play Store feedback, and carried out desk research on language-learning outcomes.
The research pointed to the value of speaking practice alongside other learning activities and helped identify difficulties within the existing experience.
Competitive analysis
Compare the strengths and weaknesses of similar apps
I reviewed the strengths and weaknesses of apps serving the same purpose. This formed part of the research used to understand the experience and identify opportunities for the redesign.
Pain points
What needed attention
- Navigation was difficult.
- The interface lacked clarity and felt unintuitive.
- Explanations were insufficient for people unfamiliar with language-learning terminology.
- Users could not immediately review a question and relied on screenshots to check answers after the lesson.
- Learned words were not tracked.
- Switching languages required going into settings.
Information architecture
Give the app a clearer structure
I created an information architecture to organise the experience. This established the structure before I moved into screen design.
Sketching
Explore ideas around the pain points
I sketched ideas with the identified pain points in mind before developing the screens in Figma.
Visual foundations
Define the visual language
The redesign included a typography and colour scheme. The interface used a defined type scale, with orange for actions and green for confirmation feedback.
UI screens
The design response beside each screen
Home
Make the next step and progress visible
Problem
The research surfaced difficulty navigating the experience and gaps in how progress was shown.
Design response
The home concept brought a clear next step, review options, progress, and streak information into view. The intention was to help learners understand where they were and encourage them to continue.
Progress indicators made completion visible, while streaks were intended to support a regular learning habit. These were design intentions within the concept, not measured improvements in motivation or retention.
Explore
Help learners find content connected to their interests
Explore brought podcasts, articles, games, and other content into a structure designed for browsing, filtering, and saving.
The reason was to help learners find material connected to their interests and return to it later. The redesigned screen made content discovery a clearer part of the experience.
Connect
Give speaking practice a visible place
Problem
Research feedback highlighted a desire for more opportunities to practise speaking.
Design response
The proposed Connect area brought together one-to-one conversations, groups, and booked classes. It gave learners a place to find opportunities to use the language in conversation, directly addressing that research need.
Profile
Bring saved material and milestones together
Problem
Some users relied on screenshots to revisit answers. The research also identified gaps in how saved words and learning milestones were surfaced.
Design response
The profile concept gathered saved words, bookmarked content, and milestones into one place. This addressed the need to return to earlier material and see accumulated progress within the app.
The screenshot workaround made the review need visible; the profile provided a proposed home for that material.
Learning and review screens
Make the sequence easier to follow
Problem
The research identified difficulty reviewing earlier material and a need for clearer guidance within the experience.
Design response
The additional screens showed learning and review activities. The proposed lesson experience used clear cues, completion feedback, and the same visual language as the main screens.
The outcome
A redesigned structure and interface concept
The project resulted in a proposed information architecture and redesigned screens for the main learning journeys.
The work connected navigation and interface changes to the needs identified in the research: clearer next steps, access to saved material, visible progress, and speaking practice.
These are the aims of the concept. The project does not establish measured changes in engagement, retention, or learning outcomes.
What I learned
Clarity supports the learning experience
This project reinforced the role of navigation in helping people feel confident using an app.
It also helped me connect interface decisions to the difficulties identified through research. Saved material, visible progress, and access to practice each had a reason to be part of the redesign.