CASE STUDY
Dev Mode Onboarding
Disclaimer: All designs presented were either designed by myself or in collaboration with designers under my direction. Due to company’s confidentiality, the actual details of my work can’t be disclosed.
Goal:
Increase the number of new users who have active code in Wix.
My role:
Following user feedback sessions I conducted with first-time developers, I shared with the team the challenges these participants face in achieving quick success after enabling Dev Mode. I led the UX/UI designer during the ideation and definition stages.
Research:
I conducted 15 usability sessions to test the 1st time experience. 8 with senior web developers and an additional 7 sessions with computer science students from Ben Gurion University. Both of the groups have a background in JS and Node.js and no experience with Wix. The UXers and the PMs took part in these sessions.
Insight 1 - External guidance:
The current solution explains the platform in advance through the use of an introduction video or an overview article about the platform led users to a passive mode. Some skipped them while others struggled to remember because they found it overwhelming.
The getting started tab before the redesign.
Insight 2 - User mental model vs. Wix system model:
For technical users, the interface is less intuitive because there is a gap between what developers are familiar with and how Wix actually functions. For example:
1. Users believed they could use Web API, but couldn’t. Instead, they needed to use Wix APIs
The users don't know that the Web APIs aren't supported, so they make mistakes.
2. Users thought they could edit UI using code (HTML/CSS) but couldn’t. Most of the UI editing requires using a WYSIWYG interface
Visual Editor is not a common convention for HTML/CSS development.
Inspiration:
As part of the work on the solution, I discovered a great book called “Better Onboarding” by Krystal Higgins. Her "guided interaction" methodology was the basis for our process.
The “Better Onboarding” book by Krystal Higgins.
Additionally, I found interesting references as part of my research such as the following reference from a Medium on how to write a new story:
Ideation - Learning by doing:
The Wix Code product team (PMs and UXers) conducted a brainstorming workshop. This workshop provided insights on the core use of our platform and the user routines. We were then able to start drafting the improved onboarding journey.
As part of the ideation phase we explored several directions, for example:
1. Code Snippet Panel:
In this option as part of our ideation, we thought of using the real estate within the Code Editor for code snippets that can guide the users.
2. GIF Base Tooltips:
Here the idea was to open a tooltip with gifs on a certain area after the user interacts with it.
3. Getting started tab:
Another option was to use the existing getting started tab and update its content. Rather than external links, this content provides code snippets and gifs that guide the user to their "first success".
Selected solution:
We decided to add a sample page that shows different UI interactions with their code snippets.
Users can access this page by right-clicking on an element—something we noticed in usability tests with new users—or from the starting point of developer mode in the Wix editor.
This helps users better understand how to combine Wix's built-in elements with the Wix API. Alongside the examples, we included extra explanations about getting started with the development platform in the editor.
When users preview the page, they can test the functionality, see it in action, and reuse it and getting their first faster.
The new onboarding experience.
Retrospective:
The relationship between the WYSIWYG editor and the code editor posed an interesting challenge that we overcame by bridging the gap between the users' mental models and the Wix system model. By studying how users interact with elements, we were able to bridge this gap effectively.
Next?
You Can Find Me On
