Creating the Bubble Editor Environment and Design System
Matt Legrand
Head of Design,
Bubble
2019—2020
Bubble is the world’s only full-stack, no-code platform.
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 Group, Inc.
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.
The product experience is essentially a "working wireframe" — A ton of capabilities, if you know where to find them. 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.
Bubble needed an overhaul in grow an audience beyond its early adopters.
It was imperative we address the Bubble editor’s UX issues to ensure that marketing and growth efforts were effective further down the funnel, and new users could successfully build a product without getting stuck. By working with entrepreneurs who rely on Bubble to run their products (and by using Bubble ourselves), we settled on our top priorities for the overhaul:
- Create consistent UI appearance and behaviors
Resolve headaches with the existing workflow and establish a groundwork for building new features efficiently - Adopt common precedents established by best-in-class design software
Make the Bubble editor experientially competitive with other browser-based canvas tools and familiar to builders coming from those tools - Deliver proper support for responsive design
This was especially rough as it was based on an outdated JavaScript layout engine.
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.
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.
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.
🦠 Navigating a Black Swan event
COVID-19 caused many venture-backed organizations to make sweeping strategy changes with limited information. Bubble elected to pivot resources from product in order to concentrate on account growth and customer acquisition. Bubble reduced product personnel and didn’t backfill product design leadership until 2023. This caused most of the visual improvements to the Bubble Editor to differ significantly by the time they were released to all users.
Fortunately, the design system was constructed with broad compatibility for changes to visual UI, allowing product features to launch regularly even while the overhaul was underway.
Responsive Design, Version Control, and an improved workflow editor are all product features that are available to Bubble users today.
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.
Indicating far greater utility for new Bubble users and “stickiness” (New customers are continuing to use Bubble for longer).
Indicating more users are onboarding and converting successfully.
Indicating more users were able to build on Bubble without intervention or getting stuck.
Indicating more users were able to build complex, powerful applications.