Creating the Bubble Editor Environment and Design System

Bubble is the most powerful way to build web apps without writing code.

Bubble enables anyone to design, develop, and launch powerful web apps without writing code. The no-code space is growing rapidly, but Bubble is the only editor that is capable of building a custom marketplace (like AirBnB), a social network (like Twitter), or a food delivery app (like DoorDash).

The Maison design system let Bubble achieve rapid customer growth.

We established a cross-functional product team to completely redesign the Bubble editor experience. I led this team, while also ingesting customer feedback, parallelizing ongoing work, and shaping product releases on the Bubble platform. We created a robust design system, dubbed “Maison”, to unify and govern these the Bubble editor interfaces under an adaptive and future-friendly component framework.

Maison brings the Bubble editor into the cohort of modern design tools. Its improvements made Bubble accessible to a broader audience and provided far greater utility for Bubble users.

Bubble logo

Bubble Group, Inc.

Connected health technology
No-code building tool
$100M Series A

bubble.io

TechCrunch

🕰️ It’s early 2019.
Using Bubble is a daunting task.

Being bootstrapped over the course of several years had left the Bubble editor with a cumulative, inconsistent approach to UI, and heavy design debt. Bubble had a very high learning curve, little consistency, “hidden” features, and unpredictable behaviors. Most users have to rely on a combination of Googling and soliciting help from forum posts when they’re stuck.

The Bubble interface prior to design efforts, while capable of building complex products itself, didn't possess the ease of use or reliability needed can sustain adoption.

“Yeah, it’s a pain, but it’s still way faster than learning to code”.

In spite of its UX issues, Bubble had accumulated over 500,000 registered users. Bubble was enabling entrepreneurs to launch tech businesses successfully without raising capital, and without needing to hire a full-stack engineer or become one themselves. These users were highly engaged and vocal about their frustrations and desires for the platform.

Piershare

An AirBnB-style rental platform for private dock spaces and mooring buoys. Generates over $1M ARR.

Bubble’s users were so involved they were actually contributing to Bubble’s core. The plugin API allowed users to build powerful plugins and share them with others, and sometimes they’d even build features we had on our own roadmap.

The New Bubble Editor

The Bubble editor consists of 7 tabs. The first 3 tabs are where the web app gets built: Design, the canvas where page content is laid out; Workflows, where behavior and logic are added; and Data, where user inputs and content are stored. Bubble replaces a combination of other tools needed building and hosting digital products.

Workflow
Workflow
Workflow
Workflow
Data Types
Data Types
Styles
Styles

Maison is a headless design system.

The Maison framework is content-agnostic and future friendly; the design and build instructions are completely separated from the contents of the user interface. It allows the Bubble team to deploy product faster, leveraging the layout and UI classification rules to display highly variable content. It supports product squads who need to iterate and deploy new product functions without requiring bespoke design resources every time.

Light and dark modes were integrated from the beginning, which required a higher-order abstraction of element styles in the codebase and allowed for users to switch between the two without reloading.

Maison shines in the Property Editor, the panel that contains the majority of Bubble UI.

Menus
Menus

We established a user research practice within our customer expert team.

Bubble was a 30-person team, so we didn’t have a lot of capacity for dedicated user research. I evangelized our Success team members into UX researchers to create a rapid customer feedback loop.

We broke new feature work and improvements down into regular, granular releases.

We kept our users involved as we were drafting concepts for the new editor, so we were confident in the redesign approach, but we couldn’t freeze bug fixes or customer support, either. We used Shaping to characterize project work and mitigate timeline risks. This way, we were able to divide & conquer on the new componentry, shipping new product sections granulary and looping in customers that we’d worked with to develop them.

We couldn’t delay major feature rollouts that were inflight, so many feature interfaces were parallelized by adapting newly created UX patterns from the larger product overhaul into the existing UI.

This hybrid approach allowed important features to be released using existing UI components when possible to avoid damming improvements behing a larger, riskier release. More granular releases allow provided a better signal on how those releases impacted important key performance indicators.

We built modernized and powerful responsive design tools.

A major hybrid release for Bubble was the new responsive design system. By mixing and matching three basic container types, Bubble can build modern layouts based on the flexbox system in CSS. Each container layout has its own set of controls, and elements within those containers will inherit their parent container’s properties.

Outcomes

The Maison design system enabled developers to ship features with consistent UI, without intervention from the design team. It broadens access to powerful tools for building web apps, while elevating the user experience of Bubble to other best-in-class design tools like Figma and Webflow.

The impact of Maison is measurable. These numbers represent the change from before the redesign and 30 days after the last set of components was shipped to the beta environment.

49More net paying customers

Indicating far greater utility for new Bubble users and “stickiness” (New customers are continuing to use Bubble for longer).

7.9More users who complete the optional tutorial

Indicating more users are onboarding and converting successfully.

11Fewer Hubscout conversations

Indicating more users were able to build on Bubble without intervention or getting stuck.

4.5More workflows in apps

Indicating more users were able to build complex, powerful applications.