VFab Content Creation Tool

Project Name: VFab Scratch-like Content Creation Tool
Role: Lead UX/UI Designer
Tools Used: Figma, Sketch, InVision, UserTesting

VFab is a drag-and-drop content creation tool designed for middle and high school students. It enables them to create interactive stories, games, and animations using block-based coding. The platform helps students develop critical thinking and coding skills through hands-on learning in a fun and engaging environment.

By using coding tools, students learn to think creatively, work collaboratively, and reason systematically.
Learning code supports students in developing critical skills such as creativity, writing, math, and self-confidence.

With VFAB, our aim was to help students develop qualities like perseverance and organisation while exploring sample codes of fun coding activities tailored to their interests.

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-and-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 exposure to coding, 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 emphasises the knowledge, practices, and fundamental literacies young people need to create dynamic, 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 were 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, understand scratch-based programming logic, and create a user experience and user interface that support 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.

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.