Case study: designing a better onboarding flow for a language learning product
P.S: These opinions are my own, based on my limited knowledge, and are not affiliated with Toucan in any way. This case study is purely for my own learning — I do not mean to offend anyone and can only hope someone out there finds it be to useful.
Toucan & Onboarding
Toucan is a quickly growing language learning product that has garnered over 40,000 users since its launch. It offers a different approach from conventional language learning apps like Duolingo and Babbel. Toucan offers a powerful browser extention to help you learn a language “without even trying,” by translating words on pages you visit while doing your thing on the internet.
Switching to an unfamiliar mode of learning like this requires considerable handholding to help users sign up and learn how to use the product. The onboarding flow is therefore a crucial part of the product journey — and getting it right can lead to many benefits including a higher CLTV and supercharged growth.
This case study is an in-depth analysis of Toucan’s onboarding flow, highlighting 4 key ways in which it works well (Social proof; Cognitive load; Visual hierarchy; Aesthetic-Usability effect) as well as 4 key ways in which it could be improved (Tesler’s law; Framing; Jakob’s law; Peak-End rule).
Case Study
I spent ~16 hours putting together this case study in which I walk through every step of the onboarding journey through the lens of a new user, addressing friction points and offering sample redesigns along the way.
On a laptop: click on the arrows on the screen or on your keyboard to navigate the case study (+ view it in full screen for the best experience)
On a phone: tap on the slides (recommended) or swipe left/right to navigate the case study.
UX Learnings
What Works:
- Social proof: Highlighting what actions others have taken because new users tend to adapt their behaviour based on what others have done.
→ Mentioning the “40,000 geniuses” and including user testimonials is a great way to encourage new users to follow suit and join the flock.
2. Minimising cognitive load: Reducing the total amount of mental effort that is required to complete a task.
→ The how-to gifs and user tutorial are a great way to reduce cognitive load by handholding users and helping them understand how to navigate the product.
3. Visual hierarchy: Arranging elements to show their order of importance.
→ The home page does it right with a bold, compelling title, a subtitle with great microcopy, and a visually distinct and clear CTA.
4. Aesthetic-Usability effect: Having visually pleasing design creates a positive response in the brain and makes people think it works better.
→ Toucan’s overall design is clean and fun (and reminiscent of one’s childhood, evoking a learning mindset)
How it can be improved:
- Tesler’s Law: Using design to guide people through a process as much as possible to ease complexity.
→ Ease the safari (or other browser) to chrome transition by offering some guidance to people who may not be on the correct browser. Here’s a sample pop up design that would alert people that they should be on Chrome before beginning the onboarding process.
2. Framing: Presenting information in a certain way to impact how users make decisions.
→ Change the copy to emphasise a feeling of safety and security for the users (rather than reminding them you need yet another permission).
The sample redesign below recognises that people do not like sharing their data, so the copy is intended specifically to combat any worries around that and to emphasise the fact that the data is safe. Adding a bit of social proof could also help give users confidence that a ton of people already trust Toucan with handling their data.
3. Jakob’s law: Taking advantage of people’s familiarity with how other websites work, so that they can more easily understand how yours works.
→ Switch up the landing page to be more intuitive and give users more guidance. The current landing page after signing up has a tutorial, subscription upselling, and then redirection to the Tripadvisor site. Instead, make it a more typical “home” page that offers users more guidance and tips.
This sample redesign of the home landing page offers users the ability to take the tutorial and then gives them starting points to start browsing the web ( *a few* vetted, sample articles that are on websites with good UX — to ensure that their first Toucan experience is the best possible one). I chose to stay away from Tripadvisor because A. The Toucan translations were not front & centre and B. There were many external distractions like ads, pop ups, and several hyperlinks. Wikipedia could be a good web link to add since the fun Toucan game lives there (that may not be found otherwise).
4. Peak-End rule: Designing around the intense moments and final moments of an experience because they heavily determine how users feel about the overall experience.
→ Give users a few more chances to play games before pushing them to upgrade to premium. Personally, the peak of the onboarding experience was unlocking and playing the game. That was an “aha moment” — when I recognised the true value of the product. However, the high did not last very long because the game was taken behind a paywall after just one turn. Ending on an “upgrade to premium” note, right after getting access to the product, did not feel right. How about unlocking another round of a game if the user sends a Toucan invite to a few friends? Or if they agree to fill out a short survey about the product? A small ask in order to continue playing the game could go a long way, instead of having users drop off at the subscription step. Here’s a sample redesign:
If you’re interested in :
- learning a language in a new, fun way, you should check out Toucan here (on chrome!)
- understanding the laws of UX, check out this collection by Jon Yablonski.
- cognitive biases and principles that impact UX, check out this collection by Growth.Design.
- seeing examples of standout onboarding experiences, ReallyGoodUX has a collection here.
Credits to growth.design and builtformars for inspiring this UX case study.
