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

Estimated 10 min read
Estimated 10 min read

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.

  1. Be concise, but not robotic

  2. Write for all reading levels and maintain consistency across resources (videos, docs, Guided Builds)

  3. Address users directly and clearly, generally in second person (you/your)

  4. Writing in active voice

  5. Reveal information contextually, and as needed

  6. 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.

  1. Users build a signup flow in the Bubble editor.

  2. Navigate through the tutorial (in Figma prototype).

  3. 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.

Thanks for coming by!

Thanks for coming by!