Component System | Robbie Sims Product Designer

Component System

Led the design of a GUI for customizing responsive website components and defined a scalable contribution framework to accelerate consistency and adoption across three platforms - a process that required cross company and cross discipline collaboration.

Design Lead

2 UX Designers

1 Web Designer

6 Engineers

Team

The Wix component system is a library of customizable React components that users compose into websites. Beyond serving as standalone building blocks, they form the foundation for vertical solutions with built-in logic and CMS integration — ecommerce, restaurants, bookings, and more.

2020 - 2023

Timeline

Walkthrough

100+

react components

2

design systems

3

platforms

Impact

Wix components are the atoms used to build websites which make up ~ 4.2% of all websites on the internet

Collaboration

Establishing Scalable Contribution

Guidelines

In 2020, Wix set its sights on the developer and design communities — a push that surfaced the need to align component experience with component technology. Partnering with engineers, I authored an experience guideline and checklist that made component contribution fast, consistent, and scalable.

Standardized responsive behaviors
Exposed CSS prop customization through a single, consistent framework and API
Aligned component HTML DOM structure
Established shared product patterns
Defined a cross-platform contribution strategy

Market Research

Created a process to research market needs with qualitative and quantitative data. Each component required the same process for research.

Gather inspiration sites
Analyze capabilities - layout, design, data, a11y
Tally results and assign a % per feature
Incorporate features appearing in ~30%
Consult the template designers and verticals

Once this data is collected, the scope has materialized and product conceptualization begins.

Engineering

Components ship on time when design and engineering work as one team — particularly around data display, performance, and responsive behavior.

Define the DOM structure
Create preset, common layouts
Define requirements for CSS prop customization
Define responsive behavior — in the builder, on the live site, and on mobile
Define which system features and effects the component can support — rotate, animate, flip, and so on

Design System, Illustration & Annimation

Once the product is defined, engineering starts building while the UI controls are designed in parallel. A standard component has three customization settings:

Data display — the content itself: text, alt text, media
Layout controls — composition and responsive behavior
Design tailoring — adjusting props or inheriting the site theme to match branding

Where panels call for illustration or animation, thumbnails are produced with the relevant teams. Finally, each customization panel is mapped to the correct design system component for its platform.

Studio & Content

Getting a component in front of users depends on close collaboration with the template studio and content writers. With such a wide range of user types, both beginners and power users need to be able to find the component and put it to work. A few strategies:

Design add-panel presets around interactive patterns users already recognize from the web — nothing too bespoke
Mine search query data to settle on the right terminology and naming
Run A/B tests, or surface the component in multiple add-panel locations
Use the component in a conventional way when it appears in templates

Analytics & Performance

At Wix, we instrumented every design system component with default events for each interaction. Guided by product needs, we tracked how features and configuration controls actually performed.

That data lets us refine the configuration over time — moving the most-used options above the fold in panels, improving preset designs, sharpening terminology. In addition, heat maps analyze performance of assets in the add panel.

Another useful statistic comes from partnering with support on documentation, how-to articles and gaining data on customer service volume for the new component.

Demo

Product Walkthrough