Onboarding existing users to a new Editor experience.
With the launch of a new Editor for Wix.com, we wanted to Provide orientation and reassure for existing users, transferring from their old version of the Editor.
ROLE
Senior Product Designer
Research, Design, Prototyping, Visual Design, QA
DURATION
Feb 2022 - Jun 2022
THE DREAM TEAM
Product Manager - Aviya Sela
Engineer - Vitalii Ovcharenko
UX Writer - Sara Kessler
Animator- Paz Shribman
Overview
Problem.
The Wix Editor team was nervous about transferring 220M users to a newer Editor version that might cause support and social media turn on fire.
Process.
Collecting references of similar onboarding experiences, building a storyboard, concepting, designing and animating a flow to introduce the new Editor for the first time.
Result.
An onboarding tour that includes reassuring and exciting highlights that will be shown to the user after switching to the new Editor.
Our Goal
Creating a smooth transition for over 220M users, moving to an improved version of the Wix Editor.
Our main KPI is preventing an increase in support tickets and negative social media posts.
What’s out there?
Collecting references and cataloging them by a unique criteria.
This criteria later helped us in differentiating the concepts.
What’s in scope?
Coming up with areas we want to cover and what is left out of scope.
Creating a Storyboard
Joined forces with the PM and UX writer to perfect the story we want to tell.
Defining design guidelines to follow:
Keep it basic
Provide Reassurance
Show their site at all times
Not overwhelm with information
Cover the new Editor features
Concept Review
Creating 3 concepts, that are different on their interaction and effort level.
Adding pros and cons for each concept to review and rate with the team.
Concept Analysis
Comparing the concepts on different levels to come up with a recommendation.
The Tour concept was selected based on best experience and lowest effort level.
Card Design
Worked closely with our animator to create a new illustrative language.
We wanted it to stand out, yet be as clear and light as possible to convey the story. It was fun!
Design Explorations
Final Illustrations
Design spec
It included card definition, location and stage behavior.
Design Decisions
Interact with your site first.
We made an assumption that by allowing the user to interact with their site right after the migration it will bring the reassurance and clarity we wanted.
2. An option to take the tour later.
In case our user decides to skip the tour we wanted to showcase where to find it later.
3. React to user actions.
Adding an illustrative reaction “saying no” when the user try to interact with the site, emphasizing it is not possible.
What data should we track?
Defining with our data analyst which BI event to collect in order to make sure we reach our goals and are able to make iterations to improve our product.
How many users-
✔️ Start, Remind, X
✔️ Click on stage
✔️ Spending time on each step
✔️ Click on learn more link
✔️ Drop off (Funnel)
✔️ What is their first action after tour
✔️ Relaunch tour
Final Design
Scalable Design
With a simple copy and illustration changes we were able to adjusted this experience for users switching from a different Editor and we’ll also be using it for all new users coming to the Editor in the future.
Highlighting different elements for different user types
Beginning of July 2022 we plan to release the new Editor version with the onboarding experience.
Stay tuned for BI results!