Orbit: The Design System that Scaled Weebly to a $365 Million Acquisition
UI/UX & Frontend | 2015 — 2018
Project Summary
As a founding member of Weebly’s Design Engineering team, I built Orbit: a UI component library that improved and accelerated feature delivery across the platform as Weebly strategically targeted small & medium businesses and eCommerce during a period of rapid growth.
About Weebly
Weebly is a leading website-building platform empowering over 50 million users to create sites and online stores with ease. Known for its intuitive drag-and-drop builder, it expanded into eCommerce and small business tools before being acquired by Square in 2018 for $365 million.
The Challenge
Weebly’s product teams had always moved fast, but over time, growth created fragmentation. Each feature was built independently, resulting in duplicate code, mismatched designs, and rising maintenance costs.
As Weebly expanded into eCommerce and small-business tools, that inconsistency began to slow us down. Engineers were re-solving the same problems, and designers struggled to see their work realized accurately in production.
The problem: Building new features felt like starting from scratch every time.
How we know it’s a problem: Feature delivery had slowed significantly, and inconsistencies across products eroded design quality and user trust.
How we’d know we solved it: Engineers ship faster with reusable, consistent components and users experience a cohesive, polished product across the entire platform.
Weebly in 2016
Building for 3 Different Users
Working on the Design Engineering team meant that I was building for three different types of users, each with their own concerns:
Engineers wanted simple, consistent components with predictable props and clear documentation.
End Users needed interfaces that felt trustworthy, polished, and familiar.
Designers wanted an environment for creative problem solving, and a product that matched their vision.
Every component balanced developer efficiency with design quality and UX, ensuring all audiences benefited from every release.
Weebly "Carbon" teaser site I built in 2016
Identifying Components
Designers were building products and features, which they would showcase to us in weekly reviews. We helped them break these designs down into reusable chunks for the Orbit Design System.
When something didn't fit, we debated whether a new pattern was needed, or how it could be modified to match the current implementation. We also collaborated closely with them to get the motion and interactions just right.
Orbit Components
Research & Competitive Analysis
Once a component had been identified, a technical approach document (TAD) needed to be created. We studied emerging design systems (Material Design, Lightning, etc.) to establish best practices for naming, patterns, and accessibility. With few standards at the time, we defined our own conventions that balanced clarity with scalability.
Weebly Designers in a design meeting
Future-proofing
Components were developed to accommodate future variants, features and functions down the road, so that designers could solve creatively and engineers wouldn't get breaking changes.
For example, with button we debated whether we needed two props "variant" and "style" or just a single "variant". We realized two props resulted in more code for dev's and more button options than we really needed, so we opted for a single prop so each button could have a clear name.
Orbit design tokens
User Feedback
Connecting with engineers was critical, as they were ultimately tasked with the feature delivery we were enabling. We needed to understand any technical constraints or needs they might have that wouldn't be covered in a design review. Throughout development, we maintained open channels for bug reports, feature requests, and general feedback.
We also regularly reviewed user journeys in Fullstory, which could record a session of a Weebly user giving us valuable insights into how they used our product and where they got stuck.
Outcomes
The component library went on to enable the rapid development of the new Weebly and its focus on SMB. This attracted the attention of our partner Square who specializes in point of sale products and apps for small business. It was a perfect match, fusing online stores with in-person stores.
Adoption: Used by 50+ engineers and 15 designers across 8 product teams.
Velocity: Reduced feature development time by over 50% with ui components & patterns.
Consistency: Standardized design language across all web products and marketing efforts.
Strategic impact: Accelerated Weebly’s ability to deliver new SMB and eCommerce experiences, contributing to the success of the $365M acquisition by Square in 2018
Legacy: Many of Orbit’s patterns and components continue to inform Square’s broader design system work today.
Orbit proved that a design system isn’t just about components, it’s about enabling the delivery of quality products at scale. By aligning design and engineering around a shared foundation, Weebly moved faster, designed better, and delivered a consistent brand experience that scaled all the way to acquisition.
