Editor Interactions

New Interaction system for Wix Editor

About

Editor interactions is a new system which creates a new editing layer on container components. It provides the ability to create animations and effects triggered by actions like hover and click. This answered one of our top feature requests from  professional users as well as from our internal design teams.

Research & Feature Mapping 

I started my process with extensive research of various websites. I look for anything which can indicate to me how the interactions are handled on different websites, which gives valuable insight to what our users will expect to be able to create with our product. Secondary to the market research, I look into competitors, how and if they handle such product and present it to their users. The research is summarized into a list of features and capabilities we require as a "minimum viable product" to meet user expectations and requirements. 

Goals and Challenges

Interactions project started as an initiative to remake an existing product, the “Hover Box”. This old product was a dedicated box component with only one hover functionality, it was not performing well and was lacking some essential features we see on the market today. We set out on this project with this goal, to create a new interactions layer which can work on all container products and is able to render smooth animations with no negative impact on website performance. Our solution had to live up to the expectations our users, and they should be able to recreate up to 90% of interactions they see online today.

Responsibilities

  • Market Research (Design, Experience, and Features)

  • Handle the end to end UoU and On-Stage Customization flow

  • Product Features and Capabilities 

  • Defining on-stage Interactions and Customization Features

  • Product Preset Design 

Editing Features and Capabilities

The interaction feature can be applied to any container in our product library, it creates a new layer on top of the existing product. This layer is show only when the users performs an action (mouse hover) on the designated trigger component. On the Editor stage it is represented by two modes on the trigger component: Regular mode that is visible by default, and Hover mode which is displayed only after a user hovers over the component. Hover mode provides our users with a variety of new controls and possibilities to customize their website.

Customization Features

As the interaction system can be applied to any container in our product library, we create product presets to showcase the possibilities users can create using this feature. A very large percentage of our users are not tech-savvy or designers, so we cater most of the product presets to them, making sure presets work out of the box with minimum editing requirement.

Controlling transformation effects using the "Effects" panel.

Animation movement by dragging elements on stage