Babbel rebrand & web design system.

Role & responsibility

Senior UX Designer
Copywriter
Page builder
Project manager
End-to-end ownership

Timeframe

February – May 2024

TEAM

1x UX Designer
5x Copywriters

SKILLS

UX research
Data analysis
UX / UI Design
Wireframing
Copywriting
Page building
Web design systems
Project management

TOOLS

Figma
Microsoft Clarity
Google Analytics
WordPress
Midjourney

Overview

A full brand overhaul. 480 pages. 6 languages. 4 months. 1 designer.

In February 2024, Babbel launched a company-wide rebrand where everything changed – new colours, new typography, new illustration style, updated tone of voice, and overhauled image guidelines. All of this needed to be reflected across Babbel’s B2B website babbelforbusiness.com. This meant redesigning around 80 pages that spanned across 6 geographic markets, so 480 pages in total.

With no project manager, an understaffed content team, and a hard deadline at the end of Q2, I stepped into a role that stretched well beyond design. I owned the project end-to-end, from building the sitemap and prioritisation framework, to wireframing, even copywriting, building a full web design system, and shipping every page.

Long story short: we hit the deadline and the new site delivered a 60% increase in conversion rate site-wide.

Impact

480+ pages rebranded across 6 languages

Every market and every page fully aligned to the new brand by deadline

Full web design system built from scratch

A reusable system of components, type scales, and UI patterns that set the team up for long-term consistency

60% increase in conversion rate

The rebrand directly drove more users toward high-value actions, demo bookings, pricing enquiries, and sign-ups

THE PROBLEM/S

A full rebrand with no clear execution plan.

The rebrand directive came from the top, covering new colours, fonts, iconography, but the brief for how to actually implement this across a nearly 500 page website didn’t exist. With no project manager assigned and a content team already stretched thin, there was a real risk of the whole thing becoming unmanageable fast.

The scale of the task was significant:

  • 80 pages across 6 language variants meant close to 480 individual page updates
  • Most pages needed not just a visual reskin but also fresh copy aligned to the new TOV
  • The deadline was fixed – all of this in just 4 months


With such a small team, it was clear that trying to give every page equal attention would mean delivering nothing well. So a clear prioritisation strategy had to be developed.

USER RESEARCH

Data-informed prioritisation.

Before touching a single wireframe, I needed to understand which pages actually mattered most to the business and to users to create some sort of priority. I pulled data from GA to map where users were spending time, where they were converting, and where they were dropping off.

Key findings:

  • The demo request page and home page together accounted for 41% of all goal completions on the site
  • Product pages had the second-highest conversion value – users frequently visited them before converting elsewhere
  • Consideration based content like blog and FAQ pages showed high traffic but low time on page and barely lead to conversions.


This confirmed the approach: high-priority pages needed a full redesign with fresh copy, considering not only the aesthetics but also the UX. For now, lower-priority pages could just undergo a reskin to match the new brand without taking too much time.

DESIGN DECISIONS

A prioritised, tiered approach to a 480 page site.

Given the constraints, the most important design decision wasn’t a visual one – it was structural. I built a sitemap listing every page on the site and mapped out the geos it existed in (to make matters more confusing, some pages only existed in a couple of languages).

Once we had a clear list of every asset across all 6 markets, I created a prioritisation framework that divided them into the two tiers. This wasn’t a compromise. It was a deliberate, data-backed call that let us protect quality where it mattered most.

Tier 1 - Full redesign (~20 per geo)

High-conversion pages, for example:

  • Home page
  • Demo page
  • Contact us page
  • Product pages


These received the full works, including UX research to assess the page’s performance, deciding improvements (new sections, CTA placement, etc), wireframes and fresh copy written to the new TOV. As these were highest priority and would take the biggest chunk of time, these were focused on and built first.

Tier 2 - Reskin (~60 per geo)

Lower-priority pages, for example:

  • Blog posts
  • Campaign ads
  • Privacy policies


These received updated typography, colours, and image treatments to bring them in line with the new brand, without the full design and copy overhaul. As these pages had less traffic, we could get to them later.

DESIGN SYSTEM

Building the web design system.

Before any page could be built, thorough guidelines for the new brand in a web context needed to be created. The provided brandbook covered print and product, but not web specifically. Therefore I set to building a web design system in Figma that translated the new identity into:

 

  • A defined type scale (various headers and body text) with specific sizes, weights, and line heights
  • A button system with primary, secondary, and ghost variants across multiple sizes
  • A colour token library mapping the new brand colours to semantic uses (primary CTA, background, text, error states, etc.)
  • A grid and spacing system that worked consistently across all viewports – desktop, tablet, and mobile
 

This became the foundation that everything else was built on and was handed back to the team as a long-term asset once the project wrapped.

WIREFRAMES

LoFi to HiFi, fast.

With a tight timeline, I had to move through the wireframe process quickly without cutting corners on the pages that mattered most.

My process:

  1. LoFi sketches for Tier 1 pages – rough layouts to establish structure, content hierarchy, and key UI elements. These were largely informed by heatmaps and GA data.
  2. HiFi wireframes in Figma – fleshing out the sketches for tier 1 pages, incorporating the design system and new brand assets.
  3. Direct to build for Tier 2 pages – using the design system as a guide to update directly in the CMS, rather than producing full wireframes.

CHALLENGES

Getting alignment across a complex project.

With a project this size touching marketing, product, content, sales, and development. Stakeholder management was just as important as the design work itself.

The main challenges were:

  • Content resourcing. With only 5 copywriters and 480 pages to update, the content team was under real pressure. I took on copywriting for a number of Tier 1 pages myself to relieve the bottleneck and keep the project moving.
  • Timeline pressure. 4 months sounds reasonable until you break it down by page, language, and review cycle. I built a project tracker in Google Sheets – essentially acting as PM – mapping every page, its tier, status, owner, and deadline. This gave the whole team visibility and kept things from slipping.
  • Page disagreements. Some stakeholders were reluctant to such a big change on the site. For example with the home page design, the marketing team were initially hesitant about removing the above-the-fold carousel that you can see here, as they wanted to promote multiple content pieces. I worked with them to review Clarity data showing low engagement with the carousel, and we agreed on a simpler design, focused on key CTAs while improving signposting elsewhere on the site. Any disagreements when it came to UX could be easily solved by data rather than subjectivity.
  • Product names. The rebrand surfaced something that went beyond the design brief: some product names on the site were misaligned with how users actually searched for them. Our main product the Babbel app itself, for instance, was labelled “Babbel Professional”, but nobody was searching for that. I pushed beyond the typical remit of a designer and pitched to the whole B2B division to rename it to what users actually called it: “the Babbel app”. The case was straightforward – “the Babbel app” averaged 200 organic searches a month versus just 80 for “Babbel Professional.” The team agreed, and the change was made.

Final Design

480 pages rebranded. 1 cohesive site.

The finished site brought together a fully updated visual identity – new type hierarchy, refreshed colour system, updated imagery and illustration style. With a restructured content approach on Tier 1 pages and a clean, consistent reskin across Tier 2, every page across all 6 geos was live and on-brand by the end of May 2024.

HOME PAGE – BEFORE

After

Product PAGE – BEFORE

After

OUTCOME

The result.

Although the deadline was met, the real measure was whether the new site actually performed better for users and the business.

60% increase in conversion rate

Demo requests, pricing enquiries, and sign-ups all rose significantly following the rebrand launch

Full design system built

Beyond the immediate project, creating the web design system set us up for all future work

28% reduction in bounce rate

Cleaner hierarchy, stronger CTAs and better content kept users from bouncing on key landing pages

36% increase in organic visitors

Aligning product names with real search behaviour brought an immediate and measurable spike in traffic to the site

LEARNINGS

Key takeaways.

Triage is a design skill

The decision to split pages into two tiers – full redesign vs reskin – was probably the single most important call made on this project. Without it, trying to do everything at full quality would have meant doing nothing particularly well or not hitting deadline. Learning to make that kind of structured prioritisation call early, and communicate it clearly to stakeholders, is something I’d apply immediately on any similar project.

Owning more than your job title means moving faster

Taking on copywriting and project management alongside design wasn’t comfortable, but it helped streamline the project and ensure it was done thoroughly. Being willing to stretch and being honest with the team about what I was taking on kept things moving.

A design system isn't overhead, it's a multiplier

Investing time at the start to build a proper design system felt like a risk when the clock was already running. But it paid back every hour spent, many times over. Consistent components now means faster builds, fewer QA issues, and much cleaner handoffs.

Know when to go beyond the brief

Noticing that a product naming issue was quietly hurting organic traffic obviously wasn’t in my job description. But raising it, and backing it with data, turned out to be one of the higher-impact contributions of the project and of the B2B division overall. The lesson: don’t be afraid to flag something that falls outside your remit.

Work with me.

Get in touch to work together or just for a virtual coffee and a chat.