Enabling creation from Day 0 through designing Bubble’s first ever in-editor tutorial
Estimated 10 min read
Defining the problem
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 🎉.
Collaborating across organizations
Who was on the team?
This project was uniquely positioned, impacting multiple teams across the organization.
Design & Research
Collaborated with Senior Product Designers in design critique and user-testing.
Engineering
Ensured that designs adhere to design standards and are technically feasible.
Product Management
Partnered with 2 product managers - ensuring technical feasibility and alignment with organization values.
Product Marketing
Worked closely with PMM for content, and to ensure consistency with Bubble’s existing content (videos, blogs etc).
User Education
Understood best practices for user education, and consistency with Bubble’s existing learning tools.
What is Bubble?
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.
Design
Where users can design how their app looks and feels
Workflows
Creating connections between the front-end and the back-end.
Data
Design data structures and store data.
"When users land on the Bubble editor, they’re faced with a blank canvas and don’t know what to do next."
Initial Research
Bubble Docs
What are Bubble Docs?
The Bubble Manual has everything you need to know to build apps using Bubble. This documentation covers everything from basic concepts to advanced features and includes step-by-step tutorials, troubleshooting tips, and insights into best practices.
With technical terminology, users have difficulty finding information
The content is not tailored to the user
Users are forced to navigate away from the editor
Valuable for users who learn by reading
Bubble Documentation
Video Tutorials
What are Bubble’s video tutorials?
On Bubble’s YouTube channel and their website, Bubble releases video tutorials with content ranging from how to build a particular feature, or showing users how to create a complete web app.
Cannot be updated as quickly as the Bubble editor
One-way interactions result in an inability to address user errors
Valuable for users who learn by doing with in-depth explanations
Various Bubble YouTube videos
Interactive Learn Lessons
What are Bubbble’s Interactive Learn Lessons?
Bubble’s Interactive Learn Lessons are interactive tutorials within the Bubble editor. However, the efforts of these tutorials are made in tester apps - users are not able to import the features of these tutorials into their own app.
An interactive two-way learning model supports error mitigation, and guides users in their early learning journey.
Requires a visual and interaction design revamp.
Builds in these Interactive Learn Lessons are not saved.
Interactive Learn Lessons on Bubble
Competitive Analysis
Outside-in research
After understanding what Bubble was already doing for research, I began by exploring how other creator tools and education tools were approaching user education.
Comparing creator tooling & user education websites
Figma
Learned that Figma does not have a tutorial/onboarding in a fresh file while FigJam does.
Webflow
Portions of the screen not relevant to the tutorial are blocked out.
Khan Academy
Provide positive reinforcement consistently (but sparingly)
Initial Ideation
Establishing content design principles
Generation of principles
We referred to publicly available content design systems from organizations like Meta and Intuit, competitors, and literature research to define these guiding principles.
Be concise, but not robotic
Write for all reading levels and maintain consistency across resources (videos, docs, Guided Builds)
Address users directly and clearly, generally in second person (you/your)
Writing in active voice
Reveal information contextually, and as needed
Begin with objectives, always start sentences with a user’s goal
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.
Existing content
Do we already have this content in a video, blog, or interactive Learn lesson? (Is it Bubble owned or another source?)
User behaviour
What is currently a user’s first step when they land in the product? What types of apps are people already creating with Bubble (and where do they struggle)?
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
High Level Interactions
Customization
Allow users to progress the tutorial and continue to customize their designs (change the font, colours etc) - we want users to have the freedom of choice.
Length
Tutorials should be short enough that users can complete them in <10 minutes.
Automation
Automate repetitive tasks for users, guiding users to completion faster.
Error Mitigation
How should users be made aware of errors (and resolve these)?
In any tutorials, especially those as complicated as learning a new tool, we need to consider how we'll bring the user back to the happy path even after making a mistake.
Option 1: Do It For Me Button
Triggered based on lack of mouse movement and automatically progress users towards the next step.
Option 2: Tailored Error Messaging
Messaging that is tailored to the user based on the step they're in - clearly indicates how to resolve in the description.
Option 3: Undo Upon Mistake
If users make a mistake that is not along the happy path, prompt users to undo then continue - this shipped! It was the least technical effort that fulfilled our JTBD.
User Research
Recruiting
Social media recruiting
In an era where users are pulled from existing focus groups or Usertesting.com, we sought out a method of recruiting users via Twitter. This functions as a method of discoverability for Bubble, and helps recruit users from a wider set of audiences.
Testing plan
Build, tutorial, build again
I worked with Bubble's user experience researcher to develop a test plan to understand the learnability and ease of use of this tutorial.
Users build a signup flow in the Bubble editor.
Navigate through the tutorial (in Figma prototype).
Users build a signup flow in the Bubble editor, comparing learnings before and after the tutorial.
Research findings
Teaching methods
Users value repetition of tasks for learning and users want to freely explore instead of always focussing on the task at hand.
Expression composition
Users can compose expressions within Bubble relying on images but have trouble understanding what they're doing.
Learnings
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.
Challenge design systems (and improve upon them)
Explore visuals
At the time, when designing for Bubble, we were working off of screenshots and legacy designs. I felt confined to existing components, colours, and fonts - and the designs weren't as polished as I would have liked. If I had more time, I'd also create versions of the design that push the limits of the existing design system and consider how important aesthetics are for usability.
