Basis Lab
Chrome extension design system for Bubble—1,500+ users, 40% paid conversion. Unstyled-first architecture solved compatibility for existing apps.
Overview
Chrome extension design system for Bubble (no-code platform). Drop-in component library that works with existing apps. Built 0→1: designed and developed end-to-end.
Role: Founder, Designer, Developer
Timeline: 2023-2025
Impact:
- 1,500+ users
- 40% paid conversion rate
- Unstyled-first architecture unlocked adoption for existing apps
- Layered IA matched user mental models
Component Library
Drop-in component library with pre-built layouts, data patterns, and UI elements.
Unstyled-First Architecture
The problem: V1 pre-styled templates looked broken on existing apps with their own styles. Templates forced rebuilds—blocked users who needed it most.
The solution: Style as a choice, not a requirement. Unstyled (default) inherits host styles. Styled (optional) design token set. Clear upgrade path.
Layered Information Architecture
The problem: V1 organized by popularity (Buttons, Inputs, Lists). Design-savvy users moved fast. Everyone else: "When do I use what?"
The solution: Organized by how screens are built—Shells → Page Templates → Containers → Data Lists → Elements. Matches user mental models. "Removing is easier than building."
Component Sheet
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
Adoption: Unstyled-first removed barriers—users could drop components in without breaking existing designs
Validation: Support questions shifted from "make it pretty" to "how do I compose screens"—right mental model
Growth: 1,500+ users with 40% conversion validated compatibility-first approach
Learning: Users needed structure, not opinions. Mental models matter more than technical accuracy. Built production-quality tool within platform constraints.
