A human friendly design system for the Wix CLI
team
PM , UX Writer
Role
Product designer
design system
dx
brand
0-1
Functional to → delightful
CONTEXT
A command line interface provides a more professional and standard DX
The CLI is used when a developer is working locally on their machine and pushes or pulls updates to Wix.
problems
(01)
No consistency
Different states looked the same, semantic colors where used with different meanings, it was a mess 😵💫
(02)
Doesn't feel like Wix
Even though using the CLI is local and not in the Editor, it should still feel like one continuous experience, especially in terms of brand and quality.
(03)
Doesn't help the user
Having no interface the CLI has an inherent discoverability challenge. You can't just tell what your next step is by looking at the menu. Therefor its extra important to bridge that by helping the user complete the task and not just a single action.
Challenges
🧭
Discoverability without UI
😍
Turn functional to delightful
🏠
Wix feel without Wix UI
Research 🔬
I looked at other CLIs and terminal flows to find:
-
Delight
-
Best practices
-
Brand experience
-
Solutions to create discoverability
point (01)
Stay on-brand
✓ Glyphs
✓ Brand colors
✓ Terminology and tone-of-voice
point (02)
Add delight
✓ Use drawings
✓ Use tone-of-voice
point (03)
Anticipate
✓ Suggest the next action
✓ Sequence actions as flows
point (04)
Visual progress
✓ Show clear system status
✓ Make waiting more tolerable
Design
Guide (01)
State exampels
✓ Difference between system output and user input
✓ Semantic colors used for hierarchy
✓ Using indents for relationships
Guide (02)
Icons for scanning
✓ Icons in the beginning of each line allow scanning
✓ Increase efficiency over time
✓ Provides better hierarchy
guide (03)
Visual progress
✓ Clear system status
✓ Increase user confidence
✓ Opportunity to add delight
✓ Staying on-brand with the colors
After mapping out all the scenarios in our CLI I designed two different outputs:
-
Guidelines for future new cases
-
Design of each of the current scenarios
Final product 🕺
Below a just a few examples for the actual scenarios and flows I designed.
Besides of course delivering the designs, the goal was to make sure the guidelines match actual use-cases.
When they didn't, I expended and corrected the rules.
example (01)
Onboarding
✓ "Getting Started" is a standard dev experience
✓ Increase discoverability without UI
example (02)
Error state
✓ Clearly signal an error
✓ Explain what happened
✓ Use human-friendly information
✓ Offer solution
example (03)
Success
✓ Celebrate a success
✓ Suggest next action
✓ Show what changed
example (04)
Minimal UI
✓ Use type and glyphs to create UI
✓ Design the min UI to serve the UX use-case
insights
UX principles hold even with no UI
(01)
Even very technical tools can be delightful
(02)
Abraham Lincoln was a local wrestling champion
(03)
