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 planning and enabling a shift towards simpler and clearer organisation of content, while giving first steps towards a new look&feel. The purpose of this project was to improve our home tab and webpage to accommodate such intentions.

The project began in February 2023 and was released in August 2023 for both Apple and Google stores. The release positively impacted 25% (380k) of Babbel's active users. We saw an expressive increase of 13% in revenue, increase of 20% in users following recommendations, and reduction of churn. 

Additionally, a quantitative survey with around 1500 participants fired before and after the release demonstrated that 86% of users assessed the new experience as good (46%) or very good (40%), against 80% of good (48%) and very good (32%) on the previous one.

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). 

Moreover, I had constant contact with other relevant teams such as the UX Research, Content Systems, and Learning Content ones.

Problem and KPIs

The company was naturally interested in how this new experience could impact the relevant KPIs. However, being a first phase of a long-term redesign strategy, we agreed success would be first not damaging health metrics. Seeing increase on conversion or retention after 3 weeks would be a bonus. Moreover, a relevant goal was to coordinate a change on our legacy systems along with the development team.

The process

Below, there is an illustration of the main steps of the process. It is depicted linearly just for explanatory purposes, as efforts in different steps naturally influenced each other. 

I played an active role on the definition of the process, proposing and scheduling sessions for partial review, final review, kick-off and handover, beyond more informal and constant opportunities for feedback. 

Additionally, in the beginning I focused on generating alignment because there was high level of uncertainty and many relevant teams interested on the outcomes project.

1 - Problem framing and intentions of the company

Beyond the problem statement mentioned earlier, we were hoping to increase engagement by addressing the lack of guidance, and the lack of clarity on the learning outcomes learners commonly face when using digital-platforms.

By relying on foundational studies produced by Babbel's UX Research team and on quantitative data, I could make our problem more tangible and focus on the following user needs:

a) Learners need to understand the learning path we have for them and what comes next;

b) Learners need to know what skills they'll gain from different learning experiences.

c) They want to get suggestions of other learning activities related to their main course.

2 - Preparing the foundations and defining the concept of units

We began working with the research team to understand how previous studies could help us meet our goals and user needs. This team had conducted foundational studies on overall content and pointed out opportunities for organizing learning content in more modular and specific ways. These insights indicated that this kind of organization was particularly suitable for digital learning.

After reviewing our current content along with the Learning Content team, we found it possible to group lessons based on their learning outcomes. This resulted in clusters of 3 to 5 activities centered around specific skills. We decided to try this approach as a first step.

The idea of a "unit" came later, while reviewing studies in which participants used to describe and name such content modules. I realized and could demonstrate that learners were familiar with this concept from other aspects of their lives, making it less risky. Additionally, this approach allowed us to clearly display what a learning plan entails through outcomes like "Learn how to greet people." Using units could also help us create links to other activities on our platform, a foundational step in Babbel's connected ecosystem.

At this stage, I also prepared a project notebook containing the rationale behind intentions and compiling major qualitative and quantitative insights on how users were navigating through the home tab so far, their main goals and pain points, how related metrics were performing, and business intentions of the features. Such a deliverable helped me propose more assertive design principles and enhance alignment with stakeholders.

3 - Design principles and exploration of alternatives

The team decided to start with the mobile version of the product because it's the one that is used the most by Babbel's users. The project also required significant work on the back-end and change on legacy systems. So, by prioritizing the mobile release first, we were able to find and tackle issues and keep the project's size manageable.

To initiate my design exploration for the project, I established a set of design principles to guide my work. These principles were derived from the identified problems, our collected evidence, and the business objectives. The principles I defined are as follows:

1 - The designs should focus on the unit as the main element, thus emphasising the learning outcome;

2 - They should provide clear direction of what we recommend users to do next;

3 - The learning plan should be made clear for the user and the interface should be transparent about what's coming next;

4 - The designs of the units should be flexible to accommodate future insertion of different learning activities;

Afterwards, I started collecting a set of references and sketching some wireframes. Initially, my focus was on generating tangible ideas to discuss with developers. This helped us outline initial limitations and assess the state of our systems. A notable challenge was that Babbel was concurrently developing a design system during this project. As a result, pre-defined elements were restricted to color, text, and spacing styles.

The picture below shows how the home tab looked like before, and the main actions available on it for users.

The following images depict parts of the conception process. Those are sketches I brought for feedback sessions with the developers and with designers from other teams to align on the directions and constraints, rather than final UI designs.

I started by considering something that would be familiar to the previous version of the page. In the beginning it was not clear that we would have buy-in for more significant changes, so the team was seeking interventions "faster" to code. My initial intention was to bring the whole unit block to the home page in a not-so-overwhelming fashion, allowing users to navigate through the future activities. 

After first feedback sessions and alignment with product leadership, we got buy-in to consider more significant changes on style and information architecture. I started, then, playing with bolder propositions, relying on illustrations (something our users appreciate, as demonstrated by research) and bigger font-sizes. I wanted to clearly emphasise the learning outcome expressed by the unit, while making evident the next recommended activity. 

I narrowed my explorations down to a first version of a highlighted card + carousel concept (picture below, on the right). My assumption was that users would be able to clearly see what they were supposed to do next, and check what's ahed within the unit. A final card allowing users to skip to the next unit would help them make the connections and perceive the learning plan more easily.

Something particularly challenging was aligning on a direction with the design system team. As mentioned earlier, they were building the system at the same time that I was designing this project. Therefore, I had to involve them from time to time in order to guarantee consistency with future components and styles.

After positive feedback from the squad and the wider design team, I started elaborating and refining the designs towards the directions above.  At this time, I also chose to conduct usability tests with current Babbel learners to understand their level of recall, while uncovering possible usability errors. Those were online moderated tests carried out with 5 participants.

Results of the test were positive and allowed me to get insights on overall perception, redundancy of information and how did they find the new experience compared to the previous one. 

Refinement and formal proposition

I kept working on the designs, refining the overall concept and beginning the elaboration of variations to address our use cases and facilitate the changes on the system.

At this part of the process we also uncovered relevant constraints that changed a bit the original proposition. For example:

• We understood that we could not remove the subtabs that existed in the previous version due to how the system would handle the existence of users seeing the units, and users not seeing it;
• We also discovered that data related to the next unit could not be retrieved in the home tab due to how the APIs were set. This required me, for example, to change the Next Unit card on the carousel;
• We could not change the progress indicator (Activity Tracker) into a smaller component on the top-bar, like intended on earlier propositions;
• Babbel's systems could not support the improvements I've proposed for how users explored content across units, at first.

The picture below describes the overall concept I handed over for the 1st release of the project. On the left, depicting the main components of the Unit Widget. On the right, the main actions available.

Colors and illustrations

To improve the intended experience, I suggested that units should be differentiated by using colors, emphasising conclusion and progression. Additionally, I proposed that each unit should feature unique illustrations linked to the learning outcomes, which was based on insights from both qualitative research and previous AB tests on engagement interventions.

A palette of 12 color variations was created and made available to be applied by content teams into the units once they are published. I talk more about this process on topic 4.

4 - Definition of use cases, system changes, and metrification plan

Once the general concept was solidified, I began detailing the specific scenarios and variations that the interface needed to handle. During this phase, I collaborated closely with the developers to ensure that I provided comprehensive specifications for their work.

We determined that the most effective way to communicate and document the various use cases and system modifications 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.

Dark Mode

Babbel released app-wide support for Dark Mode on July 2023, so this project also needed to consider it. Besides changing the other elements on the home tab interface into their dark-mode versions, colors of the unit widget were picked to work on both themes. 

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. The board below shows two relevant variations of this use case: on the left, when users still can do a 1st lesson. On the right, when they have no more free activities available to do.

Prompt of reviews and display of special-lessons
Babbel learners are recurrently prompted to take review lessons related to what they have learnt so far. The picture on the left represents the main states: when review prompts are highlighted, and when they come as next activity. On the right, the picture illustrates the variations when users are presented with special thematic-lessons. In this case, travel-motivated ones. Again, the main states depicted are when such activities are highlighted, and when they are coming next.

An example of progression
The suggested progression logic is visualized in the board below when followed in a linear sequence. Users would complete activities until they reach the Unit Recap activity, which signals the conclusion of a unit.

The carousel only displays lessons that are coming in the future, which was something we decided to do after carefully reviewing research and concluding that re-doing past lessons within a unit was not a relevant case for our users. We chose to emphasise current state and display what's ahead.

To enhance clarity and minimize confusion, I introduced a concept where users would stay at their current "anchor" point, even if they decided to try a future lesson or review a past one. Initially, the system struggled to differentiate between the last-completed activity and the recommended order. Consequently, when users revisited past or future lessons, the system would shift the "anchor" point, using that as the reference for displaying the current state on the home tab. My proposal involved prompting users whenever they strayed from the recommended order, inquiring if they wanted to reposition due to familiar content or concepts needing reinforcement.

Because of system constraints and deadline of the 1st release, we could not implement the overall improved navigation across the learning plan. Nonetheless, I was able to suggest and gain approval for retaining this logic within the same unit. Therefore, the board below illustrates the maintenance of the reference point.

Collaboration with Content Design team

During this phase of the project, the content design team, responsible for UX writing, joined in to review and refine the original copies I had created. They also generated the localization keys essential for facilitating product translations. Although there was significant collaboration between me and the content design team to define the texts and decide whether we could reuse existing content, the operational aspects of localization were primarily handled by them in coordination with the developers.

Metrification plan

I proposed a metrification plan of the experience in order to infer the quality of my propositions and capture data beyond KPI-related ones. The picture below illustrates a part of this process. In the beginning, I listed the most relevant propositions behind my design interventions and ideated on some ideas for measuring them (my background in computer science and data science usually help me with that). The block on the left brings some of these propositions. Then, along with the product analyst, we could delve deeper and ideate on how to measure each of the propositions using our tracking infrastructure.

Due to some constraints, we could not track all the events I initially proposed. However, in the picture below, I annotated the elements and interactions we tracked for the 1st release. 
I found out that creating an event-annotation component to be used across projects helped making tracking more transparent across the teams and more informative to non-technical stakeholders.

5 - Implementation of mobile version

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.

Unit illustrations

As mentioned earlier, using illustrations received positive feedback from users and was approved by stakeholders. However, there are scalability considerations to note. Initially, leadership wanted one illustration per lesson for more precision. However, this was later adjusted to one illustration per unit due to practical reasons. Collaborating with the technical team responsible for the learning systems, I provided detailed specifications and facilitated changes to the data model to accommodate this new "unit illustration" concept. Additionally, I proposed a straightforward process for users of the learning tools to associate images with units in the future.

Babbel planned to change the visual style of illustrations and images in 2024, so we focused on producing the first batch of them in-house. For this initiative, I shared the illustration work with two other designers who had capacity on their side, doing part of them. The board below illustrates an outcome of this process.

Unit colors

We also had to sort out how unit colors would function. To do this, I partnered again with the learning-systems team to make sure it was set for the first release.

As I mentioned earlier, I created a palette with 12 variations (background color + text color). Working with the systems team, we designed a process where content administrators could select a number for their chosen variation. For instance, they might choose design variation 1, and once this number gets to the client apps, the software translates it and uses the right color settings.

The following pictures show the color palette and a spreadsheet we used to define the variations handled by the system.

6- The web version

The design of the web version was based on the scope of the mobile release. I aimed to deliver a similar experience and attend to the same system and use cases, while naturally producing the required specs for the web environment. 

I followed the same process as before: began with some explorations; took it for feedback with the team; conducted a usability test; refined the designs according to results of the test and team feedback; elaborated the relevant use cases; defined tracking events; and handed-over design specs. The actual implementation of the web version was relatively easier because the hard work on back-end and struggle with constraints were dealt with before.

The following boards show some of the specs and designs of the web version.

7 - Release and results!

The mobile versions were released on August 7th, 2023 and followed the conventional phased release dynamic of updates on the app stores. 

Data on the first month of usage showed that my propositions positively impacted 25% (380k) of Babbel's active users. We saw an expressive increase of 13% in revenue, increase of 20% in users following recommendations — now in a bigger and more expressive card —, and reduction of churn. 

Additionally, a quantitative survey with around 1500 participants fired before and after the release demonstrated that 86% of users assessed the new experience as good (46%) or very good (40%), against 80% of good (48%) and very good (32%) on the previous one.