Jessica Herzog | projects · about · contact · blog · more links




Matrix Pix

A two-part web resource that introduces pre-teens (ages 11-13) to the math behind a digital image.

Situation: Despite today’s vast visual culture, a lack of exploration in how digital images work "under the hood” remains. Image processing could provide digital application and intuitive visual understanding of concepts such as matrix manipulation, however matrices are considered too advanced for middle school math (according to Common Core NY State Standards).

Solution: Matrix Pix, a web-based app, first familiarizes users with matrices in Story Mode, where a step-by-step interaction walks through an image’s loading and convolution processes. Along the way, a relationship begins to form between the numbers and pixels, which underlines the power and importance of playing with images. This approach builds upon simpler math concepts while grounding them in something pre-teens are already interested in: digital images.

An accompanying stop-motion video provides a deeper dive into pixels, bits, and color planes.

Skills: Image Processing, Teaching, Video editing, UI/UX, User testing, Scripting

Tools: HTML5 Canvas API, Premiere Pro

try it!

process, research

Sound Swirl

An interactive web app for children (ages 6-8) to better understand and recognize abstract art at The Guggenheim museum.

Situation: Abstract and Expressionist art is best understood by its emphasis on process, sound and movement – all of which are not normally encouraged or allowed while viewing the actual works in a museum space.

Solution: An educational web-based app that gives children the chance to interact with and draw directly onto paintings from the Guggenheim’s collection, a museum that once provided viewers alternative ways to experience the art, using incense, jazz and classical music. Each interaction makes a different sound, encouraging exploration. An ambient soundscape of the museum loops in the background. Works well with a drawing tablet.

Skills: Design thinking, UI/UX, User testing, Prototyping, Data visualization

Tools: JQuery, HTML5 Canvas API, Literally Canvas, Three.js, FindSounds

try it! (Best viewed full screen)

Composite Patchworks

A visualization of gathered color data pulled from images of textiles.

Situation: Composite materials, structures, and data have played a significant role in our global culture’s recent digital and physical development, while repurposed or 'combined' materials are seen in technology, digital art, and textile processes such as quilting or weaving. How can these themes be combined?

Solution: A series of 12 digital patchwork quilts made by applying various image-processing techniques to images from the Stedelijk Museum’s textile collection. Data was chosen from the Stedelijk Museum because it is currently the world’s largest composite building.

Skills: Design thinking, Research, Image processing, Data parsing and visualization

Tools: ImageMagick (CLI), Processing, Adobe InDesign, Cheerio, Scrapy

research, process and code

download all quilts (pdf)

Reversing Changes with Git

A series of tutorials introducing Git commands to visual learners.

Situation: Transitioning from user to creator can be an uncomfortable process, with a steep learning curve. What are the most empowering ways to introduce programming concepts that are fundamental to understanding how software is made?

Solution: A series of Youtube tutorials using visual learning techniques, starting with a step-by-step introduction to version control software (VCS).

Skills: Research, Teaching, Storytelling, Scripting, User testing, Video editing

Tools: Git, Premiere Pro, Photoshop, REAPER

research, further reading

Random Access Memorial

An augmented reality app placing 3d objects at geolocations.

Situation: For every new day, we collect new information. Most we forget (number of steps walked, calories eaten), but some we still hold onto (addresses, receipts). What makes data feel special? What happens to data's validity once it constitutes a memory?

Solution: An iOS app as an interactive map of my neighborhood in New York. I used a GPS tracker everyday for two weeks, creating 3d objects as signifiers of a memory experienced in a certain place. Physically walk to each location to experience the memories.

Skills: Design thinking, UI/UX, User testing, Prototyping, Data parsing

Tools: Autodesk Maya, Wikitude, ARToolKit, Swift, Cesium, Map My Run, Sketch

research, process and code

earlier prototype, user flow

Returning Home

A sculpture involving concepts of digital and physical loss.

Situation: In a digital space, the concept of home refers to the origin, and you are always given the ability to go back. Fall 2016, my parents sold the house I grew up in. It became clear that in a physical space, going 'home' doesn't always take you back to where you first began. How do we translate this more complex, physical concept of 'home' into a digital space?

Solution: An interactive installation with moving parts controlled by a Raspberry Pi. Specifically a hanging piece of knitted cloth, while attached to a rotating motor, would unravel around the motor creating a nest. A casing, constructed to look like a mix of my childhood home and a birdhouse, housed a projector casting images of my home onto the cloth. Images became less visible as the cloth unraveled.

Skills: Physical prototyping, Design thinking, Storytelling, Video editing, 3d knitting

Tools: Arduino, Raspberry Pi, openFrameworks, Python, Premiere Pro, REAPER

research, testing and code

Pixel Smear

An online image-processing/drawing tool tailored to a child’s user experience.

Situation: The tools one uses has a huge impact on the work itself. Because software is either too limited or too complex, children ages 3-5 are unable to comfortably experiment with editing images.

Solution: A simple, web-based interface in the style of a drawing tool, with nine preset filters and an eraser.

Skills: UI/UX, User research, Image processing

Tools: HTML5 Canvas API

try it!

After the Eclipse

An interactive children’s story.

Situation: My friend Amber wrote a short story and sent it to me. Each sentence gave me vivid, sensory details of a forest at night – full of visuals, sounds and textures.

Solution: An illustrated e-book, with a unique i/o element on each page. All elements were programmed using C++, including a capacitive sensor and digital RGB led strip. Ten interactions in total.

Skills: Storytelling, Illustration, Physical prototyping, UI/UX, User research

Tools: Arduino, openFrameworks, OpenCV, REAPER

story and code



An image-processing program demonstrating decomposing waste.

Situation: Understanding what to do with waste is a fundamental aspect of a healthy lifestyle. Without relying on the reform of public school curriculums, how can we create engrossing learning tools to promote sustainable living?

Solution: A program depicting the simulated 'breakdown' of an image. Originally a supplement to the group proposal Get Your Greens, a series of web-based e-books that visualize waste-management processes like composting and recycling, using memorable characters that each tell a story. Here is the first e-book.

Skills: Storytelling, Image processing, Teaching

Tools: Processing, Photoshop




My name is Jessica Herzog. I am a digital designer and educator focused on creating accessible approaches to learning technology and mathematics.
One of my current projects is Jess-Explains – a series of videos explaining tech concepts through animated, stop-motion visuals – alongside a website hosting interactive demonstrations and a directory of external resources of the concepts. The ultimate goal of this project is to show how visual-based formats can be used to engage tech learners of all ages and backgrounds.
Also check out my Instagram page Oddly Satisfying Math, where I regularly post many real-life examples of math being enjoyable.
I earned a BFA in Creative Technologies from Parsons School of Design's Design and Technology program.


Thanks for visiting! Email me:

Here is the template I used for the site. Here is my modified code.