Animations & Interactions
The problem
-
Editor X had old technology of Entrance animations.
-
We also had click+hover interaction with bad user experience. Users struggled with understanding the logic and the flow, and it felt too technical and complex.
-
Missing scroll animations that our big competitors had.
The goal
Allow the user to add movement and interactivity to their sites without using code at all.
the full release was a full animations system in Wix Studio, included:
-
Click & Hover interactions experience improvement.
-
Entrance animation technical rewrite and experience improvement.
-
New Loop and Scroll animations.
Key points
We initially kicked off a project of fixing the experience and make it awesome. a few months after, Wix Studio was announced and the product had a massive pivot of new animations - loop and scroll, forcing us to set a wide change to set the whole animations experience on the editor to be cohesive and natural.
-
Designed the UX of this project as a single designer with three product groups, while supporting templates designers, helping marketing effort, and leading feedback and usability sessions with our users.
-
Planned a design sprint offsite to refine the user experience and develop a fun & scalable illustrative language, that then developed into a animated icons system that other groups on Wix use since.
-
Increased number of interactions active in every site from EditorX (around 12 animated elements per site) to Wix Studio (around 42 animated elements per site).
Product areas and decisions
Entry point
One lobby the user starts from, see the different tiggers and chose the one they want. This panel needed to be very clear and intuitive, both as empty state and as an "animations summary" the user can easily scan to see which animations are active on the specific element they're on.
Selection
For each trigger we have a presets list (we chose to go with the presets method and not “building blocks” method) that showcase each preset and preview it on the element on stage.
This panel is more visual, and showcase the presets verity.
Customisation
For each preset have a customisation panel the user can play with each property to make the animation perfect for their needs. This panel is more easy and playful, with clear preview.
