Product Design, UI

Stage Design System

Work In Progress

Wix’s Stage Design System is a design system for all of Wix’s vertical apps such as Wix Stores, Wix Bookings, Blog, Forum, and more. Within the team, I research and design the components (based on atomic design methodology) that fall on stage when users add these apps to create their website. These apps are eventually themed to the user’s website design but the system creates consistency in functionality and behavior. Here’s the work process and some of the results for building the system:



Mapping & Indexing existing UI Components
There are over 50 repeating components in over 14 On-Stage apps at Wix, so the first step was indexing and mapping out these components.



Research
For every UI components, there’s a research deck containing different visual and functional refrences and reading materials



Grid, Layout, & Style Instructions
The team created a style guide based on a 4px grid with recommendations for text sizes



        

A sketch library for the product designers
The current result is a sketch library with documentation for the product designers working on the On-Stage apps. In the future, there will be a storybook with code snippets and animations.







Quick Prototypes 
Before we release any component to the library, we make quick protoypes on actual Wix templates to see how our decisions will affect the web design.








Template Wiring
Finally, we have to test our components within the templates and make sure the sizes of fonts and colors are wired accordingly.