Babbel's Landing Page
Goal
The objective of the project is to create a Landing Page to advertise and sell a product or service. It should be only 1 page long, containing all the relevant content for the product you are working on. The Landing Page should be for some well-known brand in the market, so that you choose 1 product or service to create this promotion page. The page should be for the web, in standard format, without responsiveness and without concern with mobile.
Solution
UX|UI Design
My Role
A landing page focused on increase the trust in the method and its conversion.
Method Used
I decided to start with desk research to discover information about the company and the public before to in the next steps I’ll have assumptions, pain points and a problem statement defined.
About Babbel
Babbel is an educational online platform created in 2007, in Berlin, Germany, to teach languages for students in any place and any time. The amount of it is currently fourteen: Dutch, Brazilian Portuguese, German, Spanish, English, Turkish, Italian, Indonesian, French, Norwegian, Swedish, French, Russian and Polish.
In 2018 Babbel had around 1 million subscriptions in its platform, and at the same year, a new set of products were arrived in the market, as travel marketplace. They are also recognized with awards, press and universities researches. The innovative method of learning was tested and validated.
Goals
As I search I could understand that Babbel has some differentials compared from others of the same segment, the main goals were:
​
-
Have a good experience and a joyful process of learning.
-
Have support 24 hours per day to get closer to the customer.
-
Focus on what the customer wants to study, as for travel or living abroad.
-
Have a fast improvement the skills, at the same on student’s time.
-
The good quality of good in-person classroom, but at where you are.
Trustpilot
I read about some reviews on Trustpilot and the most of them are excellent (69%) and very good (26%), the rest is good (2%), bad (>1%) and so bad (2%), the total of reviews are 14.885 until this research was made.
Most of them says, in general, that the method is good and they are learning expressively. The percentage of bad, have some issues about the inner platform. So bad percentage shows up complaints about the payment and microphone issues, just one reviews complaint about the method.
Benchmark
I found out some competitors to compare them strong and weak points, resources and what contains on Landing Page. I chose by the notoriety of site, method validated, online lessons and similar platforms.
Heuristic Analysis
After I analyze the competitors, I made a heuristic analysis to achieve a better comprehension of the role page and its problems to get fixed. I just showed it up what needed to be corrected.
Match between System and Real World
Aesthetic and Minimalism Design
Help and Documentation
Aspects as more reviews and specialists of the area or researches should appear to create get stronger trust environment.
Some changes need to be done to correction and to solve, mainly about minimize the information and get stronger the brand’s message.
In online courses, customers need to have an easy way to contact and help, so this needed to get fixed.
Survey
I made a survey on google forms and I got 15 answers. This helped me to complementary Yale’s research and City University of New York research about satisfaction and effectiveness of Babbel’s method, but what I wanted to know was about the motivations and differentials of choose or not an online language course to understand better the customers.
Survey's Answers:
In the end, I could realize there are repetitive words like price, teachers, method, platform and time, demonstrating its importance of these topics. The motives to choose this way of the study was since professional to access to other acknowledgement.
Interview
I did an interview by videoconference and I made some questions after I analyzed all of the points mentioned above and started to have some assumptions. I also asked the interviewee to see the landing page and says what need to be improved and what have or no relevance.
​
The interviewee explained about the amount of languages that she learned/want to learn, the time minimum to be fluent in some language (2 years) and what she thinks it is functional, need to be improve and relevance of the actual Babbel’s landing page. The price should appear in this page, the minimalism call to her attention and the language’s bar is effective, in her opinion. Also, she said the method and the amount of languages are the differentials compare to others competitors.
Assumptions
Some questions were rounded my mind as I collected more and more information. As I mentioned before, I had these assumptions (down below) and when I get information enough to validate or not all of them I focus in a few and started to establish the main problem.
-
Young people are more used to this kind of service.
-
The price is important to have a lot of sites and I think also here should have.
-
People who use this kind of site is busy.
-
People choose Babbel because of its method.
-
People choose Babbel because of its price and time range.
-
The amount of languages available is a good advantage.
-
Call to action needs to be bigger.
-
The layout of the page needs to achieve the expectations.
Problem Statement
Customers have some issues in finding information about the average time to get fluency and price and plans available. Also, an absence of the support and care, being an online platform without non-teacher, as well as the proves of the effectiveness of the method to create a feeling of trust.
Pain Points
To a better comprehension, I separate in topics the pain points that needed to be fixed.
-
Price and plans
-
Specialists behind
-
Average time
-
Prove and show results of the effectiveness of the method
-
Show more support
-
Minimize information on down the page
Proto Personas
Customer Journey Map
Purchase Decision Process
Furthermore the customer journey maps, I made step by step of the decision behind a choice to purchase a Babbel product, to be clear and direct to base the landing page’s steps on it too. Thereby, the customer would have even more motives to purchase, like two advantages: price and method.
Wireframes
Then I decided to follow up in digital transcription with the second option. Because it matches more effectively with the data and tools mentioned before.
Visual Design
To create the interface I used Figma.
​What I did to improve:
​
​
- I changed the head of the page to pass through a daily situation of Babbel’s user, to study wherever you are. Also, I centralize the text and let bigger the CTA to concern the attention there.
- I made a change on text to the third benefit to show how fast are the results because customers consider it important when they search for a course.
- I adjust the live chat to humanize it more, it helps to create a feeling of care but minimize the part of an AI behind it. And I put a button to go back to the head, to the CTA, anywhere part of the page you are.
- I transitioning the colours through the different categories to establish and create better memorization on customers and to get stronger the brand’s message.
- I showed the proven by Yale’s research, cause on surveys and interview I could realize that customers feel safe and trusted on the method previously validated.​
- The next validation is qualitative and captured on Truepilot by Babbel’s students, the good score was put on the head of the page too.
- A free test calls customers with doubts and makes more leads to turn out loyalty customers.
- Price was too mentioned by customers and Babbel has this advantage compared on its competitors, also it was hard to find out on site and it was a pain point drastically seen in customer journey maps. The price came before the option for free lesson to attend the business purposes and customers too.
- FAQ make the effectiveness of the project more trustful and transparent, evoking the help of the support necessary to this kind of product.
- I made some changes on down part of the page to better reading and comprehending, like the spacing between the texts and links, optimization of the display of languages available of the page and social media more visible and clickable.
Prototype
The prototype was made on Figma, click here to test.
