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

The Wix Arena


The Wix Arena is a marketplace for Wix Design Experts - freelance web designers - who use Wix as their main site building tool.



A new ratings & reviews system
2017
I worked on a new ratings and reviews system for the Arena to allow clients to project on their experiences. This feature enables a ranking system within the Arena as well.





A new client brief proposal
2017
After user research, we found that the way in which clients search and find Wix experts is long and and complicated and therefore many of them abandon the process and prefer to look elsewhere for help in finding web design professionals. I proposed a concept which has worked on many other Wix products where the form is split up into flows of wheter you’d like to create a new website or fix your existing one. 







The Expert’s Portfolio Page
2017

A slick way to display a Wix Expert’s portfolio when they have many works to showcase. Most of the information shortens when you scroll.



Product Design

Wix File Share

Work In Progress

Wix File Share is an application for Wix site owners with the goal of being the best tool for sharing files between site owners, members and groups. Users can create a file library so that their community members can easily share files with one another. 




Redesign of File Share App
I came in to redesign the Wix File Share app in order to consolidate it with the Stage Design System and to improve usability, expecially on mobile.




Old Design
Old design made it more difficult to make actions on multiple files, to navigate between folders, and to identify between a file and a folder.

        
User’s utilization of the File Share App
Besides the general usability issues that our own team found to be problematic, we saw how our users customized and interacted with the product. The next step was speaking to these same users.








Feedback From Users
Our Team set up a process of talking with users based off of BI of site owners who installed the File Share App and from those who left app reviews. After each session we collected data based off the conversation like their needs, their frustrations, their level of skill at web design, and whether they had integrated the app with other apps in Wix.


Immediate improvements
Issues like sort & search, selecting files, and navigating between folders were improved with the new Design System UI.



Future improvements

Based off of user talks, users had the hardest time sortying through files, asked for the option to add images to their files, as well as description. The biggest feature request is the ability to have restricted folders for certain site owners



Temporary Solution with Wix Code
We gave our advanced users a quick solution with Wix Code API







Mobile Design Prototypes
For mobile, we tested our certain behaviors like file selections and actions and folder creations using a prototype to achieve the best design.


Wix Polls


Full flow & design for a feature within the Wix Blog app- the ability for Wix users to to add, edit, and eventually have users vote in a poll on their website.



Creating and editings Polls for Blog Posts
2018

One of the most requested features by Wix users was a poll post within a blog where they can ask their fellow blog readers certain questions.

The first part of the flow and design is the creation and editing part of the poll:


  A user can add a photo to their poll question or answer




Images are automatically cropped. Once one image is added to one of the poll answers, it is suggested that all answers have an image attached with an “image upload” placeholder. Users can change the order of the answer choices.



The settings panel gives the user certain options about voter audience, obligatory verses optional answer choices, and timeline of the post.





 
Users of Wix users- voting in the Poll
2018

When a poll is published in a blog post, users of Wix users can vote in the polls, add an option to the poll if the website editor allowed it, and see the results.




After a user of the site voted for the pooll, users can see the results and the “site members” who voted for it.




For poll results on mobile, more information is displayed on expand.






Web Design Projects


As part of the Wix Pages team at Wix.com, I designed various websites for users and as well as for marketing purposes. I also created a website for a conceptual food product with Any.




Work Event Template
2017

A template made for Wix.com for a company event that also includes the “Wix Events” app and it’s customization abilities.






Premium Plans Page
2017



A one pager that gives information to non-users about the various paid features of Wix.com




Private Tutor Template
2019



A simple template designed and illustrated for Wix.com for a private tutor.






Wix Code Examples
2019




A database for cool examples web interactions completed with Wix Code. I designed and coded the site, form, search functionality, and more.





Wellness On Tap
2016



Website, product, and conceptual design for yogurt in the workplace. Made in collaboration with Studio Any.