Block Coding Editor for Metaverse Creators
My Role
Product Designer
Team
1 Product Designer 1 Brand Designer 3 Developers
Timeline
Aug 2022 (2 days)
Discipline
Desk Research UI experiments & Iteration Development
Overview
A Block Coding Editor
for ZEP Script-based apps
Questions 🤔
“ Did ZEP creators enjoy the experience while making apps with ZEP Script? ”
Discover
Problem
Users who want to build an app must have prior knowledge and face an inefficient
testing process where they have to deploy the app every time they want to test it.
Define
Solution
With ZEP Studio, anyone can easily make their own virtual world WITHOUT any code and developers.
How is this possible?
Even non-developers can use functions of ZEP scripts with our editor and instantly check the result by automating app deployments.
whenever creators change an option, a test publish is conducted. So users can check the preview at any time.)
UX Flow & Wireframe
ZEP STUDIO is easy to access because it is an app installed in ZEP
Users can easily start with presets of scripts recommended functions frequently used in ZEP.
Implement
Mapping blocks from ZEP Script &
Defining Use Cases by Complexity
Blockly* to Generate Code & Serialize state
*Blockly: Google’s open-source block coding editor. (only using the back-end logic to power our custom UI)
Final Design
Get started quickly with presets
Don't create everything from scratch. You can bring frequently used functions.
Easier block coding
applied the concept of block coding so that anyone can customize the automation function,
and improved the UX to make it easier to use.
3 block types mapped ZEP Script
Trigger : entry point for each code (event hook)
Condition : conditions, iteration, and variables
Action : control UI and business logic (methods)
Just click and drag to customize features
Even non-developers can instantly check
the result with map and code preview
Easier Block coding enables more familiar and intuitive experience
Results
Possibility of continuous participation in the creator ecosystem
