Enabling creation from Day 0 through designing Bubble’s first ever in-editor tutorial
How did I add value?
I was designer #4 at Bubble and their first ever intern. I was able to not only shape their design internship program, but was the lead designer working on building a framework for our in-editor tutorials that we shipped in April 2023 🎉.
Background
Who was on the team?
I was the lead designer on this project, leaning on my design mentor (shoutout to Christine!) and other designers on the team for feedback.
I collaborated with the User Education team to understand how we teach users the Bubble language, PMM for content design support, and my PM to prioritize and understand user specifications.
Let's start by bursting any misconceptions about Bubble.
Bubble is a platform for creating digital products without code. With a drag-and-drop UI, Bubblers can build customer-facing web apps and internal tooling in just a few hours instead of months. Users can prototype for free and upgrade when they're ready to go live.
When users land on the Bubble editor, they’re faced with a blank canvas. They’re left in this state of paralysis where they don’t know what to do next.
How are we currently approaching user education?
Who are our users?
Founders
Take idea to conception in weeks instead of months - GTM faster, and empower the non-technical founder.
Developers
Build entire applications in Bubble as a no-code developer with Bubble’s Agency Plan, and sell templates or your services in Bubble’s marketplace.
Enterprise
Empower non-technical teams, and teams can iterate and implement changes to code quickly, in addition to integrating with existing plugins and APIs.
How are others exploring user education?
Outside-in Research
I began by conducting outside-in research, taking a look at other creator tools such as Figma, Framer, and Webflow in addition to education technology such as Khan Academy.
Figma does not have a tutorial/onboarding in a fresh file while FigJam does - and in Figma, users usually come in with a specific vision in mind and often require less guidance.
In Webflow, portions of the screen not relevant to the tutorial become inaccessible. The content also explains the importance of dragging a container to the page for layout, outside of the context of a particular use-case.
Khan Academy provides positive reinforcement consistently at each step.
Putting all of that together, what did we learn?
Users skim content, keep content concise and required actions at the top
Provide positive feedback to create a self reinforcing feedback loop and give users confidence when learning
Leverage content and visual cues to guide the user (content design 🤝 product design)
Users tend to skip through tutorials or videos for completion, maintain a high level of interactivity through tutorial structure, length, and content.
Establishing content design principles
Generating design principles
We referred to publicly available content design systems from organizations like Meta and Intuit, competitors, and literature research to define these guiding principles.
Ideation
What should we teach users?
Deciding what to teach users is as important as how for a tutorial. This was the first in-editor tutorial and functioned as a pilot project (if users respond well to to this tutorial, we can make a case for building more in-editor tutorials). I started by leveraging research conducted internally in addition to publically available literature research.
We settled on teaching users how to build a sign-up and login flow, an integral part of almost every web app Bubble users were already creating!
Design decisions
How do we want to show users where to click?
We also explored various options to show users where we’d like them to click during the tutorial - whether that be to pull in components from the component library, editing text, or even adding workflows on the backend.
Some considerations as I designed:
Most products use hotspots that flicker showing users where to click; would that work for Bubble?
How do we balance ‘show-and-tell?’
We also explored various options to show users where we’d like them to click during the tutorial - whether that be to pull in components from the component library, editing text, or even adding workflows on the backend.
We chose to leverage a hoverable component, and a pulsing border and fill with reduced opacity around an element - combining motion and visuals to guide a user (we love microinteractinos around here.)
What would the high-level interaction patterns feel like?
Creating is about aimless explorations
I decided to allow users to progress through the tutorial and continue to customize their designs (change the font, colours etc) - we want users to have the freedom of choice.
Limit tutorial length to maintain focus, and recall
Tutorials should also be short enough that users can complete them in <10 minutes - this was done through automation of tasks, keeping content concise, and limiting the scope.
Automation of repetitive tasks
We automated repetitive tasks for users, guiding users to completion faster. While repetition can support learning, we needed to balance this so that users don't become bored from the repetition.
Learning about the design trifecta
Becoming a design unicorn 🦄
When designing at a startup, you become a design unicorn and often balance PD, CD, and UXR. For an in-editor tutorial, the content design and how we explain technical principles to non-technical users impacts the user experience so I took the initiative to define Bubble's first set of CD principles through working closely with our Education, and PMM teams.
Content Design 🤝 Product Design
When teaching users in an interactive tutorial or onboarding, especially when you have users with various levels of technical acumen - content design becomes highly important. We needed to define principles on how to teach users best practices in a lightweight manner.
What was the final solution?
Point and click learning through an interactive lesson
Whew, that was long. Feel like reading more?
Check out some of my other projects.
