p5.js - Creative Coding Tutorials (2022)

UX Design
Project Overview

While completing my master's degree at NYU, I've had the opportunity to work as a graduate teaching assistant. My job duties are primarily to provide support for the Creative Coding class at NYU IDM. This project is an ongoing effort by myself and my supervisor, Scott Fitzgerald, to compile and organize a variety of coding examples for reference by future students in the IDM program.

My Role:
User researcher, Web Designer/Developer
Team:
Lilly Lin, Scott Fitzgerald
Tools:
Figma, p5.js, React.js, HTML/CSS
Timeline:
ongoing
Constraints:
timeline

Description

Creative Coding is part of the core curriculum for Integrated Design & Media (IDM) students at NYU's Tandon School of Engineering at both the undergraduate and graduate level. For most students this course is one of their first introductions to coding. The curriculum goes over basic coding concepts (variables, loops, arrays, object oriented programming) using the p5.js library. 

As the teaching assistant, I provide extra support for students who need help debugging their projects. I host office hours and workshops that review basic concepts so that students can apply them to their creative work. My supervisor (and one of the Creative Coding instructors), Scott FItzgerald, and I have created and collected several coding examples through the process of teaching. Our goal with this project is to compile and organize these notes and examples in one place so that students can easily refer to them when they need additional support. 

Challenges & Goals

I want this site to serve as a supplement to the Creative Coding classes, not to replace any of the content in class. It is also not meant to replace my teaching assistant duties. The main goals of this site are to serve as:

Process Overview

REsearch

first concepts & Design

user testing

iterating

RESEARCH

.
Competitive Analysis
Interviews & Readings

1ST CONCEPT & DESIGN

This project is still in progress, so far I've wireframed some initial designs and begun implementation of one of the pages using React.js. PIcture below are my initial wireframes, which adopt the double tabbed structure of the material.io site referenced in the previous section.

Below are screenshots of the React.js app I've been working in to lay out one of the pages

USER TESTING

ITERATING

REFLECTION

What's Next?

The next steps for this project are to continue building out content for the Variables page that is being prototyped above, style the site, and do some user testing to get feedback on what kind of examples are helpful and if the structure of the site is accessible and easy to navigate.