Wix Platform Application
Into the Mobile Editor
THE CHALLENGE
Increase Awareness for Mobile Editor
Wix automatically creates a mobile-friendly version of the site. Alongside the auto algorithm, Wix has a Mobile Editor for more personalization.
Numbers showed that less than 20% of the users have been visiting the Mobile Editor. It was important to us to encourage & teach Wix users they have a mobile version of their website, and also the benefits it has for engaging online traffic.
A website in Desktop Editor and Mobile Editor
Using a human-centered design approach, we focused on the most critical features of the mobile version, hoping to simplify the encounter with a mobile editor for the first time, which would reduce risk and uncertainty.
New Mobile Editor Intro
My Role
On this project I was leading the UX of the mobile editor group, working with a Product Manager, UX Content Writer and dedicated talented front end developer.
-
Competitors research
-
Market research
-
User Journey mapping
-
Ideation
-
Creating UX wireframes
-
Prototyping
-
UI Design spec
-
Illustration
-
Defining interactions and behaviours spec
JOURNEY MAP
The Current Experience
As a UX designer, I wanted to understand first of all what are the feelings, thoughts, and emotions that users experience when first encountering the Mobile Editor.
In order to understand and identify that feeling better, we created a journey map to help us understand the “fragile moment” of the first encounter with the mobile editor.
Emotional Journey Map summery of users tickets
MARKET RESEARCH
Look & Learn from Others
So we have a problem. Maybe other competitors are having the same problem? If so, why not test their solutions? It helps to accurate the problem and the goal.
Analysing different onboarding experience that familiar to mobile users.
competitor research insights and summary
IDEATION & PROTOTYPING
The Best Way to Improve Engagement
Wireframing and sketching is something that repeatedly happens throughout the entire process. Working in a team is a process of a lot of good ideas that need to be gathered eventually into a successful and coherent product.
Paper sketching of different ideas for the intro flow
We knew there are some features in the Mobil Editor that are important for any mobile visitor. Also, there are unique features that different users might need according to the business role of their website.
There were several ideas on what is the correct approach and how to achieve our goals. So, to be certain, I created four rough prototypes using Axure so that I could test them with people.
.png)
.png)
.png)
.png)
Several concepts that were prototype and tested
THE FINAL PRODUCT
The Onboarding Wizard
When a user starts a new website, we focus him on 3-5 steps, Exposing some of the main features that the Mobile Editor can offer, features that has a great impact in a mobile site. According to the user website profile, we match the right design which will create confidence, and encourage engagement with the mobile editor.
Entering the mobile editor
Mobile Menu
One of the most distinguishing features that are different between desktop to mobile is the menu.
Scroll Effects
Another essential understanding that users need to know about experiencing content on mobile is the scrolling.
What better way of creating awareness, then let him choose scrolling effects?
Actions Bar
The Actions Bar is one of the most engaging features on a user's site. We decided to recommend our site owner place on this bar the most important services that they can offer, considering that their users are entering the site from mobile devices.
Back to Top
A unique feature that necessary for the mobile experience is the tiny and noticeable button that allows you to scroll to the top of the site at once.
Wix offered has a lot of cool design options, and what’s a better way to show of with them then one cool button?
DESIGN
Pixel Perfect Specs
Part of my responsibility as a UI designer is making sure that design, functionality, and the overall experience, survive the execution process. It’s mean creating assets that are clear as possible and working closely with the technical team, helping them to achieve the desired result.
WHAT'S NEXT?
Keep Learning
So after three months, we started to get significant numbers, we saw that 47% of users completed the Mobile intro. 60% of the users engaged with different options and kept them on publish. The most successful feature was the Quick Action Bar with increment of 500% adding to the site!
Another principal value that we have been able to connect the main pain points of an experienced mobile editor's site, supporting relevant and fun features and experience.
Test out a new wizard interface that can reveal some critical AI-targeted features and help more accurately and, more specifically, how users end their site.