Empower developers. Unblock designers. Unlimited capacity.
team
PM , UX Writer, BI.
Role
Product designer
Ai ✨
onboarding
vs code
POC
+150% Increase in lines of code
CONTEXT
Users can't use vanilla JavaScript on Wix
problems
Steep learning curve for pro developers
(01)
Hard to implement for designers
(02)
Goals
⭐️
Marketing and PR
🎛️
Enable more complex sites
👩💻
Improve developer experience
Together with the dev and product team we brainstorm ideas.
We then map them out using the RICE method based on UX and dev estimates:
I build a POC using Wix and some code to test once we were happy with the initial sketches.
We opened this POC to a limited group of users to:
-
Gather their feedback
-
Study how they use the product
-
Better define their intents to refine our AI
the POC i built
Results 💁♂️
After the trail was over
-
We analyzed the users prompts and ratings
-
I conducted a series of user interviews.
User prompts
Generate code
Fix code errors
Documentation
Docs
We use this to onboard new developers in our agency
user interview quote 😁
Design
Based on the results I sketched a few different options for a solution.
My main considerations were:
-
Providing the most value for most users
-
Context in the user flow
-
Dev effort
option (01)
Panel events
✓ High reach
✓ Match user intent
✗ Strong feature coupling
✗ Build from scratch
option (02)
Panel tab
✓ Position in the user flow
✓ Accessible to designers
✗ Limited screen space
✗ The focus should be on devs
option (03)
Modal
✓ Optimal screen space
✓ Familiar experience
✗ Takes over the entire experience
.webp)
option (04)
VS Extension
✓ Low effort
✓ Proven similar products
✓ Familiar to pro devs
Final design
The new VS Code extension in production
A VS Code extension was the most viable option.
I refined and improved it into a production ready design.
I used the user intents defined in the POC to increase discoverability.
I mapped all the user flows and designed them as well.
results
150% Increase in lines of code
(01)
Increase in user satisfaction
(02)
insights
You don’t need the “perfect solution” to make a great impact
(01)
Carrots were originally purple
(02)
