The Babbel Rebrand: Translating Vision into Design

A behind-the-scenes look at Babbel’s journey to rebrand and refresh its visual identity

Ritu Kumari
Babbel Design
Published in
8 min readSep 30, 2024

--

Babbel, a leading product in language learning, embarked on a transformative journey a year and a half ago with a big initiative to rebrand its entire product. As a visual product designer joining Babbel’s newly formed Experience Team, I had the privilege of witnessing and contributing to this exciting evolution, and I will take you along the main milestones.

The Prelude: Understanding the Need for Change

We loved the orange colour but needed fresh energy. Babbel had for years a traditional way of teaching language online through simple user-friendly interfaces, and detailed, expert-crafted lessons. However, tradition was getting in the way of innovation, which led us to make a big change: rebrand the entire product to make way for innovation. Our goal was clear: we aimed to retain the expert language learning Babbel was known for while evolving to support diverse and modern learning styles.

Crafting the Blueprint: Strategy is Key

Rebranding without a strategy is like navigating a ship without a compass. Defining clear objectives, conducting market research, and understanding user needs are essential to uncovering key pain points and shaping a successful path forward. With our vision in place, Babbel’s strategy centered on empowering learners through innovative design solutions, guided by two main principles:

  • A Personal Language Coach: Babbel’s rebrand goes beyond language teaching, positioning itself as an approachable, professional, and optimistic personal coach.
  • Flexible and Enjoyable Learning: We aimed to create a learning experience that adapts to busy lifestyles, making language learning effective but also fun and engaging.

These principles became the backbone of our transformation and the foundation of the brief we handed over to our external agency, setting the direction for the rebranding journey.

The Creative Alchemy: Bringing Ideas to Life

Our creative collaboration brought together:

Internal Experts: Marcus (Product Design Director), Ralf (Design Systems Head), Tino, and myself from the Experience Team.

External Partners: The talented creatives from Koto, renowned for their brand design expertise.

Koto kicked off the process with a series of bold visual explorations, setting the stage with innovative ideas for the brand’s look, feel, and voice. Their concepts were inspiring, but we needed to see how these visions would translate into our app’s real-world experience.

Design Direction by Koto: Exploring the New Visual Language

That’s where Tino and I (Experience Team) stepped in, using our understanding of the product to bridge the gap. We took Koto’s most promising visual direction and began to map it onto crucial app pages like Home, Live, and Explore. In a few sprints, we crafted prototypes that brought these ideas to life in the context of our app.

This is how we in the Experience Team envisioned the Home, giving each learning experience its own style — for example, podcast covers feel more vibrant while lesson cards are clean and focused.

Home Dashboard — On the left: Previous design | On the right: Rebranded version

Whereas for Live, we kept the class cards simple to differentiate from lessons, using images and videos for onboarding and promotional cards.

Live Dashboard — On the left: Previous design | On the right: Rebranded version

Explore is vibrant and dynamic, refreshing from core learning activities. It’s designed to infuse fun and energy, making learning more engaging with exciting, complementary content.

Explore Page — On the left: Previous design | On the right: Rebranded version

Collaborating closely with Koto, we refined the design direction and presented a unified solution with product screens to our CEO. The result was a well-balanced combination of branding and functionality that received enthusiastic approval.

We celebrated this milestone with some top-notch organic wines on a beautiful Berlin summer day at a Biergarten next to the Spree, marking the successful fusion of creativity and innovation.

From Vision to Reality: Deliverables and Implementation

With the rebrand in hand, it was time to revamp Babbel’s digital experience. Our next step was to deepen our visual explorations and lay the groundwork for a comprehensive design system — a collection of reusable components, patterns, and guidelines that ensure consistency across all digital platforms. This included redesigning key elements like navigational styles, title bars, and bottom menus, and transitioning from top to side navigation on the web. Unlike top navigation, which could be hidden on scroll, side navigation remained visible and accessible at all times, reducing frustration and making it easier for users to quickly switch between different parts of the application.

On the left: Mobile | On the right: Web

We also explored how screens such as onboarding, daily vocabulary, pop-ups, and goal-setting would align with the new branding. Additionally, we focused on enhancing the user experience through animations, like the lesson end screen, loading animation, micro-interactions, and refining navigation transitions.

While we (the Experience Team) explored various visual approaches, the Design Systems team worked on systemizing these elements into a cohesive design system. They started with essential components like buttons and input fields, gradually developing more complex elements such as forms, menus, modals, and navigation components. Together, we designed patterns, established principles, and created detailed guidelines for implementation. Engineers, researchers, and accessibility designers tested and refined these elements to ensure user usability. By the end of the month, we had a comprehensive library of patterns, colors, typography styles, and icons. We provided a Figma library and design tokens within our Grammar (design system library), on Supernova, equipping designers and developers with the resources to start reskinning and developing their pages efficiently and consistently.

Grammar (design system library)

Figma’s 2023 updates significantly enhanced our rebrand. Dev Mode streamlined tracking production needs, while Variables simplified design scalability and adaptability across platforms. With Variables, checking designs for light and dark themes became effortless, saving time and reducing complexity for designers. We quickly adopted these features and made full use of their capabilities.

Plot Twists and Pitfalls: Navigating Challenges

No transformative journey is without its challenges, and ours was no exception. One major hurdle was developing a cohesive image library for thousands of lesson cards and podcast covers in multiple languages. Our initial attempts with AI-generated images fell short, producing inconsistent aesthetics.

To address this, we focused on art direction for the top 300 lessons and the top 10 podcasts, establishing a solid visual foundation and creating comprehensive guidelines. These guidelines were essential for onboarding creators and ensuring consistency.

We collaborated closely with learning content creators to select images that fit the lesson content and headlines, balancing creativity with sensitivity. We refined our approach by Using Airtable for coordination and incorporating ongoing feedback. Despite the scale and initial challenges, our phased and collaborative effort resulted in a high-quality image library that supported our rebrand and met our deadlines.

The Moment of Truth: Launching with Impact

In the meantime, the designers leveraged our robust component library to efficiently reskin various areas of the app, improve existing features, and prepare files for seamless integration by the engineering team. Grammar (our design system library) acted as our north star, maintaining consistency and streamlining the development process. As we unveiled the new Babbel, it was more than just a visual update — it was a renewed commitment to guiding our learners with a vibrant, modern, and engaging experience.

Rebrand Product overview

The Aftermath: Nurturing the Brand

Rebranding is not a one-time event but an ongoing journey. With the launch behind us, our focus turned to refining and evolving the brand. We started by gathering user feedback and analyzing performance metrics to identify areas for improvement. Comprehensive design guidelines were created and shared with our design teams to ensure everyone was aligned with the new visual standards.

Looking ahead, our goal is to innovate and enhance features while staying true to our design principles. This ongoing phase is crucial for maintaining brand consistency and adapting to user needs, ensuring that our rebranding efforts continue to drive meaningful improvements and keep the brand fresh and relevant.

Conclusion: Embracing Transformation

This experience has given us valuable insights, which I’ll now summarize in a practical guide for navigating the rebranding journey.

  1. Assess the Need for Rebranding: Analyze your brand’s current positioning, identify if and why a rebrand is necessary, and clearly define the goals and objectives of the rebrand to ensure alignment with your business strategy and market needs.
  2. Develop a Strategic Plan: Set clear, actionable goals for the rebranding, conduct market research, and gather user insights to understand audience needs, preferences, and pain points.
  3. Assemble the Right Team: Bring together a diverse team of internal and external experts to guide the rebranding process, ensuring team collaboration and maintaining open communication throughout the project.
  4. Prototype and Refine: Develop quick prototypes to gather feedback from peers. Prioritise user testing to enhance the experience or test new concepts rather than testing colour schemes, layout, or typography.
  5. Create a Cohesive Design System: Develop a comprehensive design system that includes all visual elements, components, and brand guidelines to maintain consistency and provide detailed documentation and resources for designers and developers to ensure consistent application of the new brand identity.
  6. Anticipate and Address Challenges: Foresee potential challenges and develop proactive strategies to tackle them. Establish clear guidelines for complex elements like visual assets or messaging to ensure coherence across all touchpoints.
  7. Utilize Effective Tools and Technology: Leverage design and collaboration tools that enhance scalability, adaptability, and efficiency in implementing the new brand identity, and stay updated with the latest features of these tools to optimize the design and development process.
  8. Evaluate and Iterate Post-Launch: Collect feedback to assess the rebrand’s impact, and use performance metrics and user feedback to identify areas for ongoing refinement and improvement.
  9. Commit to Continuous Brand Evolution: Keep the brand relevant by continuously evolving and adapting to user needs, and regularly update brand guidelines and design systems to reflect new learnings and innovations.

Acknowledgment

As I wrap up this article, I’m also celebrating the end of my first year at Babbel — a year of growth, challenges, and a fascinating rebranding project. This journey has been unforgettable, thanks to the collective efforts of so many talented individuals. A heartfelt thanks to my managers Marcus Hauer (Director of Product Design) and Ralf Chille (Head of Design System), and my colleague Tino Burkhardt (Visual Product Designer) from the Experience Team for their trust, creativity, and dedication. Special thanks to our external partners at Koto for bringing our ideas to life.

I’m grateful to the designers and leads from Self Study, Engagement, Live, Central, and Growth for their collaboration and creativity and to the design system team for ensuring seamless integration. A big thanks to the researchers and engineers for their meticulous work and dedication. A sincere thanks to Liz Chung for coordinating everything as our PM, Anna Stutter Garcia and Eden from Design Operations for fostering collaboration within our design teams, and for their valuable feedback on this article.

Lastly, thank you to our leadership team for supporting our vision and allowing us to push boundaries. Here’s to a fantastic first year at Babbel, filled with teamwork, creativity, and a rebrand that wouldn’t have been possible without all of you!

--

--

Babbel Design
Babbel Design

Published in Babbel Design

We’re a team of of product designers, user researchers, and content designers sharing what we learn and discover while building products for language learners.

Ritu Kumari
Ritu Kumari

Written by Ritu Kumari

Visual Product Designer at Babbel

No responses yet