VFab Content Creation Tool
Scratch like Drag Drop Content Creation Tool for Middle & High Schools
User-Centered Design
Government Design System (GDS) Compliance
Collaborative and Iterative Prototyping
Project Definition
Project Name: VFab Scratch-like Content Creation Tool
Role: Lead UX/UI Designer
Tools Used: Figma, Sketch, InVision, UserTesting
Summary:
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 to have critical skills such as creativity, writing, math, and self-confidence.
With VFAB, our aim was to help students for developing qualities like perseverance and organization while exploring sample codes of fun coding activities tailored to their interests.
The Challenge
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
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.
My Approach
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.
Drag-and-Drop Interface: Blocks were designed to represent coding functions, allowing students to construct their programs by snapping blocks together.
Collaborative Features: Teachers could create and manage collaborative projects, facilitating group learning.
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.
Problems and Solutions
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.
Drag-and-Drop Interface: Blocks were designed to represent coding functions, allowing students to construct their programs by snapping blocks together.
Collaborative Features: Teachers could create and manage collaborative projects, facilitating group learning.
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.