Basis Lab
Chrome extension design system for Bubble—1,500+ users, 40% paid conversion. Unstyled-first architecture solved compatibility for existing apps.
Overview
The gap: Bubble.io is a no-code platform for building web apps—powerful for logic, weak for design. Most Bubble apps ship with default styling that looks unpolished. Existing design systems were template-locked: you had to start from their template or get nothing. Builders with existing apps had no way to improve their UI without rebuilding from scratch.
What I built: Chrome extension with a drop-in component library. Works with any existing Bubble app. Designed, developed, marketed, supported—full 0→1.
Users: Bubble builders, not designers. Need better UI without starting over.
Results: 1,500+ users, 40% paid conversion.
Component Library
Drop-in component library with pre-built layouts, data patterns, and UI elements.
Unstyled-First Architecture
Problem: V1 pre-styled templates broke on existing apps. Forced rebuilds.
Solution: Unstyled by default (inherits host styles). Styled optional. Works everywhere.
Layered Information Architecture
Problem: V1 organized by popularity. Non-designers didn't know where to start.
Solution: Organized by how screens are built—Shells → Templates → Containers → Elements. Fully configured at top, atomic at bottom.
Insight: Users wanted more configured components. Easier to remove than build.
Basis Elements
Interface Details
Figma Design System
Sibling Figma system for builders to design in Figma first—components are 1:1 with the Basis extension component library.
Key Outcomes
- Unstyled-first removed adoption barriers
- Support questions shifted from "make it pretty" to "how do I compose screens"
- 1,500+ users, 40% conversion validated the approach
- Users needed structure, not opinions
