Creating the Bubble Editor Environment and Design System
Matt Legrand
Head of Design,
Bubble
2019—2020
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 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. Most users have to rely on a combination of Googling and soliciting help from forum posts when they’re stuck.
The Bubble interface previous to redesign efforts. While capable of building complex products itself, it doesn't possess the appearance, behavior, or reliability of a performant web application.
“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’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.
Bubble needed an overhaul in order to serve 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 design software precedents.
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 edtior 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.
When there’s a need for a new component, the logic for how that component looks, behaves, and performs is already defined. This allowed us to overhaul bubble editor in a practical amount of time and standardize the user experience for new features as they’re built.
One aspect of separating the display logic from the UI was the layout system. Experiment with adding and removing elements in the agnostic, nested structure of this static demo of the property panel's skeleton to observe how the UI adapts.
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.
Version control, Maison design system UI
Version control, standard UI
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.
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.
