Discipline
Product design | Visual identity
Babbel took on the huge undertaking of rebranding its entire product. For years, Babbel had a traditional way of teaching language online, however, this was hindering innovation. The intention was clear: a new brand to enhance our premium positioning and align with our ecosystem of learning experiences. Babbel worked with an external branding agency who kicked off the process with a series of bold visual explorations, setting the stage for the brand’s new look, feel, and voice. The design system team then began to update and build our internal design system, Grammar.
Design direction by branding agency
Design direction by branding agency
Babbel internal design system, Grammar design system
Babbel internal design system, Grammar design system
That's where I came in. As a product designer, my goal was to facilitate the delivery of the rebrand for the areas of the product I was responsible for, Babbel Live.I started by familiarising myself with the new brand and playing around with the design system. It required high attention to detail, a critical mindset and problem solving to transform the Babbel Live user interface.
Babbel Live home page — On the left: Previous design | On the right: Rebranded version
Babbel Live home page — On the left: Previous design | On the right: Rebranded version
Class details page — On the left: Previous design | On the right: Rebranded version
Class details page — On the left: Previous design | On the right: Rebranded version
Learning plan page — On the left: Previous design | On the right: Rebranded version
Learning plan page — On the left: Previous design | On the right: Rebranded version
In order to achieve the delivery, I knew the importance in the details, both design and engineering needed to focus on this. I prepared my figma files for seamless collaboration with the engineers and facilitated several meetings with them to ensure the work was clear.
The design system team set up the semantic tokens for the existing brand. Once the new brand was defined, they switched the tokens automatically. However, an eye for details was necessary as some of the tokens did not work correctly in context of the product and specific features.
Semantic tokens manual changes
Babbel Live rebranded in dark mode
Semantic tokens manual changes
Babbel Live rebranded in dark mode
