Context

Babbel is a leading language-learning platform that allows users to learn a language among 14 options. During 2023, the company focused on two big tasks more directly connected to the product: improving content organization and information architecture, and executing a rebranding. My team was directly responsible for the first task, and one of key teams involved in the implementation of the second, as we owned the most prominent features: Hometab and the Learning Plan. 

The rebranding was mainly a visual change. It was built over the structure of a previous project I also executed: 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, the branding was seen as strategic investment so metrics were monitored only in the sense of preserving health indicators rather than improving them. 

The process

I began by receiving style-guides created by a brand agency Babbel hired. It was my responsibility, then, to create new components and layouts for the Home tab, Learning Plan tab and Podcast section, according to the proposed visual styles.

Within 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

Babbel hoped 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. 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 upon the screens I had implemented previously during 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. The boards below show both previous and rebranded versions of the same elements, all designed by me.

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
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 the rebranding fast, many aspects of content migration remained pending. For example, some languages didn't have lessons organized in units or didn't have pictures attributed to it. Therefore, I had to propose 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 of the interface. During this phase, I collaborated closely with the developers to provide comprehensive specs for their work.

The choice was 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 and specified it for replacement with my team's developers.

The following pictures show the old and new color palettes.

5 - Implementation

Ultimately, 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'm happy to discuss this project in more detail. Find me online.

Thank you,