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