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. This is an example of a card component that looks and behaves differently in every product.



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 various on-stage apps.
        

A sketch library for the product designers
We also have online documentation for the designers and developers. There is also a storybook the process.





                                                              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.


                                    Implementation on File Share App
Part of my work has also been actual implementation of the library on products such as the Wix File Share App - on on-stage app that allows website users to share files. This is how it was designed before the Stage Design System.


                                    Implementation on File Share App
An example of a user’s website with the File Share App

Implementation on File Share App
Redesign of the file share app - cleaner layout, ease of use, and a bigger focus on social sharing. This is a work in progress