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