PiperLab_Demo_GraphVisualizer

PiperLab is the integration of the original Piper Computer Kit's coding software with a new web-based interactive dashboard and tutorial library.

PIPERLAB.

A "hands-on" interactive web platform for coding circuits & prototyping

THE PROBLEM.

2X7A2654

The Piper Computer Kit’s software did not integrated circuit wiring with coding, proved to improve efficacy. Building on the Raspberry Pi version of Minecraft technical limitations slowed down engineering development time and created roadblocks to creating new gaming levels. Finally, the Minecraft gaming structure limited what educational simulations the team could design; therefore, limiting new tutorial subjects.

THE OPPORTUNITY.

2X7A4926

With the drastic changes to the 2020 Q2 economy and market, I saw the strategic opportunity to lead the Piper Product department in developing a low-cost, learn at home software platform. With an ItsyBitsy micro-controller for the PiperLab Controller and the PiperLab web-based software experience anyone, anywhere, can access STEAM learning.

THE DESIGN.

Once hardware is assembled & connected to a computing device, launch the web platform to learn, code, or protoype.

LAB01-Portal-Hero

IMPROVED PLATFORM.

To simplify the back-end architecture, we integrated the coding tutorials into the narrative based learning challenges. With goals to improve accessibility, bias and localization, we removed voice-overs, used text overlays, and limited characters to just make sounds. Finally, we the improved out of the box experience by removing updates and configuration.

IDE_Problem_Solve_iPad

IMPROVED CONTENT.

The new design system improved the educational efficacy through restructuring of levels and tutorials. The new level design integrates coding and wiring circuits into the same experience for more consistent building of knowledge and removing the fragmented learning in the original software experience. The new tutorial design introduces interactive simulations, assessment challenges, and  problem solving prompts based on student's local community needs.

2X7A3769

THE HARDWARE.

Learn about the modular, prototyping controller.

RESEARCH.

MARKET FIT.

PERSONAS.

USER JOURNEYS.

LAB01_UserStory-01

The market is flooded with coding apps, but there is a surprising gap in hardware-specific online IDEs. Hardware integration is a quick, cost rewarding & well-rounded way to learn coding.

Key demographics for PiperLab's transition online.

Mapping to determine MVP features.

CreatingDesign

USER NEEDS.

Low-cost platform

Home-learning = Online experience

Narrative-based learning

Diverse coding challenges

PLAYBOOKS.

TECH SPECS.

Tech-Specs

BRAND GUIDELINES.

UI-Style-Guide-01

DESIGN PRINCIPLES.

Splashpage2
  • Fresh: universally age appropriate
  • Flat: content pops out from interface
  • Fun: Playful elements sprinkled throughout

DEVELOPMENT.

USER JOURNEY.

UX_FlowChart-01-1

SCRIPTING.

LAB01_Fritz_Blink
IDE_Assessment-Script

ITERATIVE SPRINTS.

FEATURES.

THE USER-FOCUSED SYSTEM.

PiperLab_Demo_ContentEditor_Compressed

The interface and content implementaiton system were designed with the eventual goal of turning over control to the user. Every interface is a widget that can be hacked by the user through a customization tutorial; each feature in turn becomes a teaching aid in demystifying software design. Additionally, all content is implemented with automation tools like text and graphical editors like the one in this video. All implemented, intial features have long-term design goals that have been concept tested and validated; in turn, shortening the overall development time.

LIVE FEEDBACK PROTOCOL.

PiperLab_Demo_DigitalSimulation

In the original software design, the hardware required a separate & long configuration process to work around the uploading protocols. With the newly implemented USB serial protocol, feedback is received in real time for more efficient troubleshooting & configuration of the hardware. This feature also allows users to troubleshoot live by accessing the serial console.

INTERACTIVE STORYTELLING.

StoryMode-03

The market demands competitive coding experiences above all other Computer Science curriculum. Therefore, this system structures the UI around the coding IDE. Using transparent overlays for graphics, character animations, and interactive simulations, narrative-based lessons can still guide the user through the experience without distracting from the coding focal point.

2D DESIGN.

1_1

Click through to see early storyboarding of characters interaction in their world with the limitations of the overlay / zoning system. The use of zoning allows for content automation without limiting user interaction with the characters or simulations.

DASHBOARD UX.

LAB01_Dashboard
EDU_Dashboard_Mockup

When developing the dashboard to allow non-developers to implement content, track metrics, monitor the platforms longterm KPIs, and evaluate efficacy, I discovered an opportunity to design it to be user facing. The goal is to create an Educator friendly dashboard that allows users to generate additional content for their students, but also for Piper's larger community. It will give teachers the ability to monitor their students progress and their content's efficacy. 

MENU SYSTEM.

Pipercode_Menu-08
Dashboard_MyProjects

Updating the experience online, required restructuring to the menu flow & UI. On top of visual design, a "kit selection" feature has been introduce to allow users to quickly curate their experience. A "save projects" feature was introduced. Using cookies rather than a login system ensures user safety protections while still providing a personalized experience.

MOCKUPS.

IDE_Connect
IDE_Assessment
IDE_DigitalView
Tutorial_Simon_Step-PlaytheGame
uwpxmwza
phbtrtqud
xoexyylvm
ffdphymnj
zbjxmhyvr
fpllmbg
lwyyukdix
zfhjnkgmiv
ratuguen
tzmzrilmdn
pxgwstfi
cuzfrmt
ameizftae
jlqcryn
zodblvt