PictoBlox Machine Learning Environment
Simplifying Machine Learning for Young Minds
OVERVIEW
STEMpedia is an innovative company dedicated to making educational technology accessible and engaging for young learners. Their software, PictoBlox, is a creative, offline platform designed to teach kids and teens coding through block-based and Python programming.
STEMpedia’s latest initiative integrates machine learning into the PictoBlox platform, transforming it into an educational tool where young users can train computers to recognize images, poses, text, sounds, numbers, and objects.
ROLE
UI and Graphics Designer
DURATION
8 weeks
TOOLS
Design Process
I followed a structured design process to create a user-friendly and visually appealing interface. I interpreted the developer's requirements, adapted wireframes, and made design decisions to improve the software's usability.
My Role
1. System Analysis & Interface Layout
Conducted an in-depth analysis of the existing system to understand its core functions, user interactions, and visual flow, then determined the layout for the new interface to ensure usability and coherence.
3. Icon Design & Visual Consistency
Designed icons required for the new interface, adhering to company guidelines to ensure visual consistency across the platform.
2. Developer Collaboration
Collaborated with developers to assess the technical feasibility of potential features and functionalities, ensuring that the interface aligned seamlessly with both technical capabilities and user needs.
4. Design Iteration
Engaged in a feedback-driven design process, refining elements based on team input and internal testing results to ensure continuous improvements in the interface.
Define Phase
User Flow
The insights provided by the developer about the Machine Learning model training process and the user's journey through the software guided the creation of the user flow chart, which depicts the steps users will take within the software.
Three distinct entry points into the ML environment were identified. Once users enter the ML environment, their objective is to create a project by uploading sample/training data, then training the model, and eventually testing or exporting the results within the coding environment of PictoBlox.
Ideate Phase
Wireframes
Based on the user flow, I brainstormed and designed wireframes for the key pages, including the ML Environment home page, the Create New Project page, and the ML Project Training page. The wireframes provided a foundational structure for the subsequent UI design, focusing on layout and functionality without including detailed design elements like colors or graphics.
Design Phase
Design System
High-fidelity Prototype
Opening Screen of the PictoBlox App
This was the key page, providing users with four initial choices.
The two coding environments are grouped together, while the ML and AR & 3D environments are displayed separately for clarity.
Home page of ML environment
When the user enters the ML environment, they land on this page. Here, they can create new projects or select and modify an existing project.
For new users, two default example projects are provided.
Create Project Screen
This page lets the user select project type and enter other project details like project name and description.
Image Classifier Project Screen
In the image classification feature, users can add various classes and image samples, and then proceed to train and test the model.
Similarly, there are project options for sound classification, pose classification, hand pose classification, text classification, number classification, and object detection.
Iconography
Alerts and Pop-ups
Test Phase
During the testing phase, the prototypes were brought to life by the software developer. Through a thorough review and testing process, conducted both internally and externally, any potential issues were identified and resolved.
Today, the beta version of the ML environment is available to the public and ready for download on STEMpedia's website!
Click below to learn more about PictoBlox