Mini case study: Bubble Academy's no-code Responsive Game
Bubble.io is a no-code platform for building apps. Recently they introduced a new engine that lets you design responsive pages that adjust based on device dimensions.
In order to introduce the idea to users and get them acquainted with the way it works, they built a game – which is a Bubble template that has some built-in challenges and puzzles you solve by using the editor.
Bubble
What is it like?
The template is laid out top to bottom with different challenges that need to be solved using the property editors for different elements.
For example, you need to set the row alignment to "right" to move the red-tailed hawk to the window.
There is no "win condition" or chime or animation or other notification you finished a challenge – visually you know you have it right when it is aligned correctly. You can click the checkmark and view its in-editor notes to see the solution or click the question mark to view a hint.
In other words, it relies on intrinsic motivation to keep going – giving you that little hit of dopamine when you get it right and want to do it again.
Do people use it?
At the time of writing, the template had nearly 1000 installs over the course of 8 months. At first, I thought this was low but you always need to follow that up with – in comparison to what? I checked out some of the other templates:
- Build Your First App: 622 (3 months)
- Intros to API Design: 374 (7 months)
- Learn Product Hunt – Blank: 381 (11 months)
These other templates are part of courses the Bubble Academy has put together. The Build Your First App is part of the introductory tutorial course and is on track to keep pace with the game. The game template ended up driving nearly 2X-3X more interest than the other secondary course templates.
To have a real sense of comparison, there would need to be other focused learning templates like this – since the other Academy templates are part of full courses.
Of course, this is nothing compared to the batteries-included Canvas base template which is the most popular at over 33,000+ installs. But that is apples-to-oranges – the purpose of the Academy templates is to help new users learn Bubble, not to build a full app. The Responsive Game ends up being the most used template when you exclude the base templates. Not too shabby.
What do the learners think?
Luckily each template has a review section – so how did the Bubble Academy team do from a learner POV?
Let's ignore some of the support issues – always a hard thing to handle in review systems. Besides those, a very solid 4.75 stars.
Here are a few choice quotes from that screenshot:
"I learned how the responsive engine works while having a good time. Cheers"
"The tutorial is simple but teaches you fundamentals. I enjoyed doing it and it gave me basic skills."
"Overall fun and interactive way..."
Learners enjoy it! And they learned new skills.
Summary
Even though Bubble is targeted to B2C, the fundamentals of why this worked so well are applicable to developer education:
- Learning is more effective in-context – Bubble users learn in the app itself through its features vs outside it, leading to more effective learning.
- Progress is intrinsically motivating – designing puzzles and challenges for Bubble users kept them motivated and engaged enough to leave glowing reviews, just as developers love to solve programming problems and real-world challenges. Notably, Bubble isn't using progress tracking, notifications, or anything else – simply seeing the visual result of it working is enough to be motivating and to continue on.
- Interaction is play learning – Bubble users "play" in the no-code editor to learn just as developers "play" with code in a sandbox to learn how it works.
Packaging what could have been a passive video or article tutorial into a game-based learning experience with puzzles that made users leverage the actual app features was a clear winner for Bubble Academy. Nice job!
Have a lovely day,
Kamran
