In the education market, many similar tools already exist for schools and students. I prepared a competitor analysis to differentiate these tools and create a scope for usability advancements, drag-drop functionalities, and additional coding-related features. Another major challenge was creating an engaging experience for teachers and students who have limited coding skills.

Many students lack coding exposure, and existing educational tools are often too complex for beginners. The challenge was to design an intuitive platform that lowered the barrier to entry for students and teachers with limited coding experience, allowing them to create and manage interactive content effortlessly.

Competitor analysis interviews with teachers and students provided key insights:

Young students who access computers are consumers rather than designers or creators. Creating an engaging application for creating computational artefacts prepares students for more than careers as computer scientists or programmers. It supports students’ development as critical thinkers—individuals who can draw on computational concepts, practices, and perspectives in all aspects of their lives, across disciplines and contexts.

Coding emphasizes the knowledge, practices, and fundamental literacies that young people need to create dynamic and interactive digital content that supports their development.

• Existing tools were either too complex or not engaging enough for younger students.
• Teachers needed a tool that facilitated student collaboration and required minimal technical knowledge.
• Sharing and updating quickly was critical for adapting to different school environments.

These insights informed the design focus on simplicity, engagement, and collaborative learning.

My role was to work with instructional designers, teachers, and front-end developers, understanding scratch-based programming logic and creating a user experience and user interface that supports this approach. I facilitated workshops with content experts and software developers to break down processes and clarify coding scenarios.

Wireframes & Prototypes:
Low-fidelity wireframes were created to define the user flow for block-based coding. High-fidelity prototypes focused on drag-and-drop functionalities, making it easy for students to create interactive content without writing code.

1. Drag-and-Drop Interface: Blocks were designed to represent coding functions, allowing students to construct their programs by snapping blocks together.
2. Collaborative Features: Teachers could create and manage collaborative projects, facilitating group learning.
3. Browser Compatibility: Designed to operate seamlessly across all browsers and devices, ensuring flexibility for school environments.

Visual Design:
The design was colourful and inviting, geared towards young students. The block system was visually simplified to ensure ease of use, while the interface remained professional and intuitive for teachers.

VFab was designed for teachers to develop their own interactions and to implement collaborative projects to work on with students. In VFab, interactive content can be easily developed just by using the “blocks”, which correspond to certain operations in computer language, without writing even one single line of code. Interactions designed in VFab are converted on HTML5 and operate on all browsers and devices, even after the browsers are updated.

We conducted workshops with teachers and students in public and private schools. Feedback was integrated to refine the drag-and-drop system’s usability, ensuring a balance between fun and educational effectiveness.

To test our user scenarios and usability problems, we held a series of workshops with teachers from public and private schools. Based on their feedback and requests, we continuously updated our product.

• Increased Student Engagement: The block-based coding system increased student engagement.
• Teacher Satisfaction: Teachers provided positive feedback that the platform is easy to use for managing collaborative projects.
• Reduced Learning Curve: Students could understand and create interactive projects more easily compared to traditional coding environments.