Using onboarding to bridge the gap between code and UI
team
PM , UX Writer, BI.
Role
Product designer
DX
onboarding
user testing
prototyping
The biggest drop in the funnel
CONTEXT
Users can't directly access UI elements in the code
They need to use the none-standard $w Wix API.
problem
A different mental model:
(01)
Code 💘 UI
Wix Code
-
Design UI using drag and drop in Editor
-
Code functionality separately in Dev Mode
-
Get UI using an API and automatic ID
Standard
-
Code the UI
-
Code the functionality
-
Get UI elements directly by custom ID
symptom
A big drop in the funnel
(01)
Users want to code but don't know how
Active Developer Mode
Write meaningful code
Challenges
⏩
Users skip instructions and tours
🧩
Right information, right context, right time
🏎️
User want to start coding right away
Competitors research 🕵️♂️
Im researching competitors to identify:
-
Standards and patterns
-
User expectations
-
Weak points - specifically user experience
-
Strong points - especially learning by doing
competitors research (01)
Reading is boring
✓ Use interactive examples
✗ Don't add lengthy instructions
competitors research (02)
Start with a template
✓ Align with user intent
✓ Users are here to build - not learn
✗ Don't use an unlikely classroom use-case
competitors research (03)
Onboard in-app
✓ Onboard in the real work env
✗ Don't take the user off the platform
Design
Based on my research and problem statement im drawing multiple initial design options to:
-
Share with the team
-
Get feedback from stakeholders
-
Test with users
Solution (01)
Getting Started
✓ Multiple core-use concepts at once
✓ A familiar experience
✓ Potential to scale
Solution (02)
Right click
✓ Start from UI
✓ Lean development
✓ Matches behavior in user testing
User testing 🧑🔬
Insights
UI selection is the main gap
(01)
Users don't read inline instructions
(02)
Teach only core concepts - start working!
(03)
I build a Figma prototype including the onboarding experience and a short task.
The task is based on the core concept of UI to code relationship in Wix.
To save time I test at the office with Wix employees.
The user testing is done with developers who:
-
Work on different products at Wix
-
Aren't familiar with writing code on our platform.
I present them with the task and watch them perform it in the prototype while taking notes.
I do not intervene any further or guide them.
Final design
A demo of the new Getting Started experience
Eventually I came up with two different solutions - from two different angles:
-
Starting from a UI element and then adding code "to it". Based on user research observations
-
A "Getting started" experience based on industry norms defined in competitors research
Solution (02)
Right click
✓ Works only in Developer Mode
✓ Use professional terminology to stand out
✓ Add code for a specific use case
insights
When onboarding - think backwards!
(01)
Teach in the context of the user's task
(02)
A horse has 14.9 horse power
(03)
