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

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.

What is the user problem?

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.

What does success look like?

0-1 and 0-7 day retention should both improve if we're successful in our efforts in addition to increase in the days building per month, and conversion within 4 months.

Bubble Docs

This includes all documentation related to Bubble, accessible through here: https://manual.bubble.io/

The content is not tailored to the user, and the length is intimidating for new users.

With technical and Bubble-specific terminology, users have difficulty finding relevant information.

Valuable for users who learn by reading, especially those with experience reviewing online documentation.

Video Tutorials

Short and long-form videos that guide you through building your no-code web app on Bubble.

One-way interactions result in an inability to address user errors, and help resolve errors quickly.

Cannot be updated as quickly as the Bubble editor or docs can be (videos need to be recreated as Bubble’s design changes).

Valuable for users who learn by doing, and provides in-depth explanations of software design decisions.

Interactive Learn Lessons

Point-and-click learning through in-app tutorials to help you learn the basics of Bubble, right in the editor, accessible through here: https://bubble.io/lessons

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.

An in-editor tutorial that teaches users to develop a specific feature such as a sign-up flow, in addition to providing resources to develop these through a guided path. We focussed on: ease of understanding technical solutions, efficiency of software design, and speed of building.

Check out the prototype on Figma and navigate through the flow to understand my visual as well as interaction design decisions.

1. Point and click learning through an in-app tutorial

2. Users ‘learn by doing’ in their own apps

3. Users can customize their app during the tutorial (fonts, colours, labels etc)

Learning about the design trifecta 🦄

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.

What did we learn from competitive research?

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 for completion, maintain a high level of interactivity through tutorial structure, length, and content.

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.

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

Some considerations we made:
1. Leverage research conducted internally in addition to publically available literature research.
2. Do we already have this content in the form of a video (Is it Bubble owned or another source?)
- If so, what is the benefit of duplicate content?
3. Do we have this content in a blog post?
4. Do we have this content in a Learn lesson already?
5. How many users do we expect to use this? Which type of users does this benefit (founders, hobbyists etc)

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!

Stop! Don't move into Figma just yet.

How this might look is influenced by the content and steps a user must take. To determine the steps a user must take, I recorded my screen as I built a basic sign-up and login flow in Bubble.io. After this first build, I shared my process with Bubble's User Education team to define best practices for my build before even touching Figma (but Figjam was my loyal best friend as shown in the flow chart attached).

What's the saying ... 7th time's the charm?

In-editor tutorials are highly interactive, so we leveraged Figma's prototyping tools to mimic these interactions.
Check out the prototype we handed off to developers on Figma and navigate through the flow to understand my interaction design decisions.

Additionally, I organized critiques with my PM, design mentor, and kept the PMM/User Education teams involved throughout the project. Receiving feedback from parties with different interests helped shape my decision-making skills, and taught me how to advocate for my designs.

Designing action-driven tool-tips to 'show & tell'

In a product tour, users are typically shown tool-tips (sometimes referred to as hoverables) to explain what they're looking at and how to interact with the product. Before landing on the design for this UI element, we riffed on what information we wanted to show users in our 300x200px rectangle.

Version 1: % age based progress bar and clear tasks

A progress indicator promotes transparency to the user and gives them an idea of what to expect for a time commitment.

The top header ("Connect Header to Sign-Up Component") orients users so they know what they’re building and have an anchor through the tutorial.

Information overload within the component, is visually displeasing and the user does not know what information is important.

Version 2: Progress bar and labelled tasks

This new progress bar design is meant to mimic a pattern in product, but the visual design is unclean.

While the label and filling the checkbox promotes transparency, the progress bar provides limited value for shorter tutorials.

An X on each hoverable makes it easy for users to exit the tutorial, prompting future considerations for re-entry.

Final: Clear CTA, action on label, and descriptive text explains outcome

Reduces screen clutter and focus information is clear - simple yet functional design.

Don't blink or you'll miss the hotspot.

In addition to the hoverable UI element as a visual indicator, we wanted to show users where to click on the screen using a hotspot.

Version 1 explores a common pattern in product walkthroughs as a pulsing dot and while this pattern works effectively when the remainder of the screen is grayed out, the dot struggles to grab the user's attention due to it's size.

Version 2 employs a "Scroll down" button. While this works in content-driven applications (ex. social media), this pattern would only work within one part of the tutorial (selecting the component) and would require additional engineering effort.

Instead of solving the core JTBD of teaching users where to click and why, I found myself anchoring on existing design patterns. So, we went back to the drawing board and designed a simple hotspot: a blinking coloured block surrounding the element that we want users to click on (revolutionary I know!)

Write everything down (I mean everything)

Working in 4 month stints means you have to be prepared to hand-off all working materials and make sure other designers (as well as cross-functional partners like engineers and PMs) know where to find what information. Additionally, I made sure that each design decision was documented in a Figma file - if they feel so inclined, they can access the messy mocks I drew by hand, sift through the many prototypes, and understand why a screen looks/feels the way it does.

Content design 🤝 product design

Leading content design and product design helped me understand how closely intertwined the two disciplines are - clear writing means little to a user without intuitive visual/interaction patterns (and vice versa).

Discovered a new passion for building creator tools

I've always loved creating (whether that be through writing, art, etc) and is exactly how I fell into design. I want to continue to make creating more accessible to people and take them from idea to conception faster than they could even think of. If you're building any sort of creative tool and could use some design help, please reach out :)