Context

Babbel is a leading language-learning platform that allows users to pick a language to learn among 14 options. During 2023, the company focused on two big tasks more directly connected to the product: improving content organization, and executing a rebranding. 

My team was directly responsible for the first task — improving content organisation and redesigning our home tabs and learning plan — and one of key teams involved in the implementation of the second, as we owned the most used features: Hometab and the Learning Plan. 

The rebranding was mainly a visual change. It was built over the structure of a previous project my team was also responsible for executing: The improvement of content organization and redesign of key features, which I called the 1st phase of redesign. The rebranding in product began in August 2023 and was released in January 2024 for both Apple and Google stores. 

The team was composed by:

• Me, as the only product designer;
• A PM;
• An Engineering manager; and
• 8 devs (iOS, Android, Front-end and Back-end). 

My contribution assured that designs could be handed over in time for implementation and also generated proper alignment with the many teams involved. 

Objective and scope

The goal was to update the platform completely, beginning with the key features. All teams had a deadline of delivering the 1st stage of rebranding until January 2024.

Naturally, the whole product area was interested in how this new experience would impact the relevant KPIs. However, being a redesign — thus company-wide strategic initiative, metrics were monitored only in the sense of preserving health indicators rather than improving them. 

The process

Below, go through the main steps of what happened after my team received the style-guides created by the brand agency Babbel hired. The Design System Team became responsible for assuring new styles would lead to an application that was faithful to the new brand, which posed the need for proactive alignment and exposure. Many of the new components used in the Home tab, Learning Plan tab and Podcast section were built considering my input.

Inside of my team, I played an active role on how implementation happened, proposing and scheduling sessions for partial checks, final review, kick-off and handover, beyond informal moments for feedback. 

1 - Definition of goals and scope

We were hoping to update the main platform in about 4 months, which represented big stress for my team, since we owned the key features of the app (the home tab and the learning plan). It was agreed that the focus would be only on mobile for the first release and that flows wouldn't be altered. Our main goals were then:

a) Replace basic tokens with new ones. Namely, fonts, colors, spacing, shapes, and so on...;

b) Design and develop new components for the Learning Plan;

c) Discover and define how the image of lessons would be stored and applied;

d) Define, design and implement the logic for handling content mismatch across different languages (some languages didn't have lessons in units, while others didn't have course structures at all);

e) Design and develop new sates for celebration of completion and celebration of lesson-end;

2 - Elaboration of the designs

I began working over the experience I handed over in the 1st phase of redesign. It had been already shipped at that time and with great results. Therefore, my intention was to sketch new versions of the existing elements, which then I shared as propositions for new tokens and components to the Design System team. They were particularly interested in assuring the new brand would be communicated, and I was focusing on handing over with quality while having in mind our tech constraints.

Dark Mode

Babbel released app-wide support for Dark Mode on July 2023, so this project also considered it. Colors of the unit widget were picked to work on both themes. 

Congratulation cards and locked versions for non-subscribers
As mentioned earlier, Babbel operates in a subscription-based model. However, users can still sign up and try a 1st lesson before being asked to pick a plan. 

Podcast widget
A part of the rebranding also involved redesigning the podcast widget, which is an additional — yet important — component in the home tab.

Tablet versions
I also had to create tablet versions to be release as part of the mobile application.

3 - Preparation of assets and designing for fallbacks

Because it was necessary to deliver a rebranded experience fast, many aspects of content migration remained pending. Some languages didn't have lessons organized in units or didn't have pictures attributed to it, and some languages had very legacy content we couldn't easily fetch into the rebranded API. Therefore, I had to specify design solutions for these cases such as having fallback pictures and silhouettes, treating non-unitized content as unitized content in the client-side, and statically applying a fallback color to every lesson.

4 - Creation of specs and testing, agreement on handover

Once the general concept was solidified, I detailed the scenarios and variations the interface needed to handle. During this phase, I collaborated closely with the developers to provide comprehensive specifications for their work.

We determined that the most effective way to communicate the various cases was by creating a central board, supplemented by several sub-boards focusing on specific aspects. The following image illustrates this structure and is followed by condensed examples of the relevant variations.

I also prepared a comprehensive board for documenting all of the visual changes to be made on the components, along with design guides.

Unit colors

We also had to sort out how unit colors would be translated into the new ones To do this, I proposed a map to the DS team and specified it for replacement with my team's developers.

The following pictures show the old and new color palettes.

5 - Implementation

After the engineering team finished the technical plan based on the design specs, we kicked-off the implementation of mobile version and back-end work. During this time, I focused on enabling certain design aspects that were proposed (unit colors, and unit illustrations) along with relevant stakeholders, on supporting implementation by providing assets and further specification, and on beginning the designs of the web version. Moreover, I also dedicated time for Design QA, emulating the builds on my test devices to spot inconsistencies and errors.

7 - Release and monitoring

Mobile versions were released in January 2024 and followed the conventional phased release dynamic of updates on the app stores. 

Events were set in the interface so we could later collect data on the impact of rebranding.

I am still setting up this page. In the meantime, I'm happy to discuss this project in more detail. Find me online.

Thank you,